/* Layout: one narrow centered column. Hero answers in three words; each
   "Didn't get it?" opens one deeper layer with its own 3D stage, so the page
   stays almost empty until the reader asks for more. */
:root{
  --bg:#F3F6F5; --surface:#FFFFFF; --stage:#DCE6E4; --stage-2:#F9FBFB;
  --ink:#0F1E21; --muted:#56696C; --line:#CDD9D8;
  --accent:#0B7A5E; --accent-soft:#D5EEE6; --accent-ink:#FFFFFF;
  --warn:#B23A3A; --warn-soft:#F7DEDC; --amber:#B7791F;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1315; --surface:#132024; --stage:#091012; --stage-2:#1A2B2F;
  --ink:#E6EFEE; --muted:#93A8AB; --line:#24363A;
  --accent:#4FD1A5; --accent-soft:#12352B; --accent-ink:#04140F;
  --warn:#F07B7B; --warn-soft:#3A1C1C; --amber:#F2B65C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1315; --surface:#132024; --stage:#091012; --stage-2:#1A2B2F;
  --ink:#E6EFEE; --muted:#93A8AB; --line:#24363A;
  --accent:#4FD1A5; --accent-soft:#12352B; --accent-ink:#04140F;
  --warn:#F07B7B; --warn-soft:#3A1C1C; --amber:#F2B65C; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
.page{max-width:760px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:20px 48px;display:grid;gap:96px}
a{color:inherit}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--display);font-stretch:68%;font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(64px,14vw,132px);line-height:.86}
h2{font-size:clamp(38px,7.4vw,60px);line-height:.95}
p{margin:0}
.eyebrow{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.say{font-size:19px;color:var(--muted);max-width:56ch}

.top{display:flex;justify-content:space-between;align-items:center}
.brand{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.02em}
.top-link{font-size:15px;color:var(--muted);text-decoration:none}
.top-link:hover{color:var(--ink)}

/* Hero */
.hero{display:grid;gap:28px;justify-items:start;padding-top:40px}
.stamp{width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 40px var(--display);box-shadow:0 0 0 8px var(--accent-soft)}
.lead{font-size:clamp(20px,3vw,24px);max-width:30ch;color:var(--muted)}
.trio{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;border-top:1px solid var(--line);padding-top:20px}
.trio li{display:grid;gap:2px}
.trio b{font-family:var(--display);font-stretch:68%;font-size:26px;font-weight:800}
.trio span{color:var(--muted);font-size:15px}
@media (max-width:560px){.trio{grid-template-columns:1fr;gap:14px}}

/* The ladder */
.more{justify-self:start;border:0;background:var(--ink);color:var(--bg);border-radius:999px;padding:14px 22px;font-weight:700;display:inline-flex;gap:8px;align-items:center}
.more span{color:var(--accent-soft)}
.more::after{content:"↓";margin-left:4px}
.more[aria-expanded="true"]{opacity:.35;pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(110% 85% at 50% 30%,var(--stage-2),var(--stage) 78%);touch-action:pan-y}
.stage canvas{display:block;width:100%;height:100%}
@media (max-width:560px){.stage{aspect-ratio:4/5}}
.row{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--accent);background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:11px 18px;font-weight:700}
.pill.warn{border-color:var(--warn);background:var(--warn-soft)}

/* Proof */
.proof,.uses,.contact{display:grid;gap:22px;justify-items:start}
.run{border:0;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:15px 26px;font-weight:700}
.run:disabled{opacity:.5;cursor:wait}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;align-items:baseline}
.checks li::before{content:"✓";grid-row:span 2;font-weight:800;color:var(--accent)}
.checks li.bad::before{content:"✕";color:var(--warn)}
.checks b{font-weight:700}
.checks span{color:var(--muted);font-size:15px;overflow-wrap:anywhere}

/* Uses */
.use-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;width:100%;border-top:1px solid var(--line)}
.use-list li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.use-list li:nth-child(odd){padding-right:20px}
.use-list b{font-weight:700}
.use-list span{color:var(--muted);font-size:15px}
@media (max-width:560px){.use-list{grid-template-columns:1fr}.use-list li:nth-child(odd){padding-right:0}}

/* Contact */
.contact h2{font-size:clamp(48px,10vw,88px)}
.mail{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--mono)}
.mail span{user-select:all;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mail button{border:0;border-radius:12px;background:var(--ink);color:var(--bg);padding:12px 16px;font-family:var(--body);font-weight:700}
.foot{color:var(--muted);font:500 12px var(--mono);letter-spacing:.04em}
.badge{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:6;font:500 11px var(--mono);padding:6px 10px;border-radius:6px;background:var(--ink);color:var(--bg)}
@media (prefers-reduced-motion:reduce){.rung{animation:none}}

/* ---- Chapters ---- */
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
.toc a{display:flex;gap:12px;align-items:baseline;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;font-weight:700}
.toc a:hover{border-color:var(--ink)}
.toc b{font:800 22px var(--display);font-stretch:68%;color:var(--accent)}
@media (max-width:560px){.toc{grid-template-columns:1fr}}
.chapter{display:grid;gap:22px;justify-items:start;scroll-margin-top:16px}
.chapter>*{max-width:100%}
.k{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.k b{color:var(--ink)}
.lab{width:100%;display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.lab.tight{padding:16px;background:var(--bg)}
.field{width:100%;font:500 18px var(--mono);padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.field:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hash-out{font:500 15px/1.7 var(--mono);overflow-wrap:anywhere;letter-spacing:.02em}
.hash-out span{transition:background .4s}
.hash-out .diff{background:var(--accent-soft);color:var(--accent);border-radius:3px}
.meter{color:var(--muted);font-size:15px;min-height:1.4em}
.meter.ok{color:var(--accent);font-weight:700}
.meter.bad{color:var(--warn);font-weight:700}
.claim{font-size:17px;max-width:60ch;padding-left:16px;border-left:3px solid var(--accent)}
.claim b{display:block;font:800 22px var(--display);font-stretch:68%;margin-bottom:4px}
.rung{display:grid;gap:18px;justify-items:start;width:100%;animation:rise .45s ease-out}
.rung>*{max-width:100%}
.kid{padding:20px;border-radius:18px;background:var(--accent-soft)}
.kid-line{font-size:20px;line-height:1.5;max-width:52ch}
.kid-line b{display:block;font:800 30px var(--display);font-stretch:68%;margin-bottom:6px}
.eq{width:100%;border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:15px}
.eq summary{cursor:pointer;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.eq p{margin-top:10px;max-width:64ch}
.eq code{font-family:var(--mono);font-size:.92em}
.seg-b{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:700}
.seg-b[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.box-out{display:grid;gap:4px}
.box-c{font:800 40px var(--display);font-stretch:68%}
.box-out code{font:500 15px var(--mono);color:var(--muted)}
.box-real{font:500 12px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.opens{display:grid;gap:6px}
.open-row{font:500 15px var(--mono);padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.open-row.mine{border-color:var(--accent);background:var(--accent-soft)}
.rounds{display:flex;flex-wrap:wrap;gap:6px;min-height:18px}
.dot{width:16px;height:16px;border-radius:50%;background:var(--accent)}
.dot.bad{background:var(--warn)}
.tx{display:grid;gap:8px}
.tx-row{display:grid;grid-template-columns:120px 1fr;gap:2px 12px;align-items:baseline}
.tx-row b{font:700 14px var(--body)}
.tx-row code{font:500 14px var(--mono);overflow-wrap:anywhere}
.tx-row span{grid-column:2;color:var(--muted);font-size:14px}
@media (max-width:560px){.tx-row{grid-template-columns:1fr}.tx-row span{grid-column:1}}
.leaves{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.leaf{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px 6px;font-weight:700}
.leaf.mine{border-color:var(--ink)}
.leaf.bad{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.top-nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end}