/* Base reset (standalone build) */
html{-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: graph-paper ground; a sticky plotting "stage" on the right while lesson cards scroll on the left (stacked on phones). */
:root{
  --paper:#F1F4F7; --card:#FFFFFF; --ink:#141C2B; --muted:#57627A; --rule:#D2D9E3;
  --grid:rgba(39,66,224,.065);
  --sample:#2742E0; --pop:#C27700; --miss:#CF2F57;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1219; --card:#141B26; --ink:#E4E9F2; --muted:#97A2B6; --rule:#28324A;
    --grid:rgba(129,151,255,.05);
    --sample:#8499FF; --pop:#F0AE3C; --miss:#FF6B8B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1219; --card:#141B26; --ink:#E4E9F2; --muted:#97A2B6; --rule:#28324A;
  --grid:rgba(129,151,255,.05);
  --sample:#8499FF; --pop:#F0AE3C; --miss:#FF6B8B; color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--paper); color:var(--ink);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.65;
}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
p{margin:0}
a{color:var(--sample)}
:focus-visible{outline:2px solid var(--sample);outline-offset:2px}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sample);font-weight:500}
dfn{font-style:normal;font-weight:600;color:var(--sample)}
.num{font-family:var(--f-mono);font-size:.92em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:end;padding-block:clamp(2.5rem,7vw,5.5rem) 2.5rem}
.hero h1{font-size:clamp(3.2rem,9vw,7.4rem);font-weight:800;letter-spacing:-.035em;line-height:.92;margin-block:.9rem 1.4rem}
.hero h1 span{color:var(--sample)}
.lede{max-width:34rem;font-size:1.18rem;color:var(--ink)}
.lede + .lede{margin-top:.8rem;color:var(--muted);font-size:1rem}
.sheet{border:1px solid var(--rule);background:var(--card);border-radius:6px;padding:1rem 1.1rem 1.1rem}
.sheet-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--rule);padding-bottom:.55rem;margin-bottom:.6rem}
.cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.cells span{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.95rem;text-align:center;padding:.3rem 0;border-radius:3px;animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.cells span:hover{background:var(--sample);color:var(--card)}
@keyframes pop{from{transform:translateY(6px);opacity:.25}to{transform:none;opacity:1}}
.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.4rem}
.toc h3{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.toc ol{margin:0;padding-left:1.3rem;font-size:.92rem;color:var(--muted)}
.toc a{color:inherit;text-decoration:none}
.toc a:hover{color:var(--sample);text-decoration:underline}
.cue{display:inline-flex;gap:.5rem;align-items:center;margin-top:1.6rem;font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.cue i{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px) rotate(45deg)}}

/* scrollytelling */
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);position:relative}
.stage-wrap{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 1rem);height:calc(100vh - 2rem);height:calc(100svh - 2rem);align-self:start;z-index:2}
.stage{position:relative;height:100%;border:1px solid var(--rule);background:var(--card);border-radius:6px;overflow:hidden}
#cv{display:block;width:100%;height:100%}
.readout{position:absolute;top:12px;left:14px;right:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;font-family:var(--f-mono);font-size:.74rem;color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}
.readout .chip{color:var(--sample);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.readout b{color:var(--ink);font-weight:700}
.steps{grid-column:1;grid-row:1;padding-bottom:35vh}
.step{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:2rem}
.step:first-child{min-height:80vh}
.card{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:clamp(1.2rem,2.5vw,1.8rem);display:flex;flex-direction:column;gap:.9rem;transition:border-color .4s,box-shadow .4s;min-width:0;width:100%}
.step.is-active .card{border-color:var(--sample);box-shadow:0 0 0 3px color-mix(in srgb,var(--sample) 14%,transparent)}
.card h2{font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.02em}
.formula{font-family:var(--f-mono);font-size:.86rem;line-height:1.6;background:var(--paper);border:1px dashed var(--rule);border-radius:4px;padding:.6rem .8rem;overflow-x:auto;white-space:pre;font-variant-numeric:tabular-nums}
.card ol,.card dl{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.card dl{padding-left:0}
.card dt{font-weight:600}
.card dd{margin:0 0 .2rem 0;color:var(--muted)}
.note{font-size:.95rem;color:var(--muted)}
.key{display:inline-block;width:.65em;height:.65em;border-radius:50%;vertical-align:.05em;margin-right:.15em}
.key.s{background:var(--sample)} .key.p{background:var(--pop)} .key.m{background:var(--miss)}
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.8rem}
.ctrl .lab{color:var(--muted);margin-right:.25rem}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button,.btn{font:inherit;background:transparent;color:var(--ink);border:0;padding:.38rem .7rem;cursor:pointer;font-variant-numeric:tabular-nums}
.seg button + button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.btn{border:1px solid var(--rule);border-radius:4px}
.seg button:hover:not([aria-pressed="true"]),.btn:hover{background:var(--paper)}
input[type=range]{accent-color:var(--sample);flex:1 1 9rem;min-width:0}
.verdict{border-radius:4px;padding:.65rem .8rem;font-size:.95rem;border:1px solid var(--rule);background:var(--paper)}
.verdict b{font-family:var(--f-display)}
.verdict.rej{border-color:var(--miss)}
.verdict.rej b{color:var(--miss)}

/* recap */
.recap{padding-block:4rem 3rem}
.recap h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin-block:.6rem 2rem}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.col{border-top:3px solid var(--ink);padding-top:1rem;min-width:0}
.col.inf{border-top-color:var(--sample)}
.col h3{font-size:1.4rem;font-weight:700;margin-bottom:.3rem}
.col > p{color:var(--muted);margin-bottom:1rem;font-size:.95rem}
.col dl{margin:0;display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.55rem 1rem;font-size:.95rem}
.col dt{font-family:var(--f-mono);font-size:.8rem;padding-top:.2rem}
.col dd{margin:0}
footer{padding-block:2rem 3rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.9rem}
footer p{max-width:46rem}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .scrolly{grid-template-columns:minmax(0,1fr);gap:0}
  .stage-wrap{grid-column:1;grid-row:1;top:env(safe-area-inset-top,0px);height:48vh;height:48svh;padding-block:.5rem;background:var(--paper);margin-inline:-4px}
  .steps{grid-column:1;grid-row:2;padding-bottom:30vh}
  .step,.step:first-child{min-height:85vh;min-height:85svh;align-items:flex-start;padding-block:1.5rem}
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .cells span{font-size:.8rem}
  .toc{grid-template-columns:minmax(0,1fr)}
  .col dl{grid-template-columns:minmax(0,1fr)}
  .col dt{padding-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .cells span,.cue i{animation:none}
  .card{transition:none}
}