.stage{display:grid;grid-template-columns:256px minmax(0,1fr) 300px;gap:18px;align-items:start}
.stage > *{min-width:0}
.elements{display:flex;flex-direction:column;gap:6px}
.elements .eyebrow{padding-bottom:4px}
.elements p.lead{margin:0 0 4px;font-size:12.5px;color:var(--ink-3)}
.el{appearance:none;font:inherit;text-align:left;display:grid;grid-template-columns:14px 1fr 12px;gap:4px 9px;align-items:start;padding:8px 10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.el:hover,.el.pinned{border-color:var(--sw);background:var(--paper-2)}
.el.pinned{box-shadow:inset 3px 0 0 var(--sw)}
.el i{display:block;height:0;border-top:2.5px solid var(--sw);margin-top:9px}
.el i.dashed{border-top-style:dashed}
.el i.dot{width:9px;height:9px;border:0;border-radius:50%;background:var(--sw);margin:5px auto 0}
.el i.ring{width:12px;height:12px;border:2px solid var(--sw);border-radius:50%;margin:3px auto 0}
.el b{font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;font-weight:600;font-size:14px}
.el > span:not(.chev){grid-column:2 / -1;display:none;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.el.pinned > span:not(.chev){display:block}
.el .chev{align-self:center}
.el span em{font-style:normal;color:var(--ink);font-weight:500}
.canvas-wrap{position:sticky;top:16px;height:clamp(400px,calc(100vh - 32px),760px);border:1px solid var(--line);background:var(--paper);overflow:hidden;container-type:inline-size}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
canvas.dragging{cursor:grabbing}
.viewbar{position:absolute;left:10px;bottom:10px;display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:6px 10px;font-size:12px}
.viewbar input[type=range]{width:110px}
.legend{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--line);padding:7px 10px;font-size:11.5px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid currentColor}
.legend .legend-fade i{height:10px;border:1px solid var(--line);background:var(--fade)}
.controls{display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--line);padding:16px 18px 18px}
#adv-rail{padding:7px 12px;font-size:12.5px;margin-top:4px}
.group{display:flex;flex-direction:column;gap:10px}
.group > .eyebrow{padding-bottom:4px;border-bottom:1px solid var(--line)}
.group.adv > .eyebrow{color:var(--amber);border-bottom-style:dashed}
.group-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn-sm{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;padding:2px 9px;color:var(--ink-2)}
.btn-sm:hover{color:var(--ink)}
.ctl{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:baseline}
.ctl label{font-weight:500}
.ctl .val{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.ctl input[type=range]{grid-column:1 / -1;width:100%;margin:4px 0 2px;accent-color:var(--red)}
.ctl input[type=range]:disabled{accent-color:var(--ink-3);opacity:.55}
.ctl select{grid-column:1 / -1;font:inherit;font-size:13px;margin:4px 0 2px;padding:4px 6px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.ctl .hint{grid-column:1 / -1;font-size:12px;color:var(--ink-3);line-height:1.4}
.ctl.locked label{color:var(--ink-3)}
.subcat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:13px}
.toggles label,.check{display:flex;gap:7px;align-items:flex-start;cursor:pointer}
.toggles input,.check input{margin:4px 0 0;accent-color:var(--ink)}
.lens-out{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2);line-height:1.5;padding:8px 10px;background:var(--paper);border-left:3px solid var(--amber)}
.reading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:24px;border:1px solid var(--line);background:var(--panel);padding:20px 22px}
.mode{display:flex;flex-direction:column;gap:12px}
.badge{display:inline-flex;flex-direction:column;gap:2px;padding:10px 14px;border-left:4px solid var(--red);background:var(--paper)}
.badge b{font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;font-size:20px;font-weight:600}
.badge span{font-size:12.5px;color:var(--ink-2)}
.stats{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.stats dt{color:var(--ink-2)}
.stats dd{margin:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;font-variant-numeric:tabular-nums}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.notes li{display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.45}
.notes li::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--ink-3)}
.notes li.bad::before{background:var(--red)}
.notes li.warn::before{background:var(--amber)}
.notes li.good::before{background:var(--green)}
.concepts,.formulas{display:flex;flex-direction:column;gap:10px}
.concepts h2{padding-top:8px}
.acc{border-top:1px solid var(--line)}
.concept{border-bottom:1px solid var(--line)}
.concept p{margin:0;padding:0 28px 16px 2px;max-width:78ch;color:var(--ink-2)}
.concept code,.formula-list code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;color:var(--ink);background:var(--paper-2);padding:1px 4px}
.concept summary,.ref summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.concept summary::-webkit-details-marker,.ref summary::-webkit-details-marker{display:none}
.concept summary{padding:13px 2px}
.concept summary h3{flex:1}
.concept summary:hover h3,.ref summary:hover h2{color:var(--red)}
.ref{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ref summary{padding:14px 2px}
.ref summary h2{flex:none}
.ref-sub{flex:1;font-size:13px;color:var(--ink-3)}
.ref .formula-list{padding:0 2px 18px}
.chev{flex:none;width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
details[open] > summary .chev,.el.pinned .chev{transform:rotate(-135deg) translate(-2px,-2px)}
@media (prefers-reduced-motion: no-preference){ .chip{transition:background .12s,border-color .12s} }
@media (prefers-reduced-motion: reduce){ .chev{transition:none} }
.formula-list{margin:0;display:grid;grid-template-columns:minmax(220px,0.8fr) minmax(0,1.6fr);gap:8px 18px;font-size:13.5px}
.formula-list dt{color:var(--ink-2)}
.formula-list dd{margin:0;color:var(--ink)}
.formula-list code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;background:var(--paper-2);padding:1px 4px;white-space:nowrap}
@media (max-width:640px){ .formula-list{grid-template-columns:1fr} .formula-list dd{margin-bottom:6px} .formula-list code{white-space:normal} }

/* large screens: wider page, roomier columns, taller sheet */
@media (min-width:1600px){
  .stage{grid-template-columns:280px minmax(0,1fr) 340px;gap:22px}
  .canvas-wrap{height:clamp(400px,calc(100vh - 32px),900px)}
}
@media (min-width:2200px){
  .stage{grid-template-columns:300px minmax(0,1fr) 360px;gap:26px}
  .canvas-wrap{height:clamp(400px,calc(100vh - 32px),1080px)}
}
/* tablet: sheet on the left (stays pinned), controls then element cards on the right.
   Sticky is bounded by the whole grid, so nothing may sit below the sheet in its column. */
@media (max-width:1180px){
  .stage{grid-template-columns:minmax(0,1fr) 290px}
  .canvas-wrap{grid-column:1;grid-row:1 / span 2}
  .controls{grid-column:2;grid-row:1}
  .elements{grid-column:2;grid-row:2}
}
@media (max-width:1180px) and (orientation:portrait){
  .canvas-wrap{height:clamp(380px,62vh,680px)}
}
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr) 260px;gap:14px}
  .controls{padding:14px}
}
/* phone: one column, sheet first, nothing pinned */
@media (max-width:760px){
  .stage{grid-template-columns:1fr}
  .canvas-wrap,.controls,.elements{grid-column:1;grid-row:auto}
  .canvas-wrap{order:-2;position:relative;top:auto;height:clamp(360px,62vh,600px)}
  .controls{order:-1}
  .reading{grid-template-columns:1fr}
  .ref-sub{display:none}
}
@media (max-width:480px){
  .toggles{grid-template-columns:1fr}
  h1{font-size:24px}
}
/* keep the legend clear of the zoom bar on narrow sheets */
@container (max-width:600px){ .legend{bottom:54px} }
@container (max-width:380px){ .legend{display:none} }
.tabs{display:flex;flex-direction:column;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--paper)}
.seg button{appearance:none;border:0;background:none;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:500;padding:5px 8px;cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.pane{display:flex;flex-direction:column;gap:10px}
.pane > p.hint{margin:0;font-size:12px;color:var(--ink-3);line-height:1.4}