@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --bg:#0a0a12; --bg2:#0d0d18; --panel:#151426; --panel2:#1c1a30; --ink:#eceafc; --soft:#a49ecb;
  --line:rgba(255,255,255,.10); --green:#34d399; --lime:#a3e635; --cyan:#22d3ee; --amber:#fbbf24;
  --rose:#fb7185; --blue:#60a5fa; --violet:#a78bfa; --p:var(--violet);
  --kw:#f0a4c8; --str:#a3e635; --num:#f4c66a; --cmt:#6f6a8d;
  --disp:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:
  radial-gradient(1000px 500px at 85% -5%,rgba(167,139,250,.16),transparent 60%),
  radial-gradient(900px 500px at 5% 0%,rgba(34,211,238,.10),transparent 55%),
  linear-gradient(180deg,var(--bg),var(--bg2));background-attachment:fixed;color:var(--ink);line-height:1.6}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.15;font-weight:700}
a{color:var(--violet)}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}

nav{position:sticky;top:0;z-index:50;background:rgba(10,10,18,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px 20px}
nav .brand{font-family:var(--disp);font-weight:700;color:var(--p);margin-right:auto;font-size:1rem;text-decoration:none}
nav a.link{color:#cfc7ee;text-decoration:none;font-size:.8rem;padding:5px 11px;border-radius:100px}
nav a.link:hover{background:var(--panel);color:#fff}
.exall{background:var(--p);color:#120a24;border:none;border-radius:100px;font-family:var(--disp);font-weight:700;font-size:.78rem;padding:6px 13px;cursor:pointer}

header.hero{padding:44px 0 8px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
  border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);padding:5px 13px;border-radius:100px;display:inline-block}
header.hero h1{font-size:clamp(1.8rem,4.6vw,2.7rem);margin:16px 0 10px;
  background:linear-gradient(90deg,#c4b5fd,#a5f3fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header.hero p{color:#dcd6f2;max-width:720px;font-size:1.02rem}

.callout{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--p);border-radius:0 12px 12px 0;padding:14px 16px;margin:16px 0;color:#ded9f2;font-size:.94rem}
.callout.key{border-left-color:var(--cyan)}
.callout.warn{border-left-color:var(--amber);background:rgba(251,191,36,.06)}
.callout b{color:#fff}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--soft);margin:10px 0 4px}
.legend b{color:#dcd6f2}

.vocab{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
@media(max-width:640px){.vocab{grid-template-columns:repeat(2,1fr)}}
.vc{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--p);border-radius:12px;padding:12px;text-align:center}
.vc .w{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);font-weight:700}
.vc .d{font-size:.82rem;color:#cbc4e2;margin-top:5px}

/* CELL */
.cell{margin:26px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--panel),#12101f)}
.cell .top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(167,139,250,.06)}
.cell .cn{width:34px;height:34px;flex:none;border-radius:9px;background:var(--p);color:#120a24;font-family:var(--disp);font-weight:700;display:grid;place-items:center}
.cell .tt{flex:1}
.cell .tt h3{color:#fff;font-size:1.06rem}
.cell .tt .pp{color:var(--soft);font-size:.86rem;margin-top:1px}
.cell .exc{background:transparent;color:var(--p);border:1px solid var(--line);border-radius:100px;font-family:var(--disp);font-weight:700;font-size:.72rem;padding:5px 11px;cursor:pointer;white-space:nowrap}
.cell .exc:hover{border-color:var(--p)}
.gain{margin:0;padding:11px 16px;background:rgba(34,211,238,.06);border-bottom:1px solid var(--line);color:#ded9f2;font-size:.88rem}
.gain b{color:var(--cyan)}

.code{padding:8px 0}
.ln{padding:0}
.ln.blank{height:12px}
.ln .row{display:flex;align-items:flex-start;gap:10px;padding:3px 16px;cursor:pointer;transition:background .12s;border-left:3px solid transparent}
.ln.clk .row:hover{background:rgba(167,139,250,.06);border-left-color:rgba(167,139,250,.4)}
.ln .gut{flex:none;width:22px;text-align:right;color:#514a6b;font-family:var(--mono);font-size:.78rem;user-select:none;padding-top:2px}
.ln pre{margin:0;flex:1;overflow-x:auto}
.ln code{font-family:var(--mono);font-size:.86rem;color:#e0d9f2;white-space:pre;line-height:1.7}
.ln .chev{flex:none;color:var(--p);font-size:.8rem;opacity:0;transition:.2s;padding-top:3px}
.ln.clk .row:hover .chev{opacity:.7}
.ln.on .chev{opacity:1;transform:rotate(90deg)}
.tok.kw{color:var(--kw)} .tok.str{color:var(--str)} .tok.num{color:var(--num)} .tok.cmt{color:var(--cmt);font-style:italic}
.ln.cmt code{color:var(--cmt);font-style:italic}

.exp{max-height:0;overflow:hidden;transition:max-height .35s;margin:0 16px 0 48px}
.ln.on .exp{max-height:700px}
.exp .in{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--p);border-radius:0 10px 10px 0;padding:12px 14px;margin:4px 0 10px;color:#ded9f2;font-size:.92rem}
.exp .in code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px;color:#f2ecff}
.exp .deep{margin-top:10px}
.exp .deepbtn{background:transparent;border:1px dashed var(--line);color:var(--soft);border-radius:8px;font-size:.76rem;font-family:var(--mono);padding:4px 10px;cursor:pointer}
.exp .deepbtn:hover{border-color:var(--p);color:var(--p)}
.exp .deeptext{max-height:0;overflow:hidden;transition:max-height .3s;color:#c8c0e0;font-size:.88rem}
.exp .deeptext.show{max-height:500px;margin-top:8px}

.output{margin:6px 16px 14px 48px;background:#0c0b16;border:1px dashed rgba(167,139,250,.3);border-radius:10px;padding:10px 13px;font-family:var(--mono);font-size:.8rem;color:#c3b9e6;white-space:pre-wrap}
.output .lab{color:var(--soft);font-style:normal;display:block;margin-bottom:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

/* RUNNER */
.runner{margin:8px 16px 6px;background:#0c0b16;border:1px solid var(--line);border-radius:12px;padding:12px}
.rlabel{font-size:.82rem;color:var(--soft);margin-bottom:8px}
.rlabel b{color:#dcd6f2}
textarea.editor{width:100%;min-height:150px;background:#0a0913;color:#e0d9f2;border:1px solid var(--line);border-radius:9px;font-family:var(--mono);font-size:.84rem;line-height:1.6;padding:12px;resize:vertical;white-space:pre;tab-size:4}
textarea.editor:focus{outline:none;border-color:var(--p)}
.rbar{display:flex;align-items:center;gap:12px;margin-top:10px}
.runbtn{background:#0b0a13;color:#fff;border:1px solid var(--p);border-radius:100px;font-family:var(--disp);font-weight:700;font-size:.9rem;padding:9px 18px;cursor:pointer}
.runbtn:hover{background:var(--p);color:#120a24}
.runbtn:disabled{opacity:.6;cursor:progress}
.rstatus{font-family:var(--mono);font-size:.78rem;color:var(--soft)}
.runout{margin-top:12px;background:#0a0913;border:1px dashed rgba(167,139,250,.3);border-radius:9px;padding:10px 12px;min-height:36px}
.runout .lab{color:var(--soft);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
.runout .hint{color:var(--soft);font-size:.84rem}
.runout pre.ptext{font-family:var(--mono);font-size:.82rem;color:#c3b9e6;white-space:pre-wrap;margin:0}
.runout pre.perr{font-family:var(--mono);font-size:.8rem;color:#fca5b5;white-space:pre-wrap;margin:0 0 6px}
.runout img{max-width:100%;border-radius:8px;margin-top:8px;background:#fff}

/* CHECKPOINT */
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.qcard.chk{margin:2px 16px 18px;border-left:4px solid var(--amber)}
.qcard p.q{font-weight:600;color:#fff;margin-bottom:10px;font-family:var(--disp)}
.qopt{display:block;width:100%;text-align:left;padding:10px 12px;margin:6px 0;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;cursor:pointer;font-size:.94rem}
.qopt:hover{border-color:var(--p)}
.qopt.correct{border-color:var(--cyan);background:rgba(34,211,238,.14)}
.qopt.wrong{border-color:var(--rose);background:rgba(251,113,133,.12)}
.qexp{font-size:.88rem;color:#b6accf;margin-top:8px;display:none}.qexp.show{display:block}

/* SECTION HEADINGS between cells */
.phase{margin:34px 0 6px;padding-top:20px;border-top:1px dashed var(--line)}
.phase .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.phase h2{font-size:clamp(1.4rem,3vw,1.8rem);margin:6px 0 4px;color:#fff}
.phase p{color:#cbc4e2;font-size:.95rem}

/* map cards on the hub */
.grid{display:grid;gap:14px;margin-top:16px}
.g1{grid-template-columns:1fr}
.ddcard{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-left:5px solid var(--c,var(--p));border-radius:16px;padding:16px 18px;text-decoration:none;transition:transform .16s,box-shadow .16s}
.ddcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.ddcard .num{font-family:var(--disp);font-weight:700;font-size:1.8rem;color:var(--c,var(--p));text-align:center;line-height:1}
.ddcard .num small{display:block;font-size:.5rem;letter-spacing:.12em;color:var(--soft);font-family:var(--mono);margin-top:3px}
.ddcard h3{color:#fff;font-size:1.15rem}
.ddcard .say{color:var(--soft);font-size:.86rem;margin-top:2px}
.ddcard .go{color:var(--c,var(--p));font-family:var(--disp);font-weight:700;font-size:.85rem;white-space:nowrap}
@media(max-width:560px){.ddcard{grid-template-columns:48px 1fr}.ddcard .go{display:none}}

footer{padding:34px 20px 60px;text-align:center;color:var(--soft);font-size:.86rem;border-top:1px solid var(--line);margin-top:24px}
.btn{display:inline-block;background:var(--p);color:#120a24;font-family:var(--disp);font-weight:700;border:none;padding:11px 22px;border-radius:100px;font-size:.92rem;cursor:pointer;text-decoration:none;margin:4px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}