/* /how-it-works/ story. Everything is scoped under .story so the labs stylesheet is untouched.
   Readability floor: body 16px desktop and 15px phone, labels over a scene 12.5px or more on a dark chip,
   text contrast 4.5:1 or better. .hw-js (set by main.js) turns on the sticky stages and the dock; without it
   the page is a plain document with every figure and every variant visible. */
.story{--bg:#0b1317;--bg2:#0f1b20;--bg3:#14252b;--line:rgba(244,226,162,.14);--txt:#e8f1f2;--txt2:#c6d6da;--txt3:#a3bec4;--teal:#2fd3c4;--gold:#e6b850;--lilac:#b9a4f8;--sky:#7fb4ff;--index-h:52px;--dock-h:68px;background:var(--bg);color:var(--txt);min-height:calc(100dvh - 64px)}
.story .hw{position:relative;padding-bottom:calc(var(--dock-h) + 40px)}.story .hw a{color:inherit}
.story .hw .cite,.story .hw .hw-inlink{color:#8fe6dc;text-decoration:underline;text-decoration-color:rgba(47,211,196,.45);text-underline-offset:2px}
/* Focus and in-page jumps clear the fixed index (52 px) and dock (68 px) by 12 px; html cannot read the .story tokens. */
.story .hw :focus-visible{outline:3px solid var(--teal);outline-offset:3px}:root:has(.story .hw-js){scroll-padding:64px 0 80px}

/* Hero */
.story .hw-hero{max-width:1180px;margin:0 auto;padding:52px 32px 44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);gap:24px 48px;align-items:center}
.story .hw-art{width:100%;height:auto;max-height:440px}
.story .hh-plate{fill:#b98a3a;stroke:#f0cf86}.story .hh-rod{stroke:rgba(230,184,80,.4);stroke-width:2.5}.story .hh-line{fill:none;stroke-width:2.5}.story .hh-drive{stroke:var(--gold)}.story .hh-read{stroke:var(--teal);opacity:.7}
.story .hh-chip{fill:#10262a;stroke:var(--teal);stroke-width:1.5}.story .hh-q{fill:var(--teal)}.story .hh-link{stroke:var(--lilac);stroke-width:3;stroke-dasharray:4 4}
.story .hh-pulse circle{fill:var(--gold)}.story .hh-pulse .hh-halo{fill:rgba(230,184,80,.3)}.story .hh-pulse{opacity:0}
.story .hh-q,.story .hh-plate{transform-box:fill-box;transform-origin:center}.story .hw-hero .visual-brand{display:inline-flex;margin-bottom:22px}
.story .hw-hero .visual-brand svg{height:22px;width:auto}.story .hw-hero .eyebrow{color:var(--teal);font-size:12.5px}
.story .hw-hero h1{font:500 clamp(34px,4.4vw,60px)/1.04 var(--brand-serif);margin:12px 0 16px;letter-spacing:-.02em;max-width:18ch}
.story .hw-intro{font:19px/1.55 var(--brand-sans);color:var(--txt2);max-width:60ch;margin:0 0 14px}.story .hw-how{font:16px/1.55 var(--brand-sans);color:var(--txt3);max-width:60ch;margin:0}
.story .hw-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.story .hw-level{display:none}.story .hw-js .hw-level{display:inline-flex}
.story .hw-level>button{font-size:15px;padding:9px 14px;color:var(--txt)}
/* Without JavaScript the level tabs cannot work, so every level's text is shown. */
.story .hw:not(.hw-js) .min-tech,.story .hw:not(.hw-js) .only-res{display:block!important}
.story .hw-start{display:none;gap:10px;align-items:center;padding:12px 20px;font:600 16px var(--brand-serif);color:#04201d;background:var(--teal);border:1px solid var(--teal);border-radius:8px;cursor:pointer}
.story .hw-js .hw-start{display:inline-flex}.story .hw-start .ico{width:12px;height:12px;fill:currentColor}
.story .hw-start:hover{filter:brightness(1.08)}

/* Chapter index: sticky under the site nav, scrolls sideways on phones */
.story .hw-index{position:sticky;top:0;z-index:30;height:var(--index-h);display:flex;align-items:center;background:rgba(11,19,23,.94);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.story .hw-index ol{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0 16px;overflow-x:auto;scrollbar-width:none;max-width:100%;box-sizing:border-box;scroll-snap-type:x proximity;scroll-padding:0 24px}
.story .hw-index li,.story .ly-tabs>button{scroll-snap-align:start}
.story .edge-r{mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}.story .edge-l{mask-image:linear-gradient(90deg,transparent,#000 36px)}.story .edge-l.edge-r{mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.story .hw-index a{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:6px;font:500 14.5px var(--brand-serif);color:var(--txt2);text-decoration:none;white-space:nowrap}
.story .hw-index a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.story .hw-index a[aria-current]{color:var(--txt);background:rgba(244,226,162,.16);box-shadow:inset 0 0 0 1px var(--glow-a)}
.story .hw-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:12.5px/1 var(--brand-mono);border:1px solid rgba(47,211,196,.55);color:#8fe6dc}
.story .hw-index a.done .hw-n{background:rgba(47,211,196,.2)}

/* Chapters: sticky stage on the left, steps on the right; on phones the stage sticks on top */
.story .hw-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);grid-template-areas:"stage head" "stage steps";border-top:1px solid var(--line)}
.story .hw-head{grid-area:head;padding:60px 36px 10px}
.story .hw-ch-n{margin:0;font:12.5px var(--brand-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.story .hw-head h2{font:500 clamp(28px,2.6vw,38px)/1.1 var(--brand-serif);margin:8px 0 10px}.story .hw-head h2:focus{outline:none}
.story .hw-ch{scroll-margin-top:calc(var(--index-h) + 12px)}.story .hw-lede{font:17px/1.55 var(--brand-sans);color:var(--txt2);margin:0}
.story .hw-stage{grid-area:stage;align-self:start;position:relative;background:radial-gradient(90% 70% at 40% 45%,#11232a 0,#0b1317 70%);border-right:1px solid var(--line)}
.story .hw-canvas{box-sizing:border-box;padding:24px 28px;container-type:inline-size}
.story .hw-js .hw-stage{position:sticky;top:var(--index-h);height:calc(100dvh - var(--index-h) - var(--dock-h) - 12px)}
.story .hw-js .hw-canvas{height:100%;container-type:size;overflow:hidden}.story .hw-steps{grid-area:steps;padding:6px 36px 40px}
.story .hw-step{padding:18px 0}.story .hw-js .hw-step{min-height:86vh;padding:9vh 0 0}
.story .hw-js .hw-step:first-child{padding-top:3vh}.story .hw-js .hw-steps>.hw-step:last-child{min-height:calc(100dvh - var(--dock-h))}
.story .hw-js::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--dock-h) + 44px);background:linear-gradient(rgba(11,19,23,0),#0b1317 62%);pointer-events:none;z-index:35}
/* Every card but the active one waits dimmed, in this chapter and in the others, so the bright card is always the
   step the stage shows. 75% keeps every text colour on a card, the lilac status label included, at 4.5:1 or better. */
.story .hw-js .hw-step:not(.is-active) .hw-card{opacity:.75}.story .hw-js .hw-step .hw-card{transition:opacity .45s,border-color .4s,box-shadow .4s}
.story .hw-card{position:relative;padding:20px 24px 22px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);border-left:3px solid rgba(47,211,196,.35);transition:border-color .4s,box-shadow .4s}
/* A card never runs under the dock: beside a stage it is at most as tall as the room between the index and the dock with
   the 12 px margins scrollToBeat keeps; a longer card scrolls inside itself, with a fade and the cue (engine.js data-more). */
@media (min-width:861px){.story .hw-js .hw-ch:not(.hw-ch-text) .hw-card{display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100dvh - var(--index-h) - var(--dock-h) - 28px)}.story .hw-js .hw-ch:not(.hw-ch-text) .hw-card-in{min-height:0;overflow-y:auto;margin:0 -14px 0 -6px;padding:0 14px 6px 6px;scrollbar-width:thin;scrollbar-color:rgba(47,211,196,.55) transparent;scroll-padding:6px 0 30px}}
.story .hw-card[data-more] .hw-card-in{-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),rgba(0,0,0,.12));mask-image:linear-gradient(#000 calc(100% - 30px),rgba(0,0,0,.12))}.story .hw-more{display:none}.story .hw-js .hw-more{display:flex;position:absolute;left:24px;right:24px;bottom:2px;height:18px;margin:0;align-items:center;justify-content:center;gap:6px;font:12.5px/18px var(--brand-mono);color:#8fe6dc;opacity:0;pointer-events:none;transition:opacity .3s}
.story .hw-more .ico{width:12px;height:12px}.story .hw-js .hw-card-in :focus-visible{outline-offset:1px}.story .hw-card[data-more] .hw-more{opacity:1;pointer-events:auto;cursor:pointer}
.story .hw-step.is-active .hw-card{border-color:rgba(244,226,162,.32);border-left-color:var(--teal);box-shadow:0 0 0 1px rgba(47,211,196,.12),0 12px 40px rgba(0,0,0,.35)}
.story .hw-step-n{margin:0;font:12.5px var(--brand-mono);color:var(--txt3)}.story .hw-card h3{font:600 23px/1.2 var(--brand-serif);margin:4px 0 10px;color:var(--txt)}
.story .hw-body,.story .hw-tech{font:16px/1.62 var(--brand-sans);color:var(--txt2);margin:0 0 10px}.story .hw-tech{font-size:15px;color:var(--txt3);border-top:1px solid var(--line);padding-top:10px}
.story .hw-tex{overflow-x:auto;color:var(--txt);font-size:15px;margin:6px 0 4px}
.story .hw-tex .katex-display{margin:6px 0}
.story .hw-status{font:15px/1.5 var(--brand-sans);color:var(--txt2);margin:10px 0 0;padding:8px 12px;border-radius:6px;background:rgba(47,211,196,.07);border:1px solid rgba(47,211,196,.22)}
.story .hw-status b{color:#8fe6dc;font-weight:600}
.story .hw-step[data-tab=topo] .hw-status{background:rgba(185,164,248,.08);border-color:rgba(185,164,248,.3)}
.story .hw-step[data-tab=topo] .hw-status b{color:var(--lilac)}
.story .hw-labs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.story .hw-lablink{display:inline-flex;gap:6px;padding:8px 12px;border-radius:6px;font:500 15px var(--brand-serif);text-decoration:none;background:rgba(244,226,162,.1);box-shadow:inset 0 0 0 1px var(--glow-a)}
.story .hw-lablink:hover{background:rgba(244,226,162,.2)}
.story .hw-ch-text{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "steps";max-width:900px;margin:0 auto;border-top:0}
.story .hw-ch-text .hw-head{padding:70px 24px 10px}.story .hw-ch-text .hw-steps{padding:6px 24px 40px}
.story .hw-js .hw-ch-text .hw-step{min-height:0;padding-top:20px}
.story .hw-sources h4{font:600 18px var(--brand-serif);margin:22px 0 8px;color:var(--txt)}
.story .hw-list,.story .hw-srclist{margin:0;padding-left:22px;font:15px/1.55 var(--brand-sans);color:var(--txt2)}
.story .hw-list li,.story .hw-srclist li{margin:6px 0}
.story .hw-list{list-style:none;padding-left:0}.story .hw-list li{padding-left:12px;border-left:2px solid rgba(47,211,196,.45)}
.story .hw-srclist a{color:var(--txt);text-decoration-color:rgba(47,211,196,.5)}
.story .hw-srclist small{display:block;font:15px/1.5 var(--brand-sans);color:var(--txt3)}
.story .hw-srclist li:target{background:rgba(230,184,80,.12);border-radius:6px}
.story .hw-words{display:grid;gap:6px;margin:0;font:15px/1.5 var(--brand-sans)}
.story .hw-words div{display:flex;gap:8px}.story .hw-words dt{font-weight:600;color:var(--txt);min-width:9.5em}.story .hw-words dd{margin:0;color:var(--txt2)}
.story .hw-credit{font:15px/1.5 var(--brand-sans);color:var(--txt3);margin-top:18px}

/* Dock: transport, where we are, progress and the reading-hold timer */
.story .hw-dock{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:40;display:none;align-items:center;gap:14px;box-sizing:border-box;width:min(1000px,calc(100% - 24px));height:calc(var(--dock-h) - 8px);padding:6px 14px 8px 8px;background:rgba(9,16,19,.95);border:1px solid var(--glow-a);border-radius:8px;box-shadow:0 0 18px var(--glow-b),0 14px 40px rgba(0,0,0,.5)}
.story .hw-js .hw-dock{display:flex}
.story .hw-transport{flex:none}.story .hw-transport>button{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--brand-serif);padding:9px 13px;color:var(--txt);min-height:40px}.story .hw-transport .ico{width:12px;height:12px;fill:currentColor;flex:none}
.story #hw-play{width:7.4em;justify-content:center}.story #hw-play .ico-pause,.story #hw-play[data-state=running] .ico-play{display:none}
.story #hw-play[data-state=running] .ico-pause{display:block}.story #hw-play[data-state=running]{box-shadow:inset 0 0 0 1px var(--teal)}
.story .hw-transport>button:disabled{opacity:.45;cursor:default}
.story .hw-where{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:1px}
.story .hw-where-ch{font:600 15px/1.3 var(--brand-serif);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story .hw-where-step{font:13.5px/1.3 var(--brand-sans);color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story .hw-cue{display:none;flex:0 1 250px;min-width:0;margin:0;flex-direction:column;gap:1px;padding-left:14px;border-left:1px solid var(--line)}.story .hw-cue span{font:12.5px/1.3 var(--brand-mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.08em}.story .hw-cue b{font:500 14px/1.3 var(--brand-serif);color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1100px){.story .hw-cue{display:flex}}
.story .hw-progress{position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}.story .hw-progress i{position:absolute;left:0;right:0;top:0;bottom:0;transform-origin:0 50%;transform:scaleX(0)}
.story .hw-progress-all{background:var(--teal)}.story .hw-progress .hw-progress-hold{top:auto;height:1px;background:var(--gold)}

/* Figures with fixed-size labels: the drawing scales, the labels keep their size on a dark chip */
.story .fig{position:relative;width:100%;max-width:720px;aspect-ratio:var(--ar);margin:0 auto}
.story .hw-js .fig{width:min(100cqw,calc(100cqh * var(--ar)));max-width:none}
.story .fig>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.story .fig-label{position:absolute;translate:0 -50%;max-width:37%;box-sizing:border-box;padding:4px 8px 5px;border-radius:6px;background:rgba(9,16,19,.88);box-shadow:0 0 0 1px rgba(244,226,162,.16);font:13px/1.3 var(--brand-sans);color:var(--txt2)}
.story .fig-label b{display:block;font:600 14px/1.25 var(--brand-serif);color:var(--txt)}
.story .fig-label span{display:block}
.story .fig-tag{position:absolute;left:var(--x);translate:0 -50%;padding:2px 7px;border-radius:5px;background:rgba(9,16,19,.88);font:12.5px var(--brand-mono);letter-spacing:.06em;color:var(--txt3)}

/* Chapter 1: an exploded isometric stack. Each slab is a block with left, top and front faces cut by clip-path from
   the geometry in --w, --t, --dx, --dy, --sl and --g (fitted by stack.js; the values here are the no-JavaScript
   defaults). Rows sit at their exploded places; stack.js moves them together and apart. Names stay flat. */
.story .st{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,1fr);gap:24px 28px;align-items:start}.story .hw-js .st{align-items:center}
.story .hw-js .st{height:100%}
.story .st-fig{display:grid;place-items:center;min-width:0}.story .hw-js .st-fig{align-self:stretch}/* in the flow: never sticky over text */
.story .st-stackwrap{--w:300px;--t:48px;--dx:60px;--dy:34px;--sl:24px;--g:18px;--qx:104px;position:relative;width:calc(var(--dx) + var(--w) + var(--qx));height:calc(var(--dy) + var(--sl) + 7 * var(--t) + 6 * var(--g))}
.story .st-stack{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.story .st-row{position:absolute;left:0;top:calc(var(--i) * (var(--t) + var(--g)));width:calc(var(--dx) + var(--w));height:calc(var(--dy) + var(--sl) + var(--t));z-index:calc(20 - var(--i));pointer-events:none}
.story .st-block{--bw:var(--w);--bs:var(--sl);position:absolute;left:0;top:0;width:calc(var(--dx) + var(--bw));height:calc(var(--dy) + var(--bs) + var(--t));margin:0;padding:0;border:0;border-radius:0;background:none;color:#f4f8f8;font:500 15px/1.15 var(--brand-sans);pointer-events:none;transition:opacity .3s,filter .3s}
.story .st-cell{--bw:calc(var(--w) / 3 - 2px);--bs:calc(var(--sl) / 3);left:calc(var(--k) * var(--w) / 3);top:calc((2 - var(--k)) * var(--sl) / 3);z-index:calc(3 - var(--k))}
.story .sf{position:absolute;inset:0;pointer-events:auto}
.story .sf-top{background:linear-gradient(100deg,color-mix(in srgb,var(--c) 52%,#0d181d),color-mix(in srgb,var(--c) 74%,#0d181d));clip-path:polygon(var(--dx) calc(var(--dy) + var(--bs)),calc(var(--dx) + var(--bw)) var(--dy),var(--bw) 0,0 var(--bs))}
.story .sf-front{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 42%,#0d181d),color-mix(in srgb,var(--c) 24%,#0d181d));clip-path:polygon(var(--dx) calc(var(--dy) + var(--bs)),calc(var(--dx) + var(--bw)) var(--dy),calc(var(--dx) + var(--bw)) calc(var(--dy) + var(--t)),var(--dx) calc(var(--dy) + var(--bs) + var(--t)))}
.story .sf-left{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#081014),color-mix(in srgb,var(--c) 10%,#081014));clip-path:polygon(0 var(--bs),var(--dx) calc(var(--dy) + var(--bs)),var(--dx) calc(var(--dy) + var(--bs) + var(--t)),0 calc(var(--bs) + var(--t)))}
.story .st-name{position:absolute;left:var(--dx);top:calc(var(--dy) + var(--bs) / 2);width:var(--bw);height:var(--t);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px;box-sizing:border-box;pointer-events:auto;text-shadow:0 1px 3px #000}
.story .st-short{display:none}.story .st-xs .st-long{display:none}.story .st-xs .st-short{display:inline}
.story .st-sm .st-block,.story .st-sm .st-qec{font-size:13.5px}.story .st-xs .st-block,.story .st-xs .st-qec{font-size:13px;line-height:1.1}
.story button.st-layer{cursor:pointer}
.story .st-quantum .sf-front{background:linear-gradient(180deg,#17565a,#0b2a2d)}.story .st-quantum .sf-top{background:linear-gradient(100deg,#1b5f5e,#2a8a86)}
.story .st-qubits{position:absolute;left:calc(var(--dx) + var(--w) - 76px);top:calc(var(--dy) + var(--t) / 2 - 2px);display:flex;gap:7px;pointer-events:none;z-index:1}
.story .st-qubits i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.story .st-quantum .st-name{width:calc(var(--bw) - 70px)}
.story .st-layer.on{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 75%,transparent))}
.story .st-layer.on .sf-front{background:color-mix(in srgb,var(--c) 60%,#0d181d)}.story .st-layer.on .sf-top{background:color-mix(in srgb,var(--c) 88%,#0d181d)}
.story .st.has-on .st-layer:not(.on){opacity:.62}
.story button.st-block:hover .sf-front,.story button.st-block:focus-visible .sf-front{background:color-mix(in srgb,var(--c) 52%,#0d181d)}
.story .st-qec-row{position:absolute;left:calc(var(--dx) + var(--w) + 8px);top:calc(2 * (var(--t) + var(--g)) + var(--dy));width:calc(var(--qx) - 8px);height:calc(3 * var(--t) + 2 * var(--g));z-index:25}
.story .st-qec-bar{position:absolute;left:0;top:0;bottom:0;width:9px;border:2px solid var(--lilac);border-left:0;border-radius:0 6px 6px 0;box-sizing:border-box;background:rgba(185,164,248,.14)}
.story .st-qec{position:absolute;left:15px;right:0;top:50%;transform:translateY(-50%);padding:5px 7px 6px;border-radius:6px;border:1px solid rgba(185,164,248,.6);background:rgba(9,16,19,.92);color:var(--txt);font:500 15px/1.2 var(--brand-sans);text-align:left;box-sizing:border-box}
.story .st-qec .st-name{position:static;display:block;padding:0;width:auto;height:auto;text-align:left}
.story .st-token{position:absolute;left:calc(var(--dx) / 2 - 9px);top:0;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(230,184,80,.22),0 0 22px var(--gold);opacity:0;z-index:40;pointer-events:none}
.story .st-token.up{background:var(--teal);box-shadow:0 0 0 5px rgba(47,211,196,.22),0 0 22px var(--teal)}
@container (max-width:760px){.story .hw:not(.hw-js) .st-stackwrap{--w:220px;--t:46px;--dx:44px;--dy:25px;--sl:18px;--g:16px;--qx:88px}.story .hw:not(.hw-js) .st-block{font-size:13.5px}}
@container (max-width:620px){.story .hw:not(.hw-js) .st-stackwrap{--w:226px;--t:26px;--dx:45px;--dy:18px;--sl:11px;--g:8px}.story .hw:not(.hw-js) .st-long{display:none}.story .hw:not(.hw-js) .st-short{display:inline}.story .hw:not(.hw-js) .st-block{font-size:13px}}
.story .st-panel{position:relative;display:grid;align-items:center;min-height:0}
.story .hw-js .st-panel{height:100%}
.story .st-rep{padding:6px 0;margin-bottom:22px}
.story .hw-js .st-rep{grid-area:1/1;margin:0;opacity:0;visibility:hidden}
.story .hw-js .st-rep.on{opacity:1;visibility:visible}
.story .st-kicker{margin:0 0 8px;font:12.5px var(--brand-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.story .st-big{font:500 clamp(24px,3.6cqw,34px)/1.2 var(--brand-serif);margin:0 0 12px}
.story .st-big em{color:var(--teal);font-style:italic}
.story .st-hint,.story .st-note{font:15px/1.5 var(--brand-sans);color:var(--txt3);margin:8px 0}
.story .st-goal{font:500 19px/1.35 var(--brand-serif);margin:0 0 12px}
.story .st-code{margin:0;padding:14px 16px;border-radius:8px;background:#081013;border:1px solid var(--line);font:14.5px/1.6 var(--brand-mono);color:#d5e4e7;white-space:pre;overflow-x:auto}
.story .st-code .k{color:#9cc8ff}.story .st-code .g{color:var(--gold);font-weight:600}.story .st-code .s{color:#b6e3a8}
.story .st-arrow{margin:8px 0;font:13px var(--brand-mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.12em}
.story .mc{margin:0}
.story .mc figcaption{font:600 15px var(--brand-serif);margin:0 0 6px;color:var(--txt2)}
.story .mc-grid{display:grid;grid-template-columns:30px repeat(var(--cols),38px);grid-auto-rows:42px;align-items:center}
.story .mc-q{font:13px var(--brand-mono);color:var(--txt3)}
.story .mc-cell{position:relative;height:100%;display:grid;place-items:center;background:linear-gradient(transparent calc(50% - 1px),rgba(198,214,218,.45) calc(50% - 1px),rgba(198,214,218,.45) calc(50% + 1px),transparent calc(50% + 1px))}
.story .mc-gate{position:relative;z-index:1;display:grid;place-items:center;min-width:32px;height:30px;padding:0 3px;box-sizing:border-box;border-radius:5px;background:#16303a;border:1px solid var(--sky);font:600 13px var(--brand-sans);color:#eaf4ff}
.story .mc-h{border-color:var(--gold);background:#2a2614;color:#fff3d1}
.story .mc-sx{border-color:var(--teal);background:#0f2c2d}
.story .mc-dot{width:12px;height:12px;border-radius:50%;background:#e8f1f2;z-index:1}
.story .mc-link::after{content:"";position:absolute;left:calc(50% - 1px);top:50%;width:2px;height:42px;background:#e8f1f2}
.story .mc-plus{width:24px;height:24px;border-radius:50%;border:2px solid #e8f1f2;background:linear-gradient(#e8f1f2,#e8f1f2) center/2px 100% no-repeat,linear-gradient(#e8f1f2,#e8f1f2) center/100% 2px no-repeat,var(--bg);box-sizing:border-box;z-index:1}
.story .st-times{width:100%;border-collapse:collapse;font:14px/1.4 var(--brand-mono);color:var(--txt2);margin:0 0 10px}
.story .st-times th{font:600 13px var(--brand-sans);color:var(--txt3);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.story .st-times td{padding:4px 6px;border-bottom:1px solid rgba(244,226,162,.07)}
.story .ln,.story .st-wave,.story .st-chip{display:block;width:100%;max-width:520px;height:auto}
.story .ln-label{font:16px var(--brand-sans);fill:var(--txt3)}.story .ln-tick{font:15.5px var(--brand-mono);fill:var(--txt3);text-anchor:middle}.story .ln-unit{text-anchor:end}
.story .ln-base{stroke:rgba(198,214,218,.25)}
.story .ln-pulse{fill:none;stroke-width:2.4;stroke-linejoin:round}
.story .ln-q0,.story .ln-q1{stroke:var(--gold);fill:rgba(230,184,80,.16)}.story .ln-flux{stroke:var(--lilac);fill:rgba(185,164,248,.14)}.story .ln-ro{stroke:var(--teal);fill:rgba(47,211,196,.14)}
.story .ln-rz{fill:var(--sky)}
.story .st-env{fill:none;stroke:rgba(230,184,80,.55);stroke-width:1.5;stroke-dasharray:4 4}
.story .st-carrier{fill:none;stroke:var(--gold);stroke-width:2.2}
.story .st-dim{stroke:var(--txt3);fill:none}.story .st-dimtext{font:17px var(--brand-mono);fill:var(--txt2);text-anchor:middle}
.story .st-die{fill:#0e1d22;stroke:rgba(47,211,196,.4)}
.story .st-feed{stroke:var(--gold);stroke-width:2;fill:none}
.story .st-xmon path{stroke:var(--teal);stroke-width:7;stroke-linecap:round}
.story .st-xmon{transform-box:fill-box;transform-origin:center}
.story .st-bond{stroke:var(--lilac);stroke-width:3;stroke-dasharray:3 3;opacity:.4}
.story .st-dotpulse{fill:var(--gold)}
.story .st-chiplabel{font:17px var(--brand-mono);fill:var(--txt2);text-anchor:middle}
.story .st-up{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.story .st-up li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.035);border-left:3px solid var(--teal);font:15px/1.4 var(--brand-sans);color:var(--txt2)}
.story .st-up b{font:600 15px var(--brand-serif);color:var(--txt)}
.story .st-hist{display:flex;gap:10px;align-items:flex-end;height:92px}
.story .st-hb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:44px;gap:2px}
.story .st-hb i{display:block;width:26px;background:linear-gradient(var(--teal),#1a8f86);border-radius:3px 3px 0 0;min-height:1px}
.story .st-hb em{font:13px var(--brand-mono);font-style:normal;color:var(--txt2)}.story .st-hb small{font:12.5px var(--brand-mono);color:var(--txt3)}
.story .st-card{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5;padding:18px 20px;border-radius:8px;background:#0d1a1f;border:1px solid var(--glow-a);box-shadow:0 0 18px var(--glow-b),0 14px 40px rgba(0,0,0,.5)}
.story .st-card-title{margin:0 0 6px;font:600 20px var(--brand-serif);color:var(--txt)}
.story .st-card-text{margin:0;font:16px/1.55 var(--brand-sans);color:var(--txt2)}
.story .hw-js .st.card-open .st-rep.on{visibility:hidden}
.story .st-guide{grid-column:1 / -1;margin:8px 0 0;display:grid;gap:8px;font:15px/1.5 var(--brand-sans)}
.story .st-guide dt{font-weight:600;color:var(--txt)}.story .st-guide dd{margin:0;color:var(--txt2)}
.story .hw-js .st-guide{display:none}

/* Chapter 2: the refrigerator */
.story .fr{display:grid;place-items:center}
.story .hw-js .fr{height:100%}
.story .fr-box{fill:#122228;stroke:rgba(230,184,80,.5)}.story .fr-elec{background:none;box-shadow:none;padding:0}
.story .hw-card sup,.story .hw-card sub{font-size:.9em;line-height:0}
.story .fig-label sup,.story .hw-srclist sup,.story .hw-srclist sub{font-size:max(.85em,12.5px);line-height:0}
.story .fr-plate{fill:url(#fr-top);stroke:#f6dc9c;stroke-width:1}.story .fr-rim{fill:url(#fr-gold)}
.story .fr-rod{stroke:#9c7632;stroke-width:4;stroke-linecap:round}
.story .fr-wall{fill:url(#fr-wallg)}.story .fr-floor{fill:rgba(127,180,255,.07);stroke:rgba(182,214,224,.4)}.story .fr-cut{fill:none;stroke:rgba(198,224,232,.62);stroke-width:1.8}
.story .fr-ovc .fr-wall{fill:rgba(198,214,218,.05)}.story .fr-ovc .fr-cut{stroke:rgba(198,214,218,.4);stroke-width:2.4}
.story .fr-real{box-shadow:0 0 0 1px rgba(47,211,196,.4)}
.story .fr-line{fill:none;stroke-width:2.6;stroke-linecap:round}
.story .fr-drive{stroke:var(--gold)}.story .fr-read{stroke:var(--teal)}
.story .fr-att rect{fill:#2a2512;stroke:var(--gold);stroke-width:1.5}.story .fr-att path{fill:none;stroke:var(--gold);stroke-width:1.5}
.story .fr-amp rect,.story .fr-amp circle,.story .fr-amp path{fill:#0f2a2b;stroke:var(--teal);stroke-width:1.6}
.story .fr-amp .fr-twpa{fill:#16403f}
.story .fr-chip{fill:#10262a;stroke:var(--teal);stroke-width:1.6}.story .fr-q{fill:var(--teal)}
.story .fr-pulse circle{fill:var(--gold)}.story .fr-pulse .fr-halo{fill:rgba(230,184,80,.28)}
.story .fr-pr circle{fill:var(--teal)}.story .fr-pr .fr-halo{fill:rgba(47,211,196,.28)}
.story .fr-pulse{opacity:0}
.story .fr-temp{max-width:24%}.story .fig-label .fr-long{display:inline}.story .fig-label .fr-short{display:none}
.story .fr-lead{fill:none;stroke:rgba(232,241,242,.45);stroke-width:1.2;stroke-dasharray:3 3}.story .fr-dots{stroke:rgba(230,184,80,.4)}.story .fr-temp span,.story .fr-heat span{color:var(--txt3)}
.story .fr-heat b{font:600 15px var(--brand-mono)}
.story .fr-attl b{color:#f3dda0}
.story .fr-ampl,.story .fr-attl,.story .fr-heat{max-width:33%}
.story .fig .fr-heat{display:none}.story .hw-js .fig .fr-heat{display:block}

/* Chapter 3: qubit cross-sections */
.story .ly{display:flex;flex-direction:column;gap:10px}
.story .hw-js .ly{height:100%}
.story .ly-tabs{display:none;align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
.story .hw-js .ly-tabs{display:inline-flex}
.story .ly-tabs>button{color:var(--txt);font-size:14.5px}
.story .ly-tabs>[aria-selected=true]{background:rgba(244,226,162,.22);box-shadow:inset 0 0 0 1px var(--glow-a)}
.story .ly-note{margin:0;font:13.5px var(--brand-sans);color:var(--txt3);flex:none}
.story .ly-figs{position:relative}
.story .hw-js .ly-figs{flex:1;min-height:0;container-type:size}
.story .ly-fig{margin:0 0 26px}
.story .ly-cap{font:600 18px var(--brand-serif);margin:0 0 8px}
.story .hw-js .ly-fig{position:absolute;inset:0;margin:0;display:grid;place-items:center;visibility:hidden}
.story .hw-js .ly-fig.on{visibility:visible}
.story .hw-js .ly-cap{display:none}
.story .fig-c{translate:-50% -50%}
.story .ly-box{--ar:1.35}.story .xb-hi{fill:rgba(255,255,255,.2)}.story .xb-lo{fill:rgba(0,0,0,.42)}
.story .ly-badge{display:none;position:absolute;left:var(--xm);translate:-50% -50%;width:22px;height:22px;border-radius:50%;place-items:center;background:#0b1317;border:1.5px solid var(--gold);font:600 12.5px/1 var(--brand-mono);color:var(--txt)}
.story .ly-legend{display:none;margin:10px 0 0;padding-left:24px;font:15px/1.45 var(--brand-sans);color:var(--txt2)}
.story .ly-legend li{margin:3px 0}.story .ly-legend li::marker{font:600 13px var(--brand-mono);color:var(--gold)}.story .ly-legend b{color:var(--txt)}
.story .m-oxide{fill:rgba(255,255,255,.1)}
.story .ly-lead{fill:none;stroke:rgba(232,241,242,.55);stroke-width:1.2;vector-effect:non-scaling-stroke}.story .ly-anchor{fill:#e8f1f2}
.story .ly-zoom{fill:none;stroke:rgba(244,226,162,.6);stroke-width:1.5}.story .ly-zoomline{fill:none;stroke:rgba(244,226,162,.45);stroke-dasharray:3 3}
.story .ly-dim{fill:none;stroke:#e8f1f2;stroke-width:1.2}
.story .m-sub{fill:#26404d}.story .m-film{fill:#b8c4d6}.story .m-al{fill:#d9e1ea}.story .m-ox{fill:var(--gold)}.story .m-res{fill:#8fe6dc}.story .m-reswave{fill:none;stroke:var(--teal);stroke-width:2}
.story .m-sige{fill:#2b4250}.story .m-well{fill:#1d8f86}.story .m-spacer{fill:#36505e}.story .m-gate1{fill:#a8873e}.story .m-gate2{fill:#c9a24f}.story .m-gate3{fill:#e6c26d}.story .m-magnet{fill:#7d73a8}
.story .m-electron{fill:var(--teal)}.story .m-spinarrow{fill:none;stroke:#e8f1f2;stroke-width:2}
.story .m-chipsub{fill:#25343c}.story .m-gold{fill:#d4a94a}.story .m-rf{fill:#e8c56c}.story .m-field{fill:none;stroke:rgba(47,211,196,.55);stroke-width:1.4;stroke-dasharray:4 4}
.story .m-ion{fill:var(--teal)}.story .m-ionglow{fill:rgba(47,211,196,.22)}.story .m-laser{fill:none;stroke:#ff9d7a;stroke-width:2.4;opacity:.85}
.story .m-cell{fill:rgba(127,180,255,.05);stroke:rgba(182,214,224,.5);stroke-width:1.5}.story .m-objective{fill:#1b2c33;stroke:#6c8a94}.story .m-lens{fill:#2d4a55;stroke:#9ccad4}
.story .m-tweezer{fill:rgba(230,184,80,.2);stroke:rgba(230,184,80,.5);stroke-width:.8}.story .m-atom{fill:var(--teal)}
.story .m-rydberg{fill:rgba(185,164,248,.22)}.story .m-rydring{fill:none;stroke:var(--lilac);stroke-width:1.6;stroke-dasharray:3 3}
.story .m-guide{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;opacity:.8}.story .m-split{fill:none;stroke:rgba(244,226,162,.6);stroke-dasharray:4 3}
.story .m-det rect{fill:#2a2440;stroke:var(--lilac)}.story .m-det path{fill:none;stroke:var(--lilac);stroke-width:1.4}.story .m-det.click rect{fill:#6a58b8}
.story .m-photon circle{fill:#fff4c9}.story .m-photon .m-photonglow{fill:rgba(255,236,170,.35)}
.story .m-photon{opacity:0}
.story .m-si{fill:#2b3640}.story .m-clad{fill:rgba(185,164,248,.1);stroke:rgba(185,164,248,.35)}.story .m-core{fill:var(--teal)}.story .m-nbn{fill:var(--lilac)}
.story .m-inp{fill:#2a3a44}.story .m-barrier{fill:#3c5664}.story .m-strip{fill:#d9e1ea}.story .m-diel{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.2)}.story .m-wire1d{fill:#5ff0e2;opacity:.85}
.story .m-trivial{fill:rgba(217,225,234,.45)}.story .m-mzm{fill:var(--lilac)}.story .m-mzmglow{fill:rgba(185,164,248,.3)}

/* Chapters 4 to 8: qubit components */
.story .qb,.story .sb{display:grid;gap:16px 26px;align-items:center;justify-items:center}
.story .hw-js .qb,.story .hw-js .sb{height:100%;align-content:safe center}
.story .qb-create,.story .qb-super{grid-template-columns:minmax(0,1fr) auto;justify-content:center;column-gap:min(6cqw,48px)}
.story .qb-create .am,.story .qb-super .am,.story .qb-super .pz{grid-column:1 / -1}
.story .qb-create .lv,.story .qb-super .lv{justify-self:end}
.story .qb-ent,.story .sb{grid-template-columns:auto auto;grid-template-rows:auto auto auto;justify-content:center;column-gap:min(10cqw,90px)}
.story .qb-ent .qb-side,.story .sb .qb-side{grid-column:1 / -1;max-width:520px}
/* Chapters 4 and 5: levels beside the Bloch sphere, amplitudes below, the pulse on top; the sphere takes the height left. */
.story .hw-js .qb{--bl:clamp(150px,min(44cqh,40cqw),340px)}.story .hw-js .qb-create,.story .hw-js .qb-super{grid-template-columns:minmax(0,260px) var(--bl)}.story .hw-js .qb-super .pz{max-width:min(560px,calc(20cqh * 400 / 150))}
.story .hw-js .qb-create{--bl:clamp(150px,min(calc(100cqh - 206px),calc(100cqw - 232px)),440px)}.story .hw-js .qb-super{--bl:clamp(130px,min(calc(80cqh - 267px),calc(100cqw - 232px)),400px)}
.story .hw-js .qb-ent{--bl:clamp(120px,min(28cqh,30cqw),240px)}.story .hw-js .sb{--bl:clamp(110px,min(23cqh,28cqw),220px)}
.story .qb-circ,.story .sb-circ{grid-column:1 / -1;width:100%;max-width:640px;box-sizing:border-box}
.story .qb-side{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}
.story .bl{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.story .bl-title,.story .lv-title,.story .pz-title,.story .rs-title{font:600 15px var(--brand-serif);color:var(--txt2);margin:0 0 4px}
.story .bl-box{display:flex;flex-direction:column;align-items:center}
.story .bl-svg{width:var(--bl,200px);height:var(--bl,200px);overflow:visible}
.story .hw-js .qb .am,.story .hw-js .qb .lv{font-size:15px}
.story .bl-pole{font:15px var(--brand-serif);color:var(--txt2);line-height:1.2}
.story .bl-ball{fill:#10232a;stroke:rgba(198,214,218,.5);stroke-width:1.2}
.story .bl-back{fill:none;stroke:rgba(198,214,218,.22);stroke-width:1;stroke-dasharray:3 4}
.story .bl-front{fill:none;stroke:rgba(198,214,218,.5);stroke-width:1.1}
.story .bl-axis{stroke:rgba(198,214,218,.35);stroke-dasharray:2 4}
.story .bl-drop{stroke:rgba(230,184,80,.5);stroke-dasharray:3 3}
.story .bl-shaft{stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.story .bl-tip{fill:var(--gold)}
.story .bl-center{fill:#e8f1f2}
.story .bl-len{font:13.5px var(--brand-mono);color:var(--txt3)}.story .bl-len b{color:var(--txt);font-weight:600}
.story .lv{margin:0;position:relative;width:100%;max-width:260px}
.story .lv-row{display:grid;grid-template-columns:2.4em minmax(0,1fr) 4.6em;align-items:center;gap:8px;height:44px}
.story .lv-ket{font:17px var(--brand-serif);color:var(--txt)}
.story .lv-line{position:relative;height:3px;background:#c6d6da;border-radius:2px}
.story .lv-dot{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal)}
.story .lv-p{font:14px var(--brand-mono);color:var(--txt2);text-align:right}
.story .lv-gap{height:58px;margin-left:3.1em;border-left:1px dashed rgba(198,214,218,.4);display:flex;align-items:center;padding-left:10px;font:13.5px var(--brand-sans);color:var(--txt3)}
.story .lv-photon{position:absolute;right:4%;top:44%;width:90px;height:24px;fill:none;stroke:var(--gold);stroke-width:2.2;opacity:0}
.story .am{width:100%;max-width:460px;display:grid;gap:4px}
.story .am-head,.story .am-row{display:grid;grid-template-columns:3.2em 30px 6.8em minmax(50px,1fr) 4.4em;gap:8px;align-items:center}
.story .am-head{font:12.5px var(--brand-mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.06em}
.story .am-head span:nth-child(2){grid-column:2 / 4}
.story .am-row{height:34px}
.story .am-ket{font:17px var(--brand-serif);color:var(--txt)}
.story .am-dial{width:30px;height:30px}
.story .am-ring{fill:none;stroke:rgba(198,214,218,.35)}.story .am-fill{fill:rgba(47,211,196,.5)}.story .am-hand{stroke:#e8f1f2;stroke-width:2;stroke-linecap:round}
.story .am-amp{font:14px var(--brand-mono);color:var(--txt2);white-space:nowrap}
.story .am-bar{height:12px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.story .am-bar i{display:block;height:100%;background:linear-gradient(90deg,#1a8f86,var(--teal))}
.story .am-p{font:14px var(--brand-mono);color:var(--txt);text-align:right}
.story .cm{display:grid;grid-template-columns:auto minmax(60px,1fr) 3.4em;gap:10px;align-items:center;font:15px var(--brand-serif);color:var(--txt2)}
.story .cm small{display:block;font:12.5px var(--brand-mono);color:var(--txt3)}
.story .cm-bar{height:12px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.story .cm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7b67c9,var(--lilac))}
.story .cm-v{font:600 15px var(--brand-mono);color:var(--txt);text-align:right}
.story .pz{margin:0;width:100%;max-width:560px}
.story .pz-svg{display:block;width:100%;height:auto}
.story .pz-env{fill:none;stroke:rgba(230,184,80,.5);stroke-width:1.5;stroke-dasharray:4 4}.story .pz-car{fill:none;stroke:var(--gold);stroke-width:2.2}
.story .pz-dim{fill:none;stroke:var(--txt3)}.story .pz-dimtext{font:18.5px var(--brand-mono);fill:var(--txt2);text-anchor:middle}
.story .pz-head{opacity:0}.story .pz-head line{stroke:#fff3d1;stroke-width:1.5;stroke-dasharray:3 3}.story .pz-head circle{fill:#fff3d1}
.story .pz-note{margin:2px 0 0;font:13.5px var(--brand-sans);color:var(--txt3);text-align:center}
.story .cq,.story .sb-svg{display:block;width:100%;height:auto;overflow:visible}
.story .cq-q{font:16.5px var(--brand-mono);fill:var(--txt3)}.story .cq-ket{font:16px var(--brand-serif);fill:var(--txt2)}
.story .cq-wire{stroke:rgba(198,214,218,.5);stroke-width:1.5}
.story .cq-box{fill:#2a2614;stroke:var(--gold);stroke-width:1.5}.story .cq-name{font:600 17px var(--brand-sans);fill:#fff3d1;text-anchor:middle}
.story .cq-link{stroke:#e8f1f2;stroke-width:2}.story .cq-ctrl{fill:#e8f1f2}.story .cq-tgt{fill:var(--bg);stroke:#e8f1f2;stroke-width:2}.story .cq-plus{stroke:#e8f1f2;stroke-width:2}
.story .cq-meter{fill:none;stroke:#fff3d1;stroke-width:1.6}
.story .cq-cursor{stroke:var(--gold);stroke-width:2.5}

/* Chapter 7: readout */
.story .ro{position:relative;display:grid}
.story .hw-js .ro{height:100%;grid-template-rows:auto auto;align-content:safe center;gap:18px}
.story .ro-ctl{display:none;flex-wrap:wrap;gap:8px 12px;justify-content:center}.story .hw-js .ro-ctl{display:flex}
.story .ro-basis>button{color:var(--txt);font-size:15px;min-height:40px}
.story .ro-basis>[aria-pressed=true]{background:rgba(244,226,162,.22);box-shadow:inset 0 0 0 1px var(--glow-a)}
.story .ro-mode{margin:0;font:15px var(--brand-sans);color:var(--txt2)}.story .ro-mode b{color:var(--gold);font-weight:600}
.story .ro-mode-x{display:none}.story .ro[data-basis=x] .ro-mode-z{display:none}.story .ro[data-basis=x] .ro-mode-x{display:inline}
.story .iq-schem{font:12.5px var(--brand-mono);font-weight:400;color:var(--txt3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.story .rh-col{position:relative}.story .rh-ghost{position:absolute;left:0;right:0;bottom:0;border:2px dashed rgba(244,226,162,.7);border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box;z-index:1;pointer-events:none;transition:height .5s}
.story .ro-legend{display:flex;align-items:center;gap:8px;margin:6px 0 0;font:13.5px var(--brand-sans);color:var(--txt3)}.story .ro-legend s{width:18px;height:12px;border:2px dashed rgba(244,226,162,.7);border-bottom:0;box-sizing:border-box}
.story .ro-fresh{display:none;margin-top:2px;color:#8fe6dc;opacity:0}.story .ro-fresh.on{display:block}
.story .ro-view{display:grid;gap:12px;align-content:center;justify-items:center;margin-bottom:24px}
.story .hw-js .ro-view{grid-area:1/1;margin:0;visibility:hidden;opacity:0}
.story .hw-js .ro-view.on{visibility:visible;opacity:1}
.story .rs{margin:0;width:100%;max-width:560px}
.story .rs-svg{display:block;width:100%;height:auto}
.story .rs-axis{stroke:rgba(198,214,218,.45)}.story .rs-axtext{font:14px var(--brand-sans);fill:var(--txt3)}
.story .rs-dip{fill:none;stroke-width:2.6}.story .rs-dip[data-k="0"]{stroke:var(--teal)}.story .rs-dip[data-k="1"]{stroke:var(--lilac)}
.story .rs-probe{stroke:var(--gold);stroke-width:2;stroke-dasharray:5 4}
.story .rs-text{font:15px var(--brand-sans);fill:var(--txt);paint-order:stroke;stroke:#0b1317;stroke-width:5px}.story .rs-probetext{fill:#f3dda0}
.story .rs-qubit{display:flex;align-items:center;gap:10px;font:15px var(--brand-sans);color:var(--txt2)}
.story .rs-state{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:6px;background:rgba(47,211,196,.16);border:1px solid var(--teal);font:600 17px var(--brand-mono);color:var(--txt)}
.story .rs-phase{width:30px;height:30px;border-radius:50%;border:1px solid rgba(198,214,218,.45);position:relative}
.story .rs-phase i{position:absolute;left:50%;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--gold);transform-origin:0 50%;transform:rotate(-35deg)}
.story .ro-left,.story .ro-right{display:grid;gap:12px;justify-items:center;width:100%}
.story .ro-iqs{display:flex;gap:16px;justify-content:center;width:100%}
.story .iq{margin:0;width:min(46%,230px)}
.story .iq figcaption{font:600 15px var(--brand-serif);color:var(--txt2);margin-bottom:4px;display:flex;gap:8px;align-items:baseline}
.story .iq-read{font:600 15px var(--brand-mono);color:var(--gold)}
.story .iq-svg{display:block;width:100%;height:auto}
.story .iq-frame{fill:#0c181c;stroke:var(--line)}.story .iq-axis{stroke:rgba(198,214,218,.2)}
.story .iq-cloud{fill:none;stroke:rgba(198,214,218,.3);stroke-dasharray:3 4}.story .iq-cloud.hit{stroke:var(--gold);stroke-dasharray:none}
.story .iq-split{stroke:rgba(230,184,80,.45);stroke-dasharray:5 4}
.story .iq-text{font:14px var(--brand-sans);fill:var(--txt2);paint-order:stroke;stroke:#0c181c;stroke-width:5px}
.story .iq-dots circle{fill:var(--teal);opacity:.75}.story .iq-dots circle.k1{fill:var(--lilac)}.story .iq-dots circle.last{opacity:1;stroke:#fff;stroke-width:1.5}
.story .ro-now,.story .ro-hist{width:100%;max-width:520px}
.story .ro-cap{margin:0 0 6px;font:600 15px var(--brand-serif);color:var(--txt2);display:flex;gap:8px;align-items:center}
.story .ro-tag{font:12.5px var(--brand-mono);color:var(--txt3);font-weight:400}
.story .ro-total{font:14px var(--brand-mono);color:var(--txt)}
.story .rn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.story .rn-cell{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;font:13.5px var(--brand-mono);color:var(--txt2)}
.story .rn-cell b{font:600 14px var(--brand-mono);color:var(--txt)}
.story .rn-cell i{height:8px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}.story .rn-cell em{display:block;height:100%;background:var(--teal)}
.story .rn-cell output{grid-column:1 / -1}
.story .ro-last{margin:6px 0 0;font:15px var(--brand-sans);color:var(--txt2)}.story .ro-out{font:600 15px var(--brand-mono);color:var(--gold)}
.story .rh{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:120px}
.story .rh-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.story .rh-col{width:100%;max-width:56px;flex:1;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:4px 4px 0 0}
.story .rh-col i{display:block;width:100%;height:0;border-radius:4px 4px 0 0;background:linear-gradient(var(--teal),#1a8f86)}
.story .rh-bar b{font:600 14px var(--brand-mono)}.story .rh-n,.story .rh-p{font:13px var(--brand-mono);color:var(--txt3)}
.story .hw-js .ro-btns{display:inline-flex}
.story .ro-btns>button{color:var(--txt);font-size:15px;min-height:40px}

/* Wide stages: the readout planes side by side across the stage, the state and the histogram below them, all
   sized from the stage height; the resonator plot grows with it. */
@container (min-width:760px){.story .hw-js .ro-view[data-view="1"]{grid-template-columns:minmax(0,1fr);gap:18px;width:100%}.story .hw-js .ro-iqs{gap:24px}.story .hw-js .iq{width:clamp(200px,calc(100cqh - 420px),320px)}
  .story .hw-js .ro-right{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;gap:32px;max-width:900px}.story .hw-js .ro-now,.story .hw-js .ro-hist{max-width:none}.story .hw-js .rh{height:clamp(110px,calc(100cqh - 520px),200px)}
  .story .hw-js .rs{max-width:min(680px,calc((100cqh - 150px) * 400 / 230))}}
/* Wide, short stages (phones held sideways): chapters 4 and 5 put the Bloch sphere right, everything else left. */
@container (min-width:621px) and (max-height:560px){.story .hw-js .qb-create,.story .hw-js .qb-super{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pz bl" "lv bl" "am bl";align-content:center;column-gap:min(5cqw,52px);--bl:clamp(150px,min(56cqh,38cqw),400px)}
  .story .hw-js .qb-create{grid-template-areas:"lv bl" "am bl"}.story .hw-js .qb-create .pz,.story .hw-js .qb-super .pz{grid-area:pz;max-width:520px}.story .hw-js .qb-create .lv,.story .hw-js .qb-super .lv{grid-area:lv;justify-self:center}
  .story .hw-js .qb-create .am,.story .hw-js .qb-super .am{grid-area:am}.story .hw-js .qb-create .bl,.story .hw-js .qb-super .bl{grid-area:bl}}

/* Chapter 8: sandbox stage and its controls (inside the step) */
.story .sb-circ{overflow-x:auto;scrollbar-width:thin;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid var(--line);padding:4px 8px}
.story .sb-svg{min-width:420px}
.story .sb-out{margin:0;font:15px/1.45 var(--brand-sans);color:var(--txt2)}
.story .sbc{display:none;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.story .hw-js .sbc{display:grid;gap:10px}
.story .sbc button{scroll-margin:4px 0}
.story .sbc-nojs{margin:12px 0 0;font:15px/1.5 var(--brand-sans);color:var(--txt3)}.story .hw-js .sbc-nojs{display:none}
.story .sbc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.story .sbc-l,.story .sbc-ry label{font:600 14px var(--brand-serif);color:var(--txt3);min-width:6.4em}
.story .sbc-gates{display:flex;flex-wrap:wrap;gap:6px}
.story .sbc button:not(.sbc-qs>button){font:600 15px var(--brand-sans);color:var(--txt);background:rgba(255,255,255,.045);border:1px solid rgba(244,226,162,.35);border-radius:6px;padding:8px 12px;min-width:44px;min-height:40px}
.story .sbc button:not(.sbc-qs>button):hover{background:rgba(244,226,162,.14)}
.story .sbc button:disabled{opacity:.45;cursor:default}
.story .sbc-qs>button{color:var(--txt);font-size:15px;min-height:36px}
.story .sbc input[type=range]{flex:1 1 70px;min-width:0;accent-color:var(--teal)}
.story .sbc output{font:600 14px var(--brand-mono);color:var(--txt)}
.story .sbc-status{margin:0;font:14.5px/1.45 var(--brand-sans);color:var(--txt3);min-height:1.45em}
.story .sb-gate rect{fill:#2a2614;stroke:var(--gold);stroke-width:1.5}.story .sb-gate text{font:600 15px var(--brand-sans);fill:#fff3d1;text-anchor:middle}
.story .sb-gate.future{opacity:.42}

/* SVG parts that scale about their own centre */
.story .m-mzmglow,.story .m-ionglow,.story .fr-q,.story .fr-att,.story .fr-amp,.story .ln-rz,.story .bl-center,.story .cq-gate,.story .m-det{transform-box:fill-box;transform-origin:center}
.story .st-hb i{transform-origin:50% 100%}
.story .sb-gate .sb-sub{font:13px var(--brand-mono);fill:var(--txt2)}

/* Laptops: a narrower text column */
@media (max-width:1180px){.story .hw-ch{grid-template-columns:minmax(0,1fr) minmax(330px,390px)}.story .hw-head{padding:48px 26px 8px}.story .hw-steps{padding:6px 26px 40px}}
@container (max-width:620px){
  .story .st{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;align-content:start}
  .story .st-qubits{left:calc(var(--dx) + var(--w) - 52px);top:calc(var(--dy) + var(--t) / 2 - 2px);gap:5px}.story .st-qubits i{width:5px;height:5px}
  .story .st-qec{padding:3px 6px 4px}.story .st-quantum .st-name{width:calc(var(--bw) - 54px)}
  .story .st-big{font-size:22px}.story .st-code{font-size:13px;line-height:1.45;padding:8px 10px}.story .st-goal{font-size:16px;margin-bottom:6px}
  .story .st-kicker{margin-bottom:4px}.story .st-times{display:none}.story .st-note{display:none}
  .story .mc-grid{grid-template-columns:26px repeat(var(--cols),36px);grid-auto-rows:36px}.story .mc-link::after{height:36px}
  .story .st-up{gap:4px}.story .st-up li{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:4px 8px;font-size:13.5px}.story .st-up li b{font-size:13.5px}
  .story .st-hist{height:62px}.story .st-card{top:auto;bottom:0;transform:none}
  .story .qb-create,.story .qb-super{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .story .qb-create .am,.story .qb-super .am{grid-column:1 / -1}
  .story .qb-ent,.story .sb{grid-template-columns:1fr 1fr;gap:4px 10px}
  .story .bl-title{font-size:13.5px;margin:0}.story .bl-pole{font-size:13.5px}.story .bl-word{display:none}
  .story .am-head{display:none}.story .cm{font-size:14px}
  .story .qb-side{grid-column:1 / -1;max-width:none;gap:8px}
  .story .qb-ent,.story .sb{--bl:140px}.story .qb-create,.story .qb-super{--bl:150px}
  .story .hw-js .qb{--bl:100px}.story .hw-js .qb-create{--bl:clamp(132px,min(calc(100cqh - 144px),calc(100cqw - 170px)),440px)}.story .hw-js .qb-super{--bl:clamp(132px,min(calc(76cqh - 175px),calc(100cqw - 170px)),400px)}.story .hw-js .qb-super .pz{max-width:min(560px,calc(24cqh * 400 / 150))}
  .story .hw-js .qb-ent{--bl:clamp(100px,min(calc(100cqh - 29cqw - 244px),calc(50cqw - 24px)),240px)}.story .hw-js .sb{--bl:clamp(100px,min(calc(100cqh - 358px),calc(50cqw - 24px)),220px)}.story .bl-len{font-size:12.5px}
  .story .lv-row{height:36px}.story .lv-gap{height:40px}
  .story .am-row{height:24px}.story .am-head,.story .am-row{grid-template-columns:2.8em 26px 6.6em minmax(40px,1fr) 4.2em;gap:6px}.story .am-amp,.story .am-p{font-size:12.5px}.story .am-dial{width:26px;height:26px}
  .story .pz-note{display:none}.story .ro-view,.story .ro-left,.story .ro-right{gap:8px}.story .rh{height:84px}.story .sb-circ{padding:0 6px}.story .sb-svg{height:96px}
  .story .ro-iqs{gap:10px}.story .iq{width:min(40%,150px)}.story .iq-text{font-size:17px}.story .iq figcaption{font-size:14px;margin-bottom:2px}.story .ro-mode{font-size:14px}.story .ro-legend{font-size:13px;margin-top:2px}
  .story .hw-js .ro{gap:8px}.story .ro-cap{margin-bottom:3px;font-size:14px}.story .rn-cell{font-size:13px}.story .ro-last{margin-top:3px;font-size:14px}.story .ro-out{font-size:14px}
  .story .ro-btns>button,.story .ro-basis>button{font-size:14px;padding:6px 9px;min-height:36px}.story .ro-ctl{gap:6px}
  .story .mc-grid{grid-auto-rows:30px}.story .mc-link::after{height:30px}.story .mc-gate{height:25px;min-width:30px;font-size:12.5px}.story .mc figcaption{font-size:14px;margin-bottom:2px}.story .st-arrow{margin:3px 0}
  .story .st-wave,.story .st-chip{max-width:240px;margin:0 auto}.story .st-dimtext,.story .st-chiplabel{font-size:20px}.story .st-hist{height:54px}.story .st-up li{padding:3px 8px}
}
.story .sb .qb-side{gap:8px}
@container (max-width:620px) and (min-height:701px){.story .hw-js .sb{--bl:clamp(100px,min(calc(100cqh - 410px),calc(50cqw - 24px)),220px)}}@container (max-width:440px){.story .hw-js .qb-create{--bl:clamp(132px,min(calc(100cqh - 144px),calc(100cqw - 205px)),440px)}.story .hw-js .qb-super{--bl:clamp(132px,min(calc(76cqh - 175px),calc(100cqw - 205px)),400px)}}
@container (max-height:700px){.story .sb-out{display:none}.story .sb .am-row{height:28px}}
@container (max-width:620px) and (min-height:560px){.story .hw-js .iq{width:min(46%,calc(100cqh - 400px))}.story .hw-js .rh{height:clamp(84px,calc(100cqh - 490px),150px)}}
@container (max-height:560px) and (min-width:621px){.story .bl{--bl:150px}.story .lv-row{height:36px}.story .lv-gap{height:42px}}
/* Phones: the stage keeps the top half and the steps scroll below it */
@media (max-width:860px){
  .story{--index-h:46px;--dock-h:62px}
  .story .hw-hero{padding:34px 16px 30px;grid-template-columns:minmax(0,1fr)}.story .hw-art{display:none}.story .hw-intro{font-size:17px}.story .hw-how{font-size:15px}
  .story .hw-ch{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "steps"}
  .story .hw-head{padding:40px 16px 14px}.story .hw-lede{font-size:15.5px}
  .story .hw-stage{border-right:0;border-bottom:1px solid var(--line);z-index:6;background:#0b1317}
  .story .hw-js .hw-stage{height:56svh;min-height:340px}
  .story .hw-canvas{padding:10px 14px}
  .story .hw-steps{padding:4px 16px 30px}
  .story .hw-js .hw-step{min-height:58svh;padding-top:3svh}
  .story .hw-js .hw-steps>.hw-step:last-child{min-height:44svh}
  .story .hw-card{padding:16px 16px 18px}.story .hw-card h3{font-size:20px}
  .story .hw-body{font-size:15px;line-height:1.58}.story .hw-tech{font-size:14px}
  .story .hw-index a{font-size:14px;padding:7px 9px}
  /* Phones: the chapter strip shows numbers plus the open chapter's name, so it fits; the qubit types wrap. */
  .story .hw-js .hw-index ol{padding:0 8px;gap:0}.story .hw-js .hw-index a{position:relative;gap:0;padding:7px 4px}.story .hw-js .hw-index a[aria-current]{gap:7px;padding:7px 10px 7px 4px}.story .hw-js .hw-index a:not([aria-current]) .hw-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .story .hw-js .ly-tabs{flex-wrap:wrap;justify-content:center;align-self:center;overflow:visible}
  .story .hw-dock{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:0;border-width:1px 0 0;gap:8px;padding:6px 8px 8px;height:var(--dock-h)}
  .story .hw-where{display:none}.story .hw-transport{flex:1;display:flex}.story .hw-transport>button{flex:1;justify-content:center;padding:9px 6px;font-size:14px}
  .story #hw-play{width:auto}
  .story .fig-label{font-size:12.5px;line-height:1.2;padding:2px 6px 3px}.story .fig-label b{font-size:13px;line-height:1.2}.story .fr-temp{max-width:27%}.story .fr-temp[data-i="5"]{translate:0 -38%}
  .story .fig-label .fr-long{display:none}.story .fig-label .fr-short{display:inline}
  .story .ly-box{--ar:.8;overflow:hidden}.story .ly-box>svg{width:168.75%;right:auto}
  .story .ly-label,.story .ly-leadg{display:none}.story .ly-badge{display:grid}.story .ly-legend{display:block}
  .story .fig-tag{left:var(--xm)}.story .ly-note{font-size:13px}
  .story .hw-words div{flex-direction:column;gap:0}
  .story .hw:not(.hw-js) .fr-attl,.story .hw:not(.hw-js) .fr-attleads{display:none}
  :root:has(.story .hw-js){scroll-padding:58px 0 74px}.story .hw-ch:not(.hw-ch-text) .hw-card :is(a,button){scroll-margin-top:max(56svh,340px)}
}
/* Laptop heights: tighter cards, so long steps and the circuit builder fit between the index and the dock. */
@media (max-height:820px) and (min-width:861px){.story .hw-card{padding:16px 20px 18px}.story .hw-js .hw-more{left:20px;right:20px;bottom:0}.story .hw-card h3{font-size:21px;margin:2px 0 8px}.story .hw-body{line-height:1.55}.story .hw-status{padding:6px 10px;line-height:1.45}.story .hw-labs{margin-top:10px}.story .hw-lablink{padding:6px 10px}
  .story .sbc{margin-top:10px;padding-top:10px;gap:8px}.story .sbc button:not(.sbc-qs>button){padding:6px 10px;min-height:36px}.story .sbc-qs>button{min-height:34px}}
@media (max-width:420px){.story #hw-replay .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.story .hw-card,.story .st-layer{transition:none}}