@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:200 900;font-style:normal;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:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  /* light: salt-white paper */
  --bg:#f5f0e6;--surface:#fbf8f1;--card:rgba(251,248,241,.94);--text:#1b1814;--muted:#4b443a;--rule:#d8cfbe;--accent:#a3361f;--accent-ink:#8a2714;--focus:#0b57b0;
  --water:#0e7f95;--salt:#c9b9ae;--earth:#6b5a4a;--ember:#c8402a;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--top:52px;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0c11;--surface:#11151c;--card:rgba(13,16,23,.9);--text:#eef0f4;--muted:#b8bfcb;--rule:#262d38;--accent:#f0a95b;--accent-ink:#f4bb7b;--focus:#8ab8ff;--water:#46c9db;--salt:#efe2dc;--earth:#2a2430;--ember:#ff6a57;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a0c11;--surface:#11151c;--card:rgba(13,16,23,.9);--text:#eef0f4;--muted:#b8bfcb;--rule:#262d38;--accent:#f0a95b;--accent-ink:#f4bb7b;--focus:#8ab8ff;--water:#46c9db;--salt:#efe2dc;--earth:#2a2430;--ember:#ff6a57;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
strong{font-weight:650}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--text);padding:8px 12px;z-index:50}.skip-link:focus{left:8px}

.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font:500 14px/1 var(--sans)}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap}
.brand-mark{width:14px;height:14px;border-radius:50% 50% 2px 2px;background:linear-gradient(180deg,var(--salt),var(--accent))}
.topnav{display:flex;gap:16px;margin-left:12px}.topnav a{color:var(--muted);text-decoration:none}.topnav a:hover{color:var(--text)}
.spacer{flex:1}
.chip{color:var(--muted);text-decoration:none;padding:7px 8px;border-radius:6px}.chip[aria-current="page"]{color:var(--text);background:var(--surface);border:1px solid var(--rule)}
.icon-btn{border:1px solid var(--rule);background:transparent;color:var(--text);border-radius:8px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
:root[data-theme="dark"] .i-moon,:root:not([data-theme]) .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) .i-moon{display:inline}:root:not([data-theme]) .i-sun{display:none}}
@media (max-width:760px){.topnav{display:none}}

/* story */
.story{position:relative}
.stage{position:sticky;top:var(--top);height:calc(100vh - var(--top));height:calc(100svh - var(--top));overflow:hidden;background:var(--bg);z-index:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .7s ease}
.stage canvas[data-off]{opacity:0;pointer-events:none}
.stage-tag{position:absolute;right:14px;bottom:14px;font:500 12px/1.3 var(--sans);color:var(--text);background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--rule);padding:6px 10px;border-radius:999px;pointer-events:none;max-width:70%;text-align:right}
.legend{position:absolute;left:14px;bottom:14px;font:500 12px/1.3 var(--sans);color:var(--text);background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid var(--rule);padding:8px 10px;border-radius:10px;pointer-events:none}
.lg-ramp{display:block;height:8px;width:180px;margin:5px 0 3px;border-radius:4px;background:linear-gradient(90deg,#ff3082,#ff3a30 18%,#ff7030 34%,#d69646 50%,#7e8794 60%,#7e8794 74%,#56b6de)}
.lg-l{display:flex;justify-content:space-between;color:var(--muted)}
.steps{position:relative;z-index:1;margin-top:calc(-100vh + var(--top));margin-top:calc(-100svh + var(--top))}
.step,.hero{min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top));display:flex;align-items:center;padding:6vh clamp(16px,4vw,56px)}
.step.tall{min-height:150svh}
.hero{flex-direction:column;align-items:flex-start;justify-content:center}
.card{max-width:31rem;background:var(--card);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid var(--rule);border-radius:16px;padding:1.3rem 1.5rem;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.card h2{font:600 1.55rem/1.2 var(--serif);margin:0 0 .6rem;letter-spacing:-.01em}
.card p{margin:.55rem 0}
.card .meta{font:500 .82rem/1.45 var(--sans);color:var(--muted)}
.card .date{font:600 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .5rem}
.card .big{font:600 2.3rem/1 var(--serif);color:var(--accent-ink)}
.anchor{opacity:0;margin-left:.4rem;text-decoration:none;font-size:.8em}.card h2:hover .anchor,.anchor:focus{opacity:.8}
.hero .h1wrap{max-width:40rem;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 40%,transparent));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:1.4rem 1.6rem;border-radius:18px}
.kicker{font:600 .78rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .6rem}
h1{font:600 clamp(2.4rem,6.4vw,4.6rem)/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 .8rem}
.deck{font-size:1.15rem;line-height:1.55;max-width:38rem;margin:0 0 1.1rem}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn{font:600 .95rem/1 var(--sans);border:1px solid var(--accent-ink);background:var(--accent);color:#14100a;border-radius:10px;padding:.8rem 1.1rem;cursor:pointer;text-decoration:none;display:inline-block}
:root:not([data-theme="dark"]) .btn{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#14100a}}
:root[data-theme="dark"] .btn{color:#14100a}

.scroll-hint{font:500 .85rem/1 var(--sans);color:var(--muted);margin-top:1.4rem}

.chart-card{max-width:31rem}

/* explorer */
.explorer{padding:56px clamp(16px,4vw,56px) 64px;border-top:1px solid var(--rule);background:var(--bg)}
.ex-head{max-width:46rem;margin:0 auto 1.2rem}
.ex-head h2{font:600 clamp(1.8rem,4vw,2.6rem)/1.1 var(--serif);margin:0 0 .6rem;letter-spacing:-.015em}
.ex-grid{display:grid;grid-template-columns:minmax(300px,24rem) 1fr;gap:22px;max-width:76rem;margin:0 auto;align-items:start}
.ex-side{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:1.1rem 1.2rem}
.field{display:block;margin:.2rem 0 .8rem;position:relative}
.field label{display:block;font:600 .8rem/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.field input{width:100%;font:500 1.05rem/1.2 var(--sans);padding:.8rem .9rem;border-radius:10px;border:1px solid var(--rule);background:var(--bg);color:var(--text)}
.sugg{list-style:none;margin:-.5rem 0 .8rem;padding:0;border:1px solid var(--rule);border-radius:10px;background:var(--bg);max-height:15rem;overflow:auto;font:500 .95rem/1.3 var(--sans)}
.sugg:empty{display:none}
.sugg li{padding:.55rem .8rem;cursor:pointer;border-bottom:1px solid var(--rule)}.sugg li:last-child{border:0}
.sugg li:hover,.sugg li[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.sugg small{display:block;color:var(--muted);font-weight:400}
.examples{font:500 .88rem/1.7 var(--sans);color:var(--muted);margin:.2rem 0 .8rem}
.examples button{font:inherit;color:var(--accent-ink);background:none;border:0;padding:0 .5rem 0 0;cursor:pointer;text-decoration:underline}
.result{font:400 1rem/1.5 var(--sans)}
.res-big{font:600 3rem/1 var(--serif);letter-spacing:-.02em;margin:.2rem 0}
.res-big small{font:500 1rem/1 var(--sans);color:var(--muted);letter-spacing:0}
.res-verdict{font:600 1.1rem/1.3 var(--serif);margin:.2rem 0 .6rem}
.res-verdict.down{color:var(--ember)}.res-verdict.up{color:var(--water)}
.res-table{width:100%;border-collapse:collapse;font:500 .9rem/1.4 var(--sans);margin:.6rem 0}
.res-table td{padding:.35rem 0;border-top:1px solid var(--rule);vertical-align:top}.res-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.res-note{font:400 .84rem/1.5 var(--sans);color:var(--muted)}
.stagebox{position:sticky;top:calc(var(--top) + 10px);height:calc(100svh - var(--top) - 24px);min-height:360px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--bg)}
.stagebox canvas{width:100%;height:100%;display:block}
@media (max-width:860px){.ex-grid{grid-template-columns:1fr}.stagebox{position:relative;top:0;height:58svh;order:-1}.explorer{padding:36px 14px}}

/* method */
.method{max-width:46rem;margin:0 auto;padding:48px clamp(16px,4vw,32px) 80px;border-top:1px solid var(--rule)}
.method h2{font:600 1.7rem/1.2 var(--serif);margin:2.2rem 0 .6rem}
.method h2:first-child{margin-top:0}
.method p,.method li{font-size:1rem;line-height:1.6}
.method ul{padding-left:1.2rem}
.src{font:400 .88rem/1.55 var(--sans)}
.src li{margin:.3rem 0}
footer{max-width:46rem;margin:0 auto;padding:24px clamp(16px,4vw,32px) 60px;font:400 .85rem/1.5 var(--sans);color:var(--muted);border-top:1px solid var(--rule)}
footer a{color:var(--muted)}

/* phones: stage pinned on top, cards scroll under it */
@media (max-width:760px){
  body{font-size:17px}
  .stage{height:46vh;height:46svh;z-index:5;border-bottom:1px solid var(--rule)}
  .steps{margin-top:0}
  .hero,.step{min-height:0;display:block;padding:24px 16px 34vh}
  .step.tall{min-height:0;padding-bottom:50vh}
  .hero{padding-top:26px;padding-bottom:46vh}
  .card{max-width:none;box-shadow:none}
  .hero .h1wrap{background:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .step,.hero{scroll-margin-top:calc(var(--top) + 46svh)}
  .stage-tag{max-width:92%;bottom:8px;right:8px;font-size:11px}
  .legend{display:none}
}
@media (prefers-reduced-motion:reduce){.stage canvas{transition:none}}

:root .btn.ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.res-table td:first-child{width:62%;padding-right:.6rem}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}.zoom button{width:40px;height:40px;border-radius:10px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--text);font:600 22px/1 var(--sans);cursor:pointer}
.stagebox canvas{touch-action:pan-y}