:root{--web-bar-height:36px}
#web-bar{height:var(--web-bar-height);display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--border);background:var(--surface);font-size:12px}
#web-bar strong{margin-right:auto;white-space:nowrap}
#web-bar button{min-height:28px;padding:3px 8px;border:0;border-radius:5px;font-size:12px;font-weight:400;background:transparent;white-space:nowrap}
#web-bar #offline-status{color:var(--muted)}
#web-bar #offline-status[data-ready=true]{color:var(--good)}
#web-bar #web-update{color:var(--primary)}
body #app{height:calc(100vh - var(--web-bar-height));height:calc(100dvh - var(--web-bar-height))}
#web-help{width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--border);border-radius:14px;color:var(--text);line-height:1.8;overflow:auto}
#web-help::backdrop{background:#17203366}
#web-help h1{font-size:20px;margin:0 0 12px}
#web-help p{font-size:14px;margin:10px 0}
#web-help .web-muted{color:var(--muted);font-size:12px}
#web-help-close{display:block;margin:18px 0 0 auto;padding:4px 18px;color:var(--primary)}
#update-instructions{padding:10px 12px;background:var(--soft);border-radius:8px}
#web-bar #scene-open{color:var(--primary);font-weight:700}
#scene-library{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text)}
#scene-library::backdrop{background:#17203366}
.scene-dialog-heading,.scene-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scene-dialog-heading h1{font-size:21px;margin:0}
.scene-dialog-heading button{min-width:64px}
.scene-list-heading h2{font-size:16px;margin:0}
#scene-count{font-size:13px;color:var(--muted);font-weight:400}
.scene-explanation{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0}
#scene-save-form label{display:block;margin:16px 0 7px;font-size:13px;font-weight:700}
#scene-name,#scene-select{width:100%;min-width:0;min-height:44px;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:9px;font-size:16px}
#scene-select{margin-top:12px}
.scene-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
#scene-library button{min-height:44px;font-size:13px;padding:8px;overflow-wrap:anywhere}
#scene-library .primary-button{background:var(--primary);border-color:var(--primary);color:white}
#scene-library .primary-button:hover:not(:disabled){background:#104ac3}
#scene-library hr{border:0;border-top:1px solid var(--border);margin:20px 0}
#scene-status{font-size:13px;line-height:1.7;overflow-wrap:anywhere;color:var(--good);margin:14px 0 0}
#scene-status[data-error=true]{color:#a62d18}
#scene-confirm{margin-top:12px;padding:12px;background:var(--soft);border:1px solid #b9d1ff;border-radius:10px;font-size:13px;line-height:1.7}
#scene-confirm p{margin:0}
.scene-footnote{border-top:1px solid var(--border);padding-top:12px;margin-bottom:0}
.scene-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#scene-notice{position:fixed;z-index:30;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);width:max-content;padding:10px 14px;margin:0;background:#172033;color:white;border-radius:8px;box-shadow:0 4px 18px #17203322;font-size:13px;line-height:1.6;pointer-events:none;overflow-wrap:anywhere}
@media(pointer:coarse) and (max-height:540px){:root{--web-bar-height:30px}#web-bar{padding:0 9px;gap:6px;font-size:11px}#web-bar button{min-height:28px;font-size:11px}}
@media(max-width:700px) and (orientation:portrait){
  :root{--web-bar-height:48px}
  body{height:auto;min-height:100vh;min-height:100dvh;overflow:auto}
  #web-bar{position:sticky;top:0;z-index:25;padding:0 max(8px,env(safe-area-inset-left));gap:3px;flex-wrap:wrap;height:auto;min-height:var(--web-bar-height)}
  #web-bar strong{font-size:13px}
  #web-bar button{min-height:44px;padding:4px;font-size:11px}
  body #app{height:auto;min-height:calc(100dvh - var(--web-bar-height));padding:10px 8px calc(12px + env(safe-area-inset-bottom))}
  .app-shell{height:auto;display:flex;flex-direction:column;gap:10px}
  .equation-bar{flex:none;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;padding:10px 8px;overflow:visible}
  .balance-state{min-width:0;padding:10px 4px;gap:5px;font-size:12px}
  .equation-content{padding-left:8px}
  .quantity-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px;justify-content:initial;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
  .equation-expressions{display:grid;gap:2px;justify-content:start;margin-top:5px;text-align:left;font-size:11px;line-height:1.5}
  .physical-formula,.data-formula{font-size:11px;white-space:normal;overflow-wrap:anywhere}
  .direction-note,.rounding-note{font-size:10px;margin-left:0}
  .direction-note{display:block}
  .canvas-panel{flex:none;height:clamp(308px,calc((100vw - 36px)*.69 + 112px),460px);grid-template-rows:auto minmax(0,1fr) 56px}
  .canvas-heading{padding:10px 12px}
  .canvas-heading p{font-size:16px;margin-bottom:2px}
  .canvas-heading small{font-size:11px;line-height:1.5}
  .force-label,.arm-label,.count-label{font-size:var(--diagram-label-size,16px)}
  .pivot-label{font-size:calc(var(--diagram-label-size,16px)*1.1)}
  .zoom-bar{gap:6px;padding:4px 6px;justify-content:center}
  .zoom-bar input{flex:1;min-width:40px;width:72px;max-width:120px}
  .zoom-bar button{min-width:44px;min-height:44px;padding:0 6px}
  .zoom-bar output{min-width:34px;font-size:12px}
  .zoom-bar .zoom-reset{font-size:11px;padding:0 6px}
  .control-panel{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:12px}
  .control-panel h2{grid-column:1/-1;font-size:16px;padding-bottom:8px}
  .control-group h3,.slot-card h3{font-size:12px;margin-bottom:6px}
  .segmented button,.slot-card .segmented button{min-height:44px;font-size:12px;padding:4px}
  .hook-source{height:64px;flex-direction:column;gap:0}
  .hook-source strong{font-size:20px}
  .hook-source small,.control-hint{font-size:11px;line-height:1.6}
  .force-settings{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .control-panel:has(.force-settings)>.control-group:first-of-type{grid-column:1/-1}
  .slot-card{padding:8px;margin:0}
  .slot-heading{gap:4px}
  .slot-heading button{min-height:44px;font-size:14px}
  .slot-heading small{font-size:10px}
  .position-control{flex-wrap:wrap;font-size:11px;gap:4px}
  .position-control input{width:100%;min-width:0;min-height:44px;font-size:16px}
  .count-control{grid-template-columns:44px minmax(0,1fr) 44px}
  .count-control button{min-height:44px}
  .gravity-options{display:flex;flex-wrap:wrap;gap:6px}
  .gravity-options label,.compact-toggle{min-height:44px;display:flex;align-items:center;font-size:13px}
  .control-toggles,.control-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .control-actions button{min-height:44px;font-size:13px}
  .edit-hint{grid-column:1/-1}
  #scene-library{padding:14px}
  .scene-dialog-heading h1{font-size:19px}
}