/* Inside a topological quantum computer. Everything is scoped under .story so the labs stylesheet is untouched.
   Readability floor: body 16px (15px on phones), scene labels 13px CSS (never below 12.5px) with a dark halo,
   contrast at least 4.5:1 on the #0b1317 stage. SVG labels are sized in CSS px times --u (SVG units per CSS px),
   which main.js measures per figure; without JavaScript --u falls back to a per-breakpoint estimate. Where a
   figure is drawn larger than its viewBox (--u below 1) a label keeps at least 12.5 SVG units, so it is never
   below 12.5 px either as a computed size or on screen. */
.story{--bg:#0b1317;--card:rgba(16,27,36,.78);--line:rgba(244,226,162,.2);--text:#dbe7e9;--dim:#a9bfc5;--teal:#2fd3c4;--gold:#e6b850;--lilac:#b9a4f8;--coral:#ff9e7a;--paper:#f6f3ee;
  background:var(--bg);color:var(--text);font:16px/1.6 var(--brand-sans);min-height:calc(100dvh - 64px);padding-bottom:110px;overflow-x:clip;
  /* No scroll anchoring: when a phone's Controls drawer opens, the step below should move down with the
     figure, not stay put underneath it. */
  overflow-anchor:none}
.story *{box-sizing:border-box}
.story a{color:inherit}
.story button,.story select{font:inherit;color:inherit}
.story :focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.story .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- hero ---- */
.story .tq-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center;max-width:1320px;margin:0 auto;padding:40px 32px 12px}
.story .tq-hero .visual-brand{display:inline-flex;margin-bottom:18px}
.story .tq-hero .eyebrow{font:12.5px var(--brand-mono);letter-spacing:.14em;color:var(--lilac)}
.story .tq-title{font:500 clamp(36px,4.6vw,64px)/1.04 var(--brand-serif);letter-spacing:-.02em;margin:10px 0 16px;color:#f2f6f6}
.story .tq-title .word{display:inline-block}
.story .tq-lede{font-size:19px;line-height:1.55;max-width:56ch;margin:0 0 14px;color:#d3e0e3}
.story .tq-note{font-size:15px;max-width:60ch;color:var(--dim);margin:0 0 14px}
.story .tq-howto{margin-bottom:22px}
.story:not(.tq-js) .tq-howto{display:none}
.story .tq-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.story .tq-start{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:8px;background:var(--teal);color:#06211f;font:600 15px var(--brand-sans);text-decoration:none}
.story .tq-level{color:var(--text)}
.story .tq-level>button{font-size:14px;padding:8px 12px}
.story .tq-hero-art{width:100%;height:auto;max-height:440px}
.story .hero-slab .iso-t{fill:#16262d;stroke:#2a434c}.story .hero-slab .iso-l{fill:#0f1c21}.story .hero-slab .iso-r{fill:#122126}
.story .hero-gate{fill:rgba(230,184,80,.07);stroke:rgba(230,184,80,.35);stroke-width:1.2}
.story .hero-wire{stroke:var(--teal);stroke-width:12;stroke-linecap:round;fill:none}
.story .hero-spine{stroke:#9fb3b8;stroke-width:9;fill:none}
.story .hero-mzm{fill:url(#h-mzm)}.story .hero-core{fill:#fff6d8}

/* ---- chapter index ---- */
.story .tq-index{max-width:1320px;margin:0 auto;padding:12px 32px 8px}
.story .tq-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.story .tq-index a{display:flex;gap:10px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none;min-height:100%}
.story .tq-index a:hover{border-color:var(--lilac)}
.story .tq-index-n{font:12.5px var(--brand-mono);color:var(--teal);flex:none}
.story .tq-index-t{font:500 16px/1.3 var(--brand-serif)}

/* ---- chapters ---- */
.story .tq-ch{max-width:1320px;margin:0 auto;padding:72px 32px 0}
.story .tq-ch-head{display:flex;gap:18px;align-items:baseline;max-width:880px;margin-bottom:8px}
.story .tq-ch-num{font:500 15px var(--brand-mono);color:var(--teal);border:1px solid rgba(47,211,196,.4);border-radius:6px;padding:4px 8px}
.story .tq-ch-head h2{font:500 clamp(30px,3.2vw,44px)/1.1 var(--brand-serif);margin:0 0 6px;color:#f2f6f6}
.story .tq-kicker{margin:0;font-size:18px;color:var(--dim)}
.story .tq-chapter{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
.story .tq-chapter>.tq-ch-head{grid-column:1;grid-row:1;flex-direction:column;gap:10px;margin:0}
.story .tq-chapter>.tq-steps{grid-column:1;grid-row:2}
.story .tq-chapter>.tq-stage-col{grid-column:2;grid-row:1 / span 2;align-self:stretch;height:auto}
.story .tq-stage-col>.tq-stage{position:sticky;top:12px;height:calc(100dvh - 104px);min-height:420px}
.story .tq-steps{padding:4vh 0 34vh}
.story .tq-beat{min-height:76vh;display:flex;align-items:center;padding:12px 0}
.story .tq-ch[data-fig=zoom] .tq-beat{height:78vh;min-height:0}
.story .tq-beat-card{width:100%;padding:20px 22px;border:1px solid var(--line);border-left:3px solid rgba(244,226,162,.2);border-radius:8px;background:var(--card);color:#b8cbd0;transition:border-color .5s,background-color .5s,color .5s}
.story .tq-beat.is-active .tq-beat-card{border-left-color:var(--teal);background:rgba(18,32,42,.94);color:var(--text);box-shadow:0 0 0 1px rgba(47,211,196,.12),0 12px 34px rgba(0,0,0,.35)}
/* A parked card never runs under the fixed dock: its height is capped to the room the reading line leaves
   above the dock (parked centre at mid-screen here; --tq-dock-h comes from ui.js measureRoom), and a longer card
   scrolls inside its box. Only the active card scrolls, so scrolling the page over a coming card still scrolls
   the page. A fade marks text below the visible end (.is-more). */
.story.tq-js .tq-beat-card{--fade:#0f1820;max-height:max(9em,calc(100svh - 2 * var(--tq-dock-h,58px) - 28px));overflow:hidden;scrollbar-width:thin}
.story.tq-js .tq-beat.is-active .tq-beat-card{--fade:#111f28;overflow-y:auto}
/* Sticky offsets are measured inside the card's 20 px bottom padding, hence bottom:-20px: the fade covers that
   padding and the last 30 px of visible text. */
.story.tq-js .tq-beat-card.is-more::after{content:'';display:block;position:sticky;bottom:-20px;height:50px;margin:-50px -22px 0;background:linear-gradient(rgba(17,31,40,0),var(--fade) 72%);pointer-events:none}
.story .tq-beat h3{font:500 23px/1.25 var(--brand-serif);margin:4px 0 10px;color:#f2f6f6}
.story .tq-beat p{margin:0 0 12px;font-size:16px;line-height:1.62}
.story .tq-beat p:last-child{margin-bottom:0}
.story .tq-beat-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 4px!important}
.story .tq-step{font:12.5px var(--brand-mono);color:var(--dim)}
.story .tq-beat-chap,.story .tq-step-ch{display:none}
.story .tq-tech{border-top:1px dashed rgba(244,226,162,.22);padding-top:10px;color:#cfdde0}
.story .tq-res{color:#cfdde0;font-size:15px!important}
.story .tq-quote{margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--gold);background:rgba(230,184,80,.08);border-radius:0 8px 8px 0}
.story .tq-quote p{font:italic 16px/1.55 var(--brand-serif);margin:0 0 6px;color:#f2f6f6}
.story .tq-quote footer{font-size:13.5px;color:var(--dim)}
.story .tq-link{display:inline-flex;gap:6px;margin-top:10px;color:var(--lilac);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(185,164,248,.4)}
.story .cite{font-size:.86em;color:#8fd9cf;white-space:nowrap}
.story .tq-quote .cite{font-size:1em}
.story .cite a{text-decoration:none;color:#8fd9cf}
.story .cite a:hover{text-decoration:underline}
.story .katex{font-size:1.04em;color:inherit}
/* KaTeX scripts at 0.7em (and 0.5em for scripts of scripts) fall below 12.5 px in 15 to 16 px text: enlarge them. */
.story .katex :is(.sizing,.katex-sizing).reset-size6.size3{font-size:.81em}
.story .katex :is(.sizing,.katex-sizing).reset-size6.size1{font-size:.76em}
.story .katex :is(.sizing,.katex-sizing).reset-size3.size1{font-size:1em}
/* status tags: text first, colour second */
.story .tq-tag{font:600 12.5px/1 var(--brand-sans);letter-spacing:.02em;padding:5px 8px;border-radius:6px;border:1px solid currentColor}
.story .tag-demonstrated{color:var(--teal)}.story .tag-accepted{color:#9be7c4}.story .tag-preprint{color:var(--gold)}.story .tag-proposed{color:var(--lilac)}.story .tag-claim{color:var(--paper)}
.story .tag-model{color:#9ed3dc}.story .tag-context{color:#c3d3d7}.story .tag-theory{color:#c9bdf9}.story .tag-disputed{color:var(--coral)}.story .tag-retracted{color:var(--coral)}.story .tag-hypothetical{color:var(--coral)}

/* ---- stage ---- */
.story .tq-stage-col{display:block;min-width:0}
.story .tq-stage{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:1px solid rgba(244,226,162,.16);border-radius:8px;background:#0d181d}
.story .tq-svg-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.story .tq-svg{width:100%;height:100%;max-height:100%;display:block;--u:1;overflow:hidden}
.story .tq-cap{font-size:15px;color:var(--dim);margin:0 4px}
.story .tq-tools{display:flex;flex-direction:column;gap:8px}
.story .tq-tools-bar{order:1;display:flex;gap:8px;align-items:flex-start}
.story .tq-tools-body{order:0}
.story .tq-tools-toggle{display:none}
.story:not(.tq-js) .tq-tools,.story:not(.tq-js) .tq-dock,.story:not(.tq-js) .tq-level{display:none}
.story .tq-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.story .tq-btn{min-height:40px;padding:8px 13px;border-radius:7px;border:1px solid rgba(244,226,162,.32);background:rgba(255,255,255,.04);color:var(--text);font:500 14.5px var(--brand-sans);cursor:pointer}
.story .tq-btn:hover{border-color:var(--teal)}
.story .tq-btn[aria-pressed=true]{background:rgba(185,164,248,.18);border-color:var(--lilac)}
.story .tq-btn:disabled,.story .tq-btn[aria-disabled=true]{opacity:.6;cursor:default}
.story .tq-range{display:flex;align-items:center;gap:8px;font-size:14.5px;flex:1 1 220px;min-width:0}
.story .tq-range span{white-space:nowrap;color:var(--dim)}
.story .tq-range input{flex:1;min-width:80px;accent-color:var(--teal)}
.story .tq-range output{font:13px var(--brand-mono);min-width:5.5ch;text-align:right;color:var(--text)}
.story .tq-select{display:flex;align-items:center;gap:8px;font-size:14.5px}
.story .tq-select span{color:var(--dim)}
.story .tq-select select{background:#13232a;border:1px solid rgba(244,226,162,.32);border-radius:7px;padding:8px;color:var(--text);width:auto;max-width:100%}
.story .tq-select{max-width:100%;flex-wrap:wrap}
.story .tq-key{margin:8px 2px 0;font-size:15px;line-height:1.45;color:var(--dim)}
.story .tq-out{display:block;flex:1;min-width:0;min-height:1.5em;font:15px/1.45 var(--brand-mono);color:#e9f2f3}
.story .tq-out sub{font-size:1em}
.story .tq-btn sub,.story .tq-key sub,.story .tq-range sub{font-size:.9em}
/* Readout: the live line keeps room for the trace summary on wide layouts (four lines up to 1180 px, three
   above), so the figure never jumps when it wraps. */
@media (min-width:901px){.story #r-out{min-height:5.8em}}
@media (min-width:1181px){.story #r-out{min-height:4.35em}}

/* ---- SVG scene vocabulary ---- */
.story .lbl{font-family:var(--brand-sans);font-size:max(12.5px,calc(13px * var(--u)));fill:#eef5f5;paint-order:stroke;stroke:#0b1317;stroke-width:calc(4px * var(--u));stroke-linejoin:round}
.story .lbl-sm{font-size:max(12.5px,calc(13px * var(--u)))}
.story .lbl-lg{font-family:var(--brand-serif);font-size:calc(18px * var(--u))}
.story .lbl-big{font-family:var(--brand-serif);font-size:calc(26px * var(--u))}
.story .lbl-mono{font-family:var(--brand-mono);font-size:max(12.5px,calc(13px * var(--u)))}
.story .lbl-mzm{font-family:var(--brand-serif);font-style:italic;font-size:calc(17px * var(--u));fill:#fff1c8}
/* Subscripts stay at least 12.5 px on screen: 13 px labels keep .97em, 17 px Majorana labels .74em. */
.story .lbl .sub{font-size:max(12.5px,.97em)}
.story .lbl-mzm .sub{font-size:max(12.5px,.74em)}
.story .lbl-dim{fill:#b4c8cd}.story .lbl-gold{fill:var(--gold)}.story .lbl-lilac{fill:var(--lilac)}.story .lbl-teal{fill:var(--teal)}.story .lbl-coral{fill:var(--coral)}.story .lbl-paper{fill:var(--paper)}
.story .tq-bg{fill:#0d181d}
.story .tq-wire{fill:url(#z-wire);stroke:#7ff0e6;stroke-width:.6}
.story #svg-phase .tq-wire{fill:url(#p-wire)}.story #svg-qubit .tq-wire{fill:url(#q-wire)}.story #svg-readout .tq-wire{fill:url(#r-wire)}.story #svg-braid .tq-wire{fill:url(#b-wire)}.story #svg-array .tq-wire{fill:url(#a-wire)}
.story .tq-spine{fill:#8ea4aa}
.story .tq-mzm{fill:url(#z-mzm);opacity:.9}
.story #svg-phase .tq-mzm{fill:url(#p-mzm)}.story #svg-qubit .tq-mzm{fill:url(#q-mzm)}.story #svg-readout .tq-mzm{fill:url(#r-mzm)}.story #svg-braid .tq-mzm{fill:url(#b-mzm)}.story #svg-array .tq-mzm{fill:url(#a-mzm)}
.story .tq-mzm-core{fill:#fff6d8}
.story .tq-dot{fill:#1d3a42;stroke:var(--teal);stroke-width:2}
.story .tq-svg :is(.tq-mzm,.tq-mzm-core,.tq-wire,.tq-spine,.ph-glow,.cl-p,.cl-cur,.cl-t,.ar-dot,.ar-gen,.st-dot,.q-ring,.b-chip,.b-bar,.r-dot,.r-pt,.hero-mzm){transform-box:fill-box;transform-origin:50% 50%}
.story .lbl-ink{fill:#06211f;stroke:none}
.story .ph-hop{fill:none;stroke:none}
/* zoom */
.story .z-frame{fill:none;stroke:rgba(230,184,80,.55);stroke-width:2;vector-effect:non-scaling-stroke}
.story .z-plate{fill:url(#z-cu)}.story .z-post{stroke:#5d7077;stroke-width:3}.story .z-coax{stroke:#7e95a0;stroke-width:1.6;fill:none}.story .z-pulse{stroke:#55707a;stroke-width:9;fill:none}
.story .z-finger{fill:#b88250}.story .z-package{fill:var(--gold)}
.story .z-pcb{fill:#173a2c;stroke:#c99a5b;stroke-width:6}.story .z-pcb-in{fill:#0f2a20}.story .z-sma{fill:#c9a35b}.story .z-trace{stroke:#c99a5b;stroke-width:1.2;opacity:.7}
.story .z-die{fill:#2a3238;stroke:#7c8b91;stroke-width:1.4}.story .z-pad{fill:#cfb36b}.story .z-meander{fill:none;stroke:#9fb3b8;stroke-width:2}.story .z-array{fill:var(--teal)}
.story .z-gate{fill:rgba(230,184,80,.1);stroke:rgba(230,184,80,.45);stroke-width:1.5}
.story .z-cut{stroke:var(--coral);stroke-width:2.4;stroke-dasharray:6 5}
.story .z-track{stroke:rgba(230,184,80,.35);stroke-width:2}.story .z-tickmark{stroke:rgba(230,184,80,.5);stroke-width:1.5}.story .z-bar{fill:var(--gold)}.story .z-tick{fill:rgba(230,184,80,.4)}.story .z-mark{fill:var(--gold)}
.story .sx-buffer{fill:#1d2c33}.story .sx-barrier{fill:#245158}.story .sx-well{fill:#1f8f86}.story .sx-2deg{fill:var(--gold);opacity:.75}
.story .sx-al{fill:#cfdbdf}.story .sx-alox{fill:#7d97a0}.story .sx-hfox{fill:#4f6872}.story .sx-ti{fill:#6c7a80}.story .sx-au{fill:#c99d48}.story .sx-gal{fill:#7f8d92}.story .sx-alox2{fill:#3a5059}
.story .sx-brace{fill:none;stroke:var(--paper);stroke-width:2}.story .sx-b{fill:none;stroke:var(--lilac);stroke-width:2.4}.story .sx-bx{stroke:var(--lilac);stroke-width:2.4}
.story .iso-l{filter:brightness(.62)}.story .iso-r{filter:brightness(.8)}.story .iso-t{stroke:rgba(255,255,255,.18);stroke-width:.8}
.story .ex-lead{stroke:rgba(244,226,162,.4);stroke-width:1}.story .ex-arrow{stroke:var(--lilac);stroke-width:3;marker-end:none;fill:none}
/* phase */
.story .ph-trivial{fill:#13232a}.story .ph-topo{fill:rgba(185,164,248,.22)}.story .ph-boundary{fill:none;stroke:var(--lilac);stroke-width:2.4}
.story .ph-axis{stroke:#6f8890;stroke-width:1.4}.story .ph-knob{fill:var(--gold);stroke:#0b1317;stroke-width:3;cursor:grab}
.story .ph-e0{dominant-baseline:hanging}.story .ph-level{stroke:#7d969d;stroke-width:3;stroke-linecap:round}.story .ph-level0{stroke:var(--gold)}
.story .ph-site{fill:#12242b;stroke:#2b4650;stroke-width:1.4}.story .ph-maj{fill:#e9f4f5}
.story .ph-bond{stroke:var(--teal);fill:none;stroke-linecap:round}.story .ph-glow{fill:url(#p-mzm)}
.story .ph-island{fill:rgba(185,164,248,.06);stroke:var(--lilac);stroke-width:1.6;stroke-dasharray:8 6}
.story .ph-electron{fill:var(--coral)}
.story .ph-un{opacity:0;transition:opacity .45s}.story .ph-un.is-on{opacity:1}
/* qubit */
.story .q-arc{fill:none;stroke-width:3}.story .q-arc-z{stroke:var(--gold)}.story .q-arc-x{stroke:var(--lilac)}
.story .q-ring{fill:none;stroke:#9fd8f0;stroke-width:2}.story .q-qp-path{fill:none;stroke:rgba(255,158,122,.35);stroke-width:1.5;stroke-dasharray:3 6}
.story .q-qp{fill:url(#q-qpg)}
.story .q-track{fill:#13232a;stroke:#2b4650}.story .q-mid{stroke:#6f8890;stroke-width:1.4}.story .q-fill-z{fill:var(--gold)}.story .q-fill-x{fill:var(--lilac)}
.story .q-disk{fill:#11212a;stroke:#2b4650;stroke-width:1.4}.story .q-axis{stroke:#3c5660;stroke-width:1}.story .q-vec{stroke:var(--teal);stroke-width:3.5;stroke-linecap:round}.story .q-tip{fill:var(--teal)}
/* readout */
.story .r-loop{fill:rgba(230,184,80,.05);stroke:var(--gold);stroke-width:3}
.story .r-phi{fill:none;stroke:var(--lilac);stroke-width:2}.story .r-phi-c{fill:var(--lilac)}
.story .r-line{fill:none;stroke:#6f8890;stroke-width:2.5}.story .r-res{fill:#173a2c;stroke:#c99a5b;stroke-width:2}
.story .r-sig-path{fill:none;stroke:none}.story .r-pulse{fill:var(--teal)}
.story .r-plot{fill:#0b1418;stroke:#28414a}.story .r-level{stroke:#476068;stroke-width:1.2;stroke-dasharray:5 5}
.story .r-trace{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linejoin:round}.story .r-truth{fill:none;stroke:var(--gold);stroke-width:2;opacity:.8}
.story .r-bin{fill:var(--teal);opacity:.85}
.story .r-level{transition:stroke .4s,stroke-width .4s}.story #r-lv-e.is-hot{stroke:var(--teal);stroke-width:3;stroke-dasharray:none}.story #r-lv-o.is-hot{stroke:var(--gold);stroke-width:3;stroke-dasharray:none}
.story .r-pt{stroke:#0b1317;stroke-width:2}.story .r-pt-e{fill:var(--teal)}.story .r-pt-o{fill:var(--gold)}
.story #r-shot2{transform:translateY(calc(24px * var(--u)))}
/* braid */
.story .b-loop{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;opacity:0}
.story .b-chip{fill:#12232a;stroke:#2b4650}.story .b-out.is-on .b-chip{stroke:var(--gold)}
.story .b-helper{stroke:#6f8890;stroke-width:5;stroke-dasharray:2 8;stroke-linecap:round}
.story .b-world{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round}.story .b-w2{stroke:var(--lilac)}.story .b-w3{stroke:#4f6971}
.story .b-halo{fill:none;stroke:#0d181d;stroke-width:15}.story .b-ghost{display:none}
.story .b-bar{fill:rgba(230,184,80,.16);stroke:var(--gold);stroke-width:1.6}
.story .b-ent{fill:rgba(185,164,248,.16);stroke:var(--lilac);stroke-width:1.4;stroke-dasharray:5 5;opacity:0}
/* clifford */
.story .cl-sphere{fill:rgba(47,211,196,.04);stroke:#3a5862;stroke-width:1.6}.story .cl-eq,.story .cl-mer{fill:none;stroke:#2b4650;stroke-width:1.2}
.story .cl-p{fill:var(--gold);stroke:#0b1317;stroke-width:2}.story .cl-cur{fill:none;stroke:var(--teal);stroke-width:3.5}
.story .cl-t{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-dasharray:4 4}
.story .cl-trail{fill:none;stroke:rgba(47,211,196,.6);stroke-width:2}
.story .cl-f{fill:var(--lilac);opacity:.9}.story .cl-back{opacity:.4}
/* array */
.story .ar-card{fill:#11222a;stroke:rgba(244,226,162,.25);stroke-width:1.4}.story .ar-mini{fill:#1f8f86}.story .ar-dot{fill:#2c8f88}
.story .ar-patch{fill:none;stroke:#3a5862;stroke-width:1.4;stroke-dasharray:6 6}.story .ar-patch.is-flag{stroke:var(--coral);stroke-width:2.6;stroke-dasharray:none}
.story .ar-link{stroke:#3e5961;stroke-width:5;stroke-linecap:round}.story .ar-xx.is-on{stroke:var(--gold)}.story .ar-zz.is-on{stroke:var(--lilac)}
.story .ar-logical{fill:rgba(230,184,80,.05);stroke:var(--gold);stroke-width:2;stroke-dasharray:8 5}
/* status */
.story .st-line{fill:none;stroke:#4b666e;stroke-width:3}
.story .st-dot{stroke:#0b1317;stroke-width:2}.story .st-ev.is-focus{opacity:1!important}
.story .st-dot-theory{fill:#0d181d;stroke:var(--lilac)!important;stroke-width:2.4!important}.story .st-dot-proposed{fill:var(--lilac)}.story .st-dot-demonstrated{fill:var(--teal)}.story .st-dot-accepted{fill:#9be7c4}.story .st-dot-preprint{fill:var(--gold)}.story .st-dot-claim{fill:var(--paper)}.story .st-dot-disputed{fill:var(--coral)}.story .st-dot-context{fill:#9fb3b8}
.story .st-dot-retracted{fill:#0d181d;stroke:var(--coral)!important;stroke-width:2.4!important}.story .st-legend-p{display:none}

/* ---- sources ---- */
.story .tq-sources{padding-bottom:40px}
.story .tq-src-list{columns:2 420px;column-gap:40px;margin:18px 0 0;padding-left:28px}
.story .tq-src-list li{break-inside:avoid;margin:0 0 14px;font-size:15px;line-height:1.5}
.story .tq-src-list li:target{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.story .tq-src-list a{color:#e9f2f3}
.story .tq-src-list small{display:block;font-size:15px;color:var(--dim)}
.story .tq-foot{max-width:80ch;color:var(--dim);font-size:15px;margin-top:24px}

/* ---- dock ---- */
.story .tq-dock{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;width:min(860px,calc(100% - 24px));padding:8px;color:#eef5f5;background:rgba(11,19,23,.97)}
.story .tq-progress{position:absolute;left:10px;right:10px;top:-1px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.story .tq-progress i{display:block;height:100%;width:0;background:var(--teal);transition:width .4s}
.story .tq-dbtn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 12px;border-radius:7px;border:1px solid rgba(244,226,162,.3);background:transparent;cursor:pointer;font:500 15px var(--brand-serif)}
.story .tq-dbtn:hover{border-color:var(--teal)}
.story .tq-ico{font-size:18px;line-height:1}
.story .tq-play{min-width:7.2em;justify-content:center}
.story .tq-play[data-state=running]{box-shadow:inset 0 0 0 1px var(--teal);background:rgba(47,211,196,.1)}
.story .tq-svgico{width:12px;height:12px;fill:currentColor}
.story .tq-play .ico-pause,.story .tq-play[data-state=running] .ico-play{display:none}
.story .tq-play[data-state=running] .ico-pause{display:inline}
.story .tq-where{flex:1;min-width:0;margin:0 4px;font:13px var(--brand-mono);color:#c3d3d7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story .tq-menu{position:absolute;left:0;bottom:calc(100% + 8px);margin:0;padding:6px;list-style:none;width:min(420px,100%);max-height:60vh;overflow:auto;background:rgba(11,19,23,.96);color:#eef5f5}
.story .tq-menu button{display:flex;gap:10px;width:100%;text-align:left;padding:10px;border:0;border-radius:6px;background:transparent;cursor:pointer;font:500 15px var(--brand-serif)}
.story .tq-menu button:hover,.story .tq-menu button[aria-current=true]{background:rgba(244,226,162,.14)}

/* ---- no JavaScript: the zoom figure shows its six levels side by side ---- */
.story .z-static,.story #z-static-title{display:none}
.story .z-thumb .lbl{display:none}
.story:not(.tq-js) #z-static,.story:not(.tq-js) #z-static-title{display:inline}
.story:not(.tq-js) #z-world,.story:not(.tq-js) #z-band,.story:not(.tq-js) #z-ladder,.story:not(.tq-js) #z-name,.story:not(.tq-js) #z-fov{display:none}

/* ---- laptop ---- */
@media (max-width:1180px){
  .story .tq-chapter{grid-template-columns:minmax(280px,380px) minmax(0,1fr);column-gap:28px}
  .story .tq-beat h3{font-size:21px}
}
/* ---- tablet and phone: the stage sticks to the top, steps scroll below it ---- */
@media (max-width:900px){
  .story .tq-hero{grid-template-columns:1fr;padding:28px 16px 4px}
  /* The how-to line follows the lede, so at first paint it sits above the fixed dock. */
  .story .tq-hero-text{display:flex;flex-direction:column;align-items:flex-start}
  .story .tq-hero-text>.tq-howto{order:1;margin-bottom:14px}
  .story .tq-hero-text>.tq-note:not(.tq-howto){order:2}
  .story .tq-hero-text>.tq-hero-actions{order:3}
  .story .tq-hero-art{max-height:260px;order:-1}
  .story .tq-index,.story .tq-ch{padding-left:16px;padding-right:16px}
  .story .tq-ch{padding-top:52px}
  .story .tq-chapter{display:flex;flex-direction:column}
  .story .tq-chapter>.tq-ch-head{order:0;flex-direction:row;margin-bottom:10px}
  .story .tq-chapter>.tq-stage-col{order:1;position:sticky;top:0;z-index:5;width:100%;padding:6px 0;background:var(--bg)}
  .story .tq-chapter>.tq-steps{order:2}
  .story .tq-stage-col>.tq-stage{position:static;height:auto;min-height:0;padding:6px;gap:6px}
  .story .tq-svg-wrap{flex:none;aspect-ratio:4/3;max-height:36vh}
  .story #fig-zoom .tq-svg-wrap{aspect-ratio:720/634;max-height:42vh}
  /* Controls fold behind a button; the bar (button and a two-line output) keeps one fixed height. */
  .story .tq-tools-bar{order:0;align-items:center;min-height:44px;cursor:pointer}
  .story .tq-tools-toggle{display:inline-flex;align-items:center;gap:6px;flex:none}
  .story .tq-tools-toggle span{display:inline-block;transition:transform .3s}
  .story .tq-tools-toggle[aria-expanded=true] span{transform:rotate(180deg)}
  .story .tq-tools-body{order:1;display:none}
  .story .tq-tools.is-open .tq-tools-body{display:block}
  /* Five lines of the live readout stay visible at 14 px, never cut with an ellipsis: a longer text scrolls
     inside the box, and the opened Controls drawer shows more of it. */
  .story .tq-out{font-size:14px;line-height:1.4;height:7em;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .story .tq-tools.is-open .tq-out{height:auto;max-height:9.8em}
  .story .tq-row{flex-wrap:wrap}
  .story .tq-row .tq-range{flex:1 1 100%}
  .story .tq-svg{--u:1.7}
  .story .tq-cap{display:none}
  .story .tq-steps{padding:2vh 0 30vh;width:100%}
  /* Steps follow each other about 150 px apart: parking needs only the card's own height (ui.js parkLine). */
  .story .tq-beat{min-height:0;align-items:flex-start;padding:18px 0 132px}
  .story .tq-ch[data-fig=zoom] .tq-beat{height:70vh;min-height:0;padding-bottom:0}
  .story .tq-beat p{font-size:15px}
  /* The parked card runs from 12 px under the sticky figure (--tq-stage-h, ui.js measureRoom) to 12 px above the
     dock at most; svh, so a phone's address bar showing or hiding never changes it. */
  .story.tq-js .tq-beat-card{max-height:max(6em,calc(100svh - var(--tq-stage-h,45vh) - var(--tq-dock-h,58px) - 24px))}
  /* The chapter heading has scrolled away above the sticky figure: the card names its chapter. */
  .story.tq-js .tq-beat-chap{display:flex;gap:10px;align-items:baseline;margin:0 0 8px!important;font:500 18px/1.3 var(--brand-serif);color:#f2f6f6}
  .story.tq-js .tq-step-ch{display:inline}
  .story .tq-key,.story .tq-src-list small{font-size:14px}
  .story .tq-btn{min-height:40px;padding:7px 10px;font-size:14px}
  .story .tq-range{font-size:14px}
  .story .tq-dock{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:0;border-left:0;border-right:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .story .tq-dbtn{min-height:44px;padding:8px 10px}
  .story .tq-dbtn .tq-lbl{display:none}
  .story .tq-play .tq-lbl{display:inline}
  .story .tq-play{min-width:6.4em}
}
@media (max-width:600px){
  .story .lbl-opt,.story .lbl.lbl-opt{display:none}
  .story .st-legend-p{display:inline}
  .story .lbl-lg{font-size:calc(15px * var(--u))}
  .story .lbl-big{font-size:calc(20px * var(--u))}
  .story .tq-svg{--u:2}
  .story .tq-title{font-size:34px}
  .story .tq-lede{font-size:17px}
  .story .tq-where{display:none}
  .story .tq-kicker{font-size:16px}
}
/* ---- low landscape screens (a phone held sideways): figure and steps side by side as on wide layouts, the
   figure as tall as the room above the dock allows, controls folded as on phones, an icon-only dock, and the
   optional labels hidden as on phones. ui.js LOW_QUERY is the same query. ---- */
@media (max-height:500px) and (orientation:landscape) and (min-width:600px){
  .story .tq-index,.story .tq-ch{padding-left:16px;padding-right:16px}
  .story .tq-ch{padding-top:36px}
  .story .tq-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:20px}
  .story .tq-chapter>.tq-ch-head{flex-direction:column;gap:6px;margin:0}
  .story .tq-ch-head h2{font-size:26px}
  .story .tq-kicker{font-size:15px}
  .story .tq-chapter>.tq-stage-col{position:static;width:auto;padding:0;background:none;z-index:auto}
  .story .tq-stage-col>.tq-stage{position:sticky;top:6px;height:calc(100dvh - var(--tq-dock-h,48px) - 12px);min-height:0;padding:4px;gap:4px}
  .story .tq-svg-wrap,.story #fig-zoom .tq-svg-wrap{flex:1 1 auto;min-height:0;aspect-ratio:auto;max-height:none}
  .story .tq-cap{display:none}
  .story .tq-tools-bar{order:0;align-items:center;min-height:40px;cursor:pointer}
  .story .tq-tools-toggle{display:inline-flex;align-items:center;gap:6px;flex:none}
  .story .tq-tools-toggle span{display:inline-block;transition:transform .3s}
  .story .tq-tools-toggle[aria-expanded=true] span{transform:rotate(180deg)}
  .story .tq-tools-body{order:1;display:none}
  .story .tq-tools.is-open .tq-tools-body{display:block}
  .story .tq-out,.story .tq-tools.is-open .tq-out{font-size:14px;line-height:1.4;height:4.2em;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  .story .tq-row .tq-range{flex:1 1 100%}
  .story .tq-btn{min-height:40px;padding:7px 10px;font-size:14px}
  .story .tq-steps{padding:4vh 0 34vh;width:auto}
  .story .tq-beat{min-height:76vh;align-items:center;padding:12px 0}
  .story .tq-ch[data-fig=zoom] .tq-beat{height:78vh;min-height:0;padding:12px 0}
  .story .tq-beat h3{font-size:20px}
  .story .tq-beat p{font-size:15px}
  .story.tq-js .tq-beat-chap,.story.tq-js .tq-step-ch{display:none}
  /* The parked card is centred in the band above the dock (ui.js parkLine), so it may fill that band less 12 px each side. */
  .story.tq-js .tq-beat-card{max-height:max(6em,calc(100svh - var(--tq-dock-h,48px) - 24px))}
  .story .tq-dock{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:0;border-left:0;border-right:0;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
  .story .tq-dbtn{min-height:38px;padding:6px 12px}
  .story .tq-dbtn .tq-lbl,.story .tq-play .tq-lbl{display:none}
  .story .tq-play{min-width:0}
  .story .tq-where{display:block}
  .story .lbl-opt,.story .lbl.lbl-opt{display:none}
  .story .st-legend-p{display:inline}
  .story .lbl-lg{font-size:calc(15px * var(--u))}
  .story .lbl-big{font-size:calc(20px * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  .story *{scroll-behavior:auto!important}
  .story .tq-beat-card,.story .tq-progress i,.story .ph-un,.story .tq-tools-toggle span{transition:none}
}