@font-face{font-family:"Literata";src:url(fonts/literata-latin.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";src:url(fonts/literata-latin-ext.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2");font-display:swap}

/* Scene tokens stay dark in both themes; page chrome follows the theme. */
:root{
  --night:#06080d;--glass:rgba(9,12,19,.84);--glass-edge:rgba(255,255,255,.12);
  --on-glass:#f1f3f7;--on-glass-mut:#cfd5df;--blood:#ff5c66;--wave:#fff1cf;--wave-soft:#ffd98a;
  --bg:#0b0f16;--paper:#10151f;--ink:#eef1f6;--mut:#c3cad6;--line:#2a3140;--acc:#ff8a8f;--focus:#ffd98a;
  --serif:"Literata",Georgia,"Times New Roman",serif;--mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f6f4f0;--paper:#fbfaf7;--ink:#15161a;--mut:#3b3f47;--line:#d8d3ca;--acc:#a1161f;--focus:#8a4b00}}
:root[data-theme="light"]{--bg:#f6f4f0;--paper:#fbfaf7;--ink:#15161a;--mut:#3b3f47;--line:#d8d3ca;--acc:#a1161f;--focus:#8a4b00}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font:400 1.0625rem/1.62 var(--serif);font-optical-sizing:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
table.sr-only{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--paper);color:var(--ink);padding:.5rem .8rem}
.skip:focus{left:.5rem;top:.5rem}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;height:3rem;padding:0 1rem;background:var(--bg);border-bottom:1px solid var(--line);font:500 .82rem/1 var(--mono);white-space:nowrap}
.topbar a{text-decoration:none;color:var(--ink)}
.home{font-weight:600}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--mut)}
.topnav a:hover{color:var(--ink)}
.spacer{flex:1}
.chip{border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem}
.icon-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;flex:none}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
section{scroll-margin-top:3.5rem}

/* scene */
#scene{position:fixed;inset:3rem 0 0 0;width:100%;height:calc(100% - 3rem);display:none;z-index:0;background:radial-gradient(ellipse at 60% 40%,#111827 0%,var(--night) 70%)}
.js #scene{display:block}

/* story column */
main{position:relative;z-index:2}
.hero,.step{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:4rem 1rem}
.card{max-width:34rem;background:var(--glass);color:var(--on-glass);border:1px solid var(--glass-edge);border-radius:14px;padding:1.4rem 1.5rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card p{margin:.8rem 0 0;color:var(--on-glass-mut)}
.card b{color:var(--on-glass);font-weight:600}
.card h2{margin:0;font-size:1.45rem;line-height:1.25;font-weight:600;color:var(--on-glass)}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.hero-card{max-width:40rem}
.kicker{font:500 .78rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wave-soft)!important;margin:0!important}
h1{margin:.5rem 0 0;font-size:clamp(2.1rem,6.4vw,4rem);line-height:1.06;font-weight:500;letter-spacing:-.01em;color:var(--on-glass)}
.deck{font-size:1.12rem;color:var(--on-glass)!important}
.inputs{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1.1rem;font:500 .85rem/1.2 var(--mono);color:var(--on-glass-mut)}
.inputs label{display:flex;flex-direction:column;gap:.35rem}
.field{display:flex;align-items:center;gap:.4rem}
.inputs input{width:5.2rem;font:500 1.1rem/1 var(--mono);color:var(--on-glass);background:rgba(255,255,255,.06);border:1px solid var(--glass-edge);border-radius:8px;padding:.5rem .55rem;min-height:44px}
.you{color:var(--wave)!important}
html:not(.js) .js-only{display:none!important}
.last{font-size:1.25rem;color:var(--on-glass)!important}

/* chart */
.chart{margin:1rem 0 0}
.chart figcaption{font:500 .78rem/1.35 var(--mono);color:var(--on-glass-mut)}
.chart svg{display:block;width:100%;height:auto;margin-top:.4rem}
.chart .grid{stroke:rgba(255,255,255,.1)}
.chart .ax{fill:var(--on-glass-mut);font:12px var(--mono)}
.chart .ref{stroke:var(--wave-soft);stroke-dasharray:4 4}
.chart .reft{fill:var(--wave-soft);font:12px var(--mono);text-anchor:end}
.chart .rng{fill:rgba(255,241,207,.16)}
.chart .med{stroke:var(--on-glass);stroke-width:2.5}
.chart .mv{fill:var(--on-glass);font:13px var(--mono)}
.chart .band.on .rng{fill:rgba(255,92,102,.45)}
.chart .band.on .med{stroke:var(--blood)}
.chart .note{font:.78rem/1.4 var(--mono)}

/* sources, footer */
.block{position:relative;z-index:2;background:var(--paper);color:var(--ink);padding:3rem 1rem 2rem;border-top:1px solid var(--line)}
.block>*{max-width:44rem;margin-left:auto;margin-right:auto}
.block h2{font-size:1.4rem;margin-top:0}
.block h2 a{text-decoration:none}
.method{color:var(--mut)}
.srcs{padding-left:1.2rem;color:var(--mut);font-size:.95rem}
.srcs li{margin:.5rem 0}
.srcs a{color:var(--acc);overflow-wrap:anywhere}
.foot{position:relative;z-index:2;background:var(--paper);color:var(--mut);padding:1rem 1rem 9rem;font:.8rem/1.5 var(--mono);text-align:center}
.foot a{color:var(--ink)}

/* rail */
.rail{position:fixed;right:.7rem;top:50%;transform:translateY(-50%);z-index:5;display:none;flex-direction:column;gap:.9rem}
.js .rail{display:flex}
.rail a{display:block;width:12px;height:12px;display:grid;place-items:center}
.rail i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.rail a.on i{background:var(--wave);transform:scale(1.4)}

/* HUD: the only place the reader taps; the canvas never takes the tap */
.hud{position:fixed;left:50%;bottom:max(.8rem,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;width:min(34rem,calc(100% - 1.5rem));display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;align-items:center;background:var(--glass);color:var(--on-glass);border:1px solid var(--glass-edge);border-radius:14px;padding:.7rem .8rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:.8rem/1.3 var(--mono)}
.hud[hidden]{display:none}
.beat{grid-row:span 2;display:flex;align-items:center;gap:.45rem;min-height:52px;padding:0 1.2rem;border-radius:999px;border:0;background:var(--blood);color:#000;font:600 1.05rem/1 var(--serif);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.beat:active,.beat.pulse{transform:scale(.96);filter:brightness(1.15)}
.meter p{margin:0;color:var(--on-glass)}
.meter .bl{color:var(--on-glass-mut);margin-top:.15rem}
.bar{height:4px;border-radius:2px;background:rgba(255,255,255,.14);margin-top:.35rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--blood);transition:width .35s ease}
.link{background:none;border:0;padding:.35rem 0;color:var(--on-glass-mut);font:.78rem/1.2 var(--mono);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start;min-height:32px}
.arrived{grid-column:1/-1;margin:0;color:var(--wave);font:.85rem/1.35 var(--serif)}
.arrived:empty{display:none}

@media (min-width:900px){
  .hero,.step{padding-left:6vw}
  .step .card{margin-left:0}
}
@media (max-width:899px){
  .step{align-items:flex-end;padding-bottom:10rem}
  .hero{align-items:flex-end;padding-bottom:10rem}
  .rail{display:none!important}
}
@media (max-width:420px){
  .topbar{gap:.55rem;padding:0 .6rem;font-size:.76rem}
  .card{padding:1.1rem 1.1rem}
  .hud{grid-template-columns:auto 1fr;padding:.6rem}
  .beat{padding:0 .9rem}
}