:root{
  --bg:#0b0f14; --bg2:#111820; --panel:#131b24; --line:#22303f; --line2:#2d3f52;
  --fg:#d9e3ee; --muted:#8496a9; --accent:#00add8; --accent-dim:#0b6b83;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:radial-gradient(1200px 600px at 20% -10%,#12212c 0,var(--bg) 55%) no-repeat,var(--bg);
  color:var(--fg);font:16px/1.65 var(--sans);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,kbd{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 80px}

/* top bar */
.top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:12px 20px;border-bottom:1px solid var(--line);
  background:rgba(11,15,20,.82);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.top-nav{display:flex;gap:14px;align-items:center;margin-left:6px}
.chip{
  margin-left:auto;font:600 12px/1 var(--mono);padding:6px 9px;border:1px solid var(--line2);
  border-radius:999px;color:var(--accent);background:#0c1620
}

/* hero */
.hero{padding:44px 0 26px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(26px,4vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px}
.lead{max-width:70ch;color:#c2cedb;margin:0 0 18px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font:600 22px/1.2 var(--mono);color:var(--fg)}
.hero-stats span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* module cards */
.modules{display:grid;gap:16px;margin-top:26px}
.module-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.module-card.is-empty{opacity:.62;border-style:dashed}
.module-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}
.module-num{font:600 13px/1 var(--mono);color:var(--accent);background:#0c1620;border:1px solid var(--line2);
  border-radius:6px;padding:6px 7px}
.module-head h2{margin:0 0 2px;font-size:17px;letter-spacing:-.01em}
.module-head h2 a{color:var(--fg)}
.module-meta{color:var(--muted);white-space:nowrap}
.empty-note{margin:10px 0 0 0}
.lesson-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.lesson-list li{padding:8px 0;border-bottom:1px solid rgba(34,48,63,.55)}
.lesson-list li:last-child{border-bottom:0}
.lesson-link{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;color:var(--fg)}
.lesson-link:hover{text-decoration:none;color:var(--accent)}
.lesson-time{color:var(--muted);font-family:var(--mono)}
.lesson-blurb{margin:2px 0 0 32px}
.tick{color:var(--line2);font-size:13px;text-align:center;transition:color .12s}
li.is-done .tick{color:var(--ok)}
li.is-done .lesson-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}

/* lesson layout */
.lesson-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;padding-top:26px}
.side{position:sticky;top:70px;align-self:start;max-height:calc(100vh - 90px);overflow:auto}
.side-head h3{margin:6px 0 10px;font-size:14px;letter-spacing:.01em}
.side-list{list-style:none;margin:0;padding:0;font-size:13.5px}
.side-list li{border-left:2px solid var(--line);padding:5px 0 5px 10px}
.side-list li.is-current{border-left-color:var(--accent);background:#0e1a23}
.side-list a{color:#b9c7d6}
.side-list li.is-current a{color:var(--fg)}
.side-list .tick{margin-right:6px}

@media (max-width:760px){
  .lesson-layout{grid-template-columns:1fr}
  .side{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--r);padding:12px}
}

/* prose */
.prose{min-width:0}
.prose h1{font-size:clamp(24px,3vw,32px);line-height:1.2;letter-spacing:-.02em;margin:6px 0 4px}
.prose h2{font-size:20px;margin:34px 0 10px;padding-top:14px;border-top:1px solid var(--line);letter-spacing:-.01em}
.prose h3{font-size:16px;margin:22px 0 8px;color:#e6eef6}
.prose p,.prose li{color:#c9d5e2}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:4px 0}
.prose b,.prose strong{color:#fff}
.prose code:not(pre code){background:#16222e;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.88em;color:#a8e6f7}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0}
.prose th,.prose td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.prose th{background:#0f1822;color:#dfe9f3;font-weight:600}
.prose blockquote{
  margin:18px 0;padding:12px 16px;border-left:3px solid var(--warn);
  background:#1a1510;border-radius:0 var(--r) var(--r) 0;color:#e8dcc6
}
.prose blockquote p{margin:4px 0;color:inherit}
.prose blockquote strong{color:#ffd479}
.crumbs{display:flex;gap:7px;align-items:center;margin-bottom:2px}
.meta{margin:0 0 8px}

/* code + panes */
.code{margin:16px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0e151d}
.code-lang{
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:7px 12px;border-bottom:1px solid var(--line);background:#0b1219
}
.code pre{margin:0;padding:12px 14px;overflow:auto;font-size:13px;line-height:1.55}
.panes{margin:18px 0;border:1px solid var(--line2);border-radius:var(--r);background:#0e151d;overflow:hidden}
.pane-tabs{display:flex;gap:2px;padding:6px 6px 0;background:#0b1219;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pane-tab{
  appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 12px/1 var(--sans);padding:8px 12px;border-radius:7px 7px 0 0
}
.pane-tab:hover{color:var(--fg);background:#101c26}
.pane-tab.is-on{color:#06121a;background:var(--accent)}
.pane-tab-all{margin-left:auto;color:var(--muted)}
.pane-stack{padding:0}
.pane{margin:0;display:none}
.pane.is-on{display:block}
.pane figcaption{
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:8px 14px 0
}
.pane pre{margin:0;padding:10px 14px 14px;overflow:auto;font-size:13px;line-height:1.55}
.panes.is-all .pane{display:block;border-top:1px solid var(--line)}
.panes.is-all .pane:first-child{border-top:0}
pre.fallback{white-space:pre-wrap}

/* chroma */
.chroma{background:transparent!important}
.chroma .err{color:#ff7b72}

/* checkpoint + pager */
.checkpoint{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:34px 0 0;
  padding:14px 16px;border:1px dashed var(--line2);border-radius:var(--r);background:#0f1822
}
.btn-done{
  appearance:none;cursor:pointer;font:600 13px/1 var(--sans);padding:10px 14px;border-radius:8px;
  border:1px solid var(--accent-dim);background:#0c2833;color:var(--accent)
}
.btn-done:hover{background:#0f3140}
.btn-done.done{background:#12301c;border-color:#1f6f36;color:var(--ok)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0 0;border-top:1px solid var(--line);padding-top:18px}
.pager-link{display:flex;flex-direction:column;gap:2px;color:var(--fg);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pager-link:hover{border-color:var(--accent-dim);text-decoration:none}
.pager-link.right{text-align:right;align-items:flex-end}
.pager-link b{font-weight:600;font-size:14px}

.page-head{padding:34px 0 6px}
.page-head h1{margin:8px 0 6px;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em}
.lesson-list.wide{margin-top:20px}

.foot{border-top:1px solid var(--line);padding:18px 20px;text-align:center}

@media (max-width:640px){
  .module-head{grid-template-columns:auto 1fr}
  .module-meta{grid-column:2;justify-self:start}
  .pager{grid-template-columns:1fr}
  .pager-link.right{text-align:left;align-items:flex-start}
}
@media print{
  .top,.side,.foot,.checkpoint,.pager,.pane-tabs{display:none!important}
  body{background:#fff;color:#111}
  .pane{display:block!important;border-top:1px solid #ddd}
  .prose h1,.prose h2,.prose p,.prose li,.prose b{color:#111}
}

/* run panel */
.runbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:#0b1219}
.run{
  appearance:none;cursor:pointer;font:600 12px/1 var(--sans);color:#d7ecff;
  background:#12283a;border:1px solid #2f81f7;border-radius:6px;padding:6px 13px
}
.run:hover{background:#17364d}
.run:disabled{opacity:.55;cursor:progress}
.run-state{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.run-state.good{color:var(--ok)} .run-state.bad{color:#ff7b72} .run-state.busy{color:var(--warn)}
pre.out{
  margin:0;padding:10px 14px;background:#080c11;border-top:1px solid var(--line);
  color:#c9d6e2;font:12.5px/1.55 var(--mono);white-space:pre-wrap;max-height:280px;overflow:auto
}
pre.out.err{color:#ff9a9a;background:#160e0e}