/* ════════════════════════════════════════════════════════════
   SlackZero — Complete VLSI STA Course
   Theme: "oscilloscope" — deep-navy scope screen, graticule
   grid, cyan + trace-yellow waveforms, glowing clock edges.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#060a14;            /* scope-screen navy black */
  --bg-2:#0a101e;          /* raised panel */
  --bg-3:#0e1628;          /* card */
  --bg-4:#142036;
  --ink:#e6eefc;           /* primary text */
  --ink-2:#b3c3de;         /* secondary */
  --ink-3:#76879f;         /* muted */
  --line:#1a2540;          /* hairline */
  --line-2:#293a5e;
  --acc:#22d3ee;           /* trace cyan */
  --acc-dim:#0e9cb5;
  --acc-soft:rgba(34,211,238,.12);
  --amber:#ffd166;         /* trace yellow */
  --amber-soft:rgba(255,209,102,.12);
  --red:#ff6b81;           /* negative slack */
  --cyan:#7ce7ff;          /* probe light cyan */
  --violet:#c4a7ff;        /* aux */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Space Grotesk','Inter',sans-serif;
  --r-sm:6px;--r:10px;--r-lg:16px;--r-xl:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sbw:300px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
code,pre,kbd{font-family:var(--mono)}
::selection{background:rgba(34,211,238,.25)}

/* graticule backdrop — faint scope grid on app pages */
body.course::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:
    linear-gradient(transparent 95%, rgba(34,211,238,.5) 95%),
    linear-gradient(90deg, transparent 95%, rgba(34,211,238,.35) 95%);
  background-size:28px 28px}

/* ── APP SHELL ──────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100vh;position:relative;z-index:1}
main.reader{padding:32px 48px 120px;max-width:980px;width:100%;margin:0 auto}

#topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:14px 20px;margin:-32px -48px 36px;background:rgba(7,13,8,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#topbar .crumb{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
#topbar .crumb em{color:var(--acc);font-style:normal;margin:0 6px}
#topbar .tb-home{margin-left:auto;font-size:13px;color:var(--ink-2);border:1px solid var(--line-2);
  padding:6px 14px;border-radius:8px;transition:all .2s var(--ease)}
#topbar .tb-home:hover{color:var(--acc);border-color:var(--acc-dim)}
#sb-toggle{display:none;font-size:18px;color:var(--ink-2)}

/* ── SIDEBAR ────────────────────────────────────────────── */
#sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg-2);
  border-right:1px solid var(--line);padding:20px 14px 40px;scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.sb-head{padding:4px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.sb-brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
  font-size:18px;letter-spacing:-.01em}
.sb-mark{width:26px;height:26px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--acc) 0%,var(--amber) 130%);
  box-shadow:0 0 18px rgba(34,211,238,.4);position:relative}
.sb-mark::after{content:"∿";position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;color:#041018}
.sb-progress{margin-top:14px}
.sb-bar{height:6px;border-radius:4px;background:#142038;overflow:hidden}
.sb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-dim),var(--acc));
  border-radius:4px;transition:width .5s var(--ease);box-shadow:0 0 10px rgba(34,211,238,.5)}
.sb-pct{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px;display:block}
.sb-mod{margin-bottom:2px;border-radius:var(--r)}
.sb-mod-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--r);font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:background .2s}
.sb-mod-btn:hover{background:var(--bg-3)}
.sb-mod.open .sb-mod-btn{color:var(--ink);background:var(--bg-3)}
.sb-ic{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:var(--acc-soft);color:var(--acc);font-size:11px}
.sb-mod.complete .sb-ic{background:var(--acc);color:#041018}
.sb-mt{flex:1}
.sb-md{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.sb-topics{list-style:none;display:none;padding:4px 0 8px 30px}
.sb-mod.open .sb-topics{display:block}
.sb-topics li a{display:flex;gap:8px;align-items:baseline;font-size:12.8px;color:var(--ink-3);
  padding:5px 8px;border-radius:7px;border-left:2px solid transparent;transition:all .15s}
.sb-topics li a:hover{color:var(--ink);background:var(--bg-3)}
.sb-topics li.current a{color:var(--acc);border-left-color:var(--acc);background:var(--acc-soft)}
.sb-topics li.done a{color:var(--ink-2)}
.sb-topics .tick{font-size:10px;color:var(--acc);width:12px;flex:none}

/* ── MODULE HEADER ──────────────────────────────────────── */
.mod-head{margin:10px 0 56px;padding:34px 36px;border:1px solid var(--line-2);
  border-radius:var(--r-xl);background:
  radial-gradient(120% 160% at 0% 0%,rgba(34,211,238,.09),transparent 55%),var(--bg-2);
  position:relative;overflow:hidden}
.mod-head::after{content:attr(data-bits);position:absolute;right:22px;top:14px;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);opacity:.6;letter-spacing:3px}
.mod-kicker{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.18em;
  text-transform:uppercase}
.mod-head h1{font-family:var(--disp);font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;
  line-height:1.08;margin:10px 0 14px}
.mod-head p{color:var(--ink-2);max-width:640px;font-size:16px}
.mod-meta{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap}
.mod-meta span{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:flex;
  align-items:center;gap:6px}
.mod-meta b{color:var(--amber);font-weight:600}

/* ── TOPIC TYPOGRAPHY ───────────────────────────────────── */
section.topic{margin:0 0 90px;scroll-margin-top:90px}
section.topic>h2{font-family:var(--disp);font-size:clamp(24px,3vw,32px);letter-spacing:-.015em;
  margin-bottom:8px;display:flex;align-items:center;gap:14px}
section.topic>h2::before{content:"";width:10px;height:26px;flex:none;border-radius:3px;
  background:linear-gradient(180deg,var(--acc),var(--acc-dim));box-shadow:0 0 12px rgba(34,211,238,.45)}
.t-sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-bottom:26px;display:block}
section.topic h3{font-size:19px;font-weight:700;margin:38px 0 12px;color:var(--ink)}
section.topic h4{font-size:15.5px;font-weight:700;margin:26px 0 10px;color:var(--ink-2)}
section.topic p{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;max-width:74ch}
section.topic strong{color:var(--ink)}
section.topic ul,section.topic ol{margin:0 0 18px 22px;color:var(--ink-2);font-size:15.5px}
section.topic li{margin-bottom:8px}
section.topic li::marker{color:var(--acc)}
section.topic code{font-size:.88em;background:var(--bg-3);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;color:var(--acc)}
section.topic pre{background:#040810;border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px 20px;overflow-x:auto;margin:0 0 22px;font-size:13px;line-height:1.6;color:#cfdcf2}
section.topic pre code{background:none;border:none;padding:0;color:inherit}
section.topic pre .c{color:var(--ink-3)} section.topic pre .k{color:var(--amber)}
section.topic pre .s{color:var(--cyan)} section.topic pre .n{color:var(--violet)}
table.t{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
table.t th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--acc);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
table.t tr:hover td{background:var(--bg-2)}
table.t td:first-child{color:var(--ink);font-weight:600}

/* callouts */
.note,.warn,.protip,.story{border-radius:var(--r);padding:16px 18px 16px 46px;margin:0 0 22px;
  font-size:14.5px;position:relative;border:1px solid var(--line-2);color:var(--ink-2)}
.note::before,.warn::before,.protip::before,.story::before{position:absolute;left:16px;top:15px;
  font-size:15px}
.note{background:rgba(77,216,255,.06);border-color:rgba(77,216,255,.25)}
.note::before{content:"◈";color:var(--cyan)}
.warn{background:rgba(255,107,129,.06);border-color:rgba(255,107,129,.3)}
.warn::before{content:"▲";color:var(--red)}
.protip{background:var(--amber-soft);border-color:rgba(255,209,102,.3)}
.protip::before{content:"★";color:var(--amber)}
.story{background:var(--acc-soft);border-color:rgba(34,211,238,.25)}
.story::before{content:"❯";color:var(--acc)}
.note b,.warn b,.protip b,.story b{color:var(--ink)}

/* term chips */
.term{display:inline-block;border-bottom:1px dashed var(--acc-dim);cursor:help;color:var(--ink)}

/* ── FIGURES & SCHEMATICS ───────────────────────────────── */
figure.fig{margin:26px 0 30px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:24px;overflow:hidden}
figure.fig svg{width:100%;height:auto}
figure.fig figcaption{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center;
  font-family:var(--mono)}
figure.fig figcaption b{color:var(--acc);font-weight:600}
/* svg schematic vocabulary */
.fig .wire,.lab .wire{stroke:#5b6f95;stroke-width:1.6;fill:none}
.fig .wire.hot,.lab .wire.hot{stroke:var(--acc);filter:drop-shadow(0 0 3px rgba(34,211,238,.6))}
.fig .wire.bad,.lab .wire.bad{stroke:var(--red)}
.fig .wire.amb,.lab .wire.amb{stroke:var(--amber)}
.fig .wire.cy,.lab .wire.cy{stroke:var(--cyan)}
.fig .gate,.lab .gate{fill:#0c1424;stroke:#3a4f78;stroke-width:1.5}
.fig .gate.hl,.lab .gate.hl{stroke:var(--acc);fill:rgba(34,211,238,.08)}
.fig .gate.bd,.lab .gate.bd{stroke:var(--red);fill:rgba(255,107,129,.08)}
.fig .blk,.lab .blk{fill:#0c1424;stroke:#3a4f78;stroke-width:1.5;rx:8}
.fig .blk.hl,.lab .blk.hl{stroke:var(--acc)} .fig .blk.am,.lab .blk.am{stroke:var(--amber)} .fig .blk.cyb,.lab .blk.cyb{stroke:var(--cyan)}
.fig text,.lab text{font-family:var(--mono);font-size:11px;fill:var(--ink-2)}
.fig text.lbl,.lab text.lbl{fill:var(--ink);font-weight:600;font-size:12px}
.fig text.sm,.lab text.sm{font-size:9.5px;fill:var(--ink-3)}
.fig text.accT,.lab text.accT{fill:var(--acc)} .fig text.ambT,.lab text.ambT{fill:var(--amber)} .fig text.redT,.lab text.redT{fill:var(--red)}
.fig text.cyT,.lab text.cyT{fill:var(--cyan)}
.fig .pin,.lab .pin{fill:var(--acc)}
.fig .dot,.lab .dot{fill:#5b6f95}
/* waveform vocabulary */
.fig .wv,.lab .wv{stroke-width:2;fill:none}
.fig .wv.clk,.lab .wv.clk{stroke:var(--amber)} .fig .wv.d,.lab .wv.d{stroke:var(--cyan)} .fig .wv.q,.lab .wv.q{stroke:var(--acc)}
.fig .wv.x,.lab .wv.x{stroke:var(--red)} .fig .wv.v,.lab .wv.v{stroke:var(--violet)}
.fig .gridl,.lab .gridl{stroke:#16223c;stroke-width:1}
.fig .marker,.lab .marker{stroke:var(--red);stroke-width:1.2;stroke-dasharray:4 3}
.fig .region-ok,.lab .region-ok{fill:rgba(34,211,238,.08)} .fig .region-bad,.lab .region-bad{fill:rgba(255,107,129,.1)}
.fig .region-amb,.lab .region-amb{fill:rgba(255,209,102,.09)}
/* animations available to figures */
@keyframes dashFlow{to{stroke-dashoffset:-24}}
.fig .flow,.lab .flow{stroke-dasharray:6 6;animation:dashFlow 1.2s linear infinite}
@keyframes blinkOn{0%,49%{opacity:0}50%,100%{opacity:1}}
.fig .blink,.lab .blink{animation:blinkOn 1.1s steps(1) infinite}
@keyframes pulseG{0%,100%{opacity:.35}50%{opacity:1}}
.fig .pulse,.lab .pulse{animation:pulseG 1.6s ease-in-out infinite}
@keyframes slideBit{from{transform:translateX(0)}to{transform:translateX(60px)}}
/* steppers */
[data-stepper] .step{display:none}
[data-stepper] .step.on{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stepper-ctl{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:14px}
.stepper-ctl button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);
  color:var(--acc);font-size:15px;transition:all .2s}
.stepper-ctl button:hover{background:var(--acc-soft);border-color:var(--acc-dim)}
.st-pos{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ── QUIZ ───────────────────────────────────────────────── */
.quiz{margin:34px 0 10px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--bg-2);padding:22px 24px}
.quiz-score{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:16px}
.quiz .q{padding:14px 0;border-top:1px dashed var(--line)}
.quiz .q:first-of-type{border-top:none}
.quiz .qt{font-weight:600;color:var(--ink);margin-bottom:12px;font-size:15px}
.quiz .opt{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:8px;
  border:1px solid var(--line-2);border-radius:var(--r);font-size:14px;color:var(--ink-2);
  transition:all .15s;background:var(--bg)}
.quiz .opt:hover{border-color:var(--acc-dim);color:var(--ink)}
.quiz .opt.right{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.quiz .opt.right::after{content:" ✓";font-weight:700}
.quiz .opt.wrong{border-color:var(--red);background:rgba(255,107,129,.08);color:var(--red);
  animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.quiz .why{display:none;font-size:13.5px;color:var(--ink-2);background:var(--bg);
  border-left:3px solid var(--acc);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:10px}
.quiz .why.show{display:block;animation:fadeUp .3s var(--ease)}

/* ── LAB ────────────────────────────────────────────────── */
.lab{margin:30px 0 36px;border:1px solid rgba(255,209,102,.35);border-radius:var(--r-lg);
  background:#0a0f1d;box-shadow:0 0 0 4px rgba(255,209,102,.04),0 24px 60px -30px rgba(0,0,0,.8);
  overflow:hidden}
.lab-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(180deg,#131a2c,#0e1424);border-bottom:1px solid var(--line-2)}
.lab-led{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);animation:pulseG 1.4s ease-in-out infinite}
.lab-name{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber);
  text-transform:uppercase}
.lab-reset{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  border:1px solid var(--line-2);padding:4px 10px;border-radius:7px;transition:all .2s}
.lab-reset:hover{color:var(--amber);border-color:var(--amber)}
.lab-body{padding:20px}
.lab-goal{padding:12px 18px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--ink-2)}
.lab-err{color:var(--red);font-family:var(--mono);font-size:13px}
/* lab widgets */
.lab-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.lab-row label{font-family:var(--mono);font-size:12px;color:var(--ink-2);display:flex;
  gap:8px;align-items:center}
.lab input[type=range]{appearance:none;-webkit-appearance:none;width:160px;height:4px;
  border-radius:2px;background:var(--line-2);outline:none}
.lab input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;
  height:15px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px rgba(34,211,238,.6);
  cursor:pointer}
.lab input[type=text],.lab input[type=number],.lab select,.lab textarea{background:var(--bg);
  border:1px solid var(--line-2);border-radius:8px;color:var(--ink);font-family:var(--mono);
  font-size:13px;padding:7px 10px;outline:none}
.lab input:focus,.lab select:focus,.lab textarea:focus{border-color:var(--acc-dim)}
.lab .lbtn{font-family:var(--mono);font-size:12.5px;font-weight:600;padding:8px 16px;
  border-radius:8px;border:1px solid var(--acc-dim);color:var(--acc);background:var(--acc-soft);
  transition:all .15s}
.lab .lbtn:hover{background:rgba(34,211,238,.2);transform:translateY(-1px)}
.lab .lbtn.warn{border-color:rgba(255,209,102,.5);color:var(--amber);background:var(--amber-soft)}
.lab .lbtn.ghost{border-color:var(--line-2);color:var(--ink-2);background:transparent}
.lab .lbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.lab .ro{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);min-width:110px}
.lab .ro b{font-family:var(--mono);font-size:20px;color:var(--acc);font-weight:600;line-height:1.1}
.lab .ro b.bad{color:var(--red)} .lab .ro b.amb{color:var(--amber)} .lab .ro b.cy{color:var(--cyan)}
.lab .ro span{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.1em}
.lab svg{width:100%;height:auto}
.lab .msg{font-family:var(--mono);font-size:12.5px;padding:9px 12px;border-radius:8px;
  margin-top:10px;border:1px solid var(--line-2);color:var(--ink-2)}
.lab .msg.ok{border-color:var(--acc-dim);color:var(--acc);background:var(--acc-soft)}
.lab .msg.bad{border-color:var(--red);color:var(--red);background:rgba(255,107,129,.07)}
.lab .bitcell{font-family:var(--mono);user-select:none}
.lab .grid-table{border-collapse:collapse;font-family:var(--mono);font-size:12px}
.lab .grid-table td{border:1px solid var(--line-2);width:30px;height:30px;text-align:center;
  cursor:pointer;transition:background .15s}

/* topic footer */
.topic-foot{display:flex;gap:14px;align-items:center;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line)}
.btn-done{display:inline-block;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,var(--acc),#3ddcf5);color:#041018;
  box-shadow:0 8px 26px -8px rgba(34,211,238,.5);transition:all .2s var(--ease);text-align:center}
.btn-done:hover{transform:translateY(-2px)}
.btn-done.is-done{background:var(--bg-3);color:var(--acc);border:1px solid var(--acc-dim);
  box-shadow:none}
.btn-next{margin-left:auto;font-size:13.5px;color:var(--ink-2);transition:color .2s;text-align:right}
.btn-next:hover{color:var(--acc)}

/* pager */
#pager{display:flex;justify-content:space-between;gap:16px;margin-top:70px}
.pg{flex:1;max-width:46%;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 22px;
  transition:all .2s var(--ease);background:var(--bg-2)}
.pg small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.pg:hover{border-color:var(--acc-dim);transform:translateY(-2px)}
.pg.next{text-align:right;margin-left:auto}

/* gate + toast */
.gate{position:fixed;inset:0;z-index:90;background:rgba(4,8,5,.86);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;animation:fadeUp .3s var(--ease)}
.gate-card{max-width:430px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-xl);padding:38px;text-align:center}
.gate-mark{display:block;width:46px;height:46px;border-radius:12px;margin:0 auto 18px;
  background:linear-gradient(135deg,var(--acc),var(--amber));box-shadow:0 0 30px rgba(34,211,238,.4)}
.gate-card h3{font-family:var(--disp);font-size:22px;margin-bottom:10px}
.gate-card p{color:var(--ink-2);font-size:14px;margin-bottom:22px}
.gate-card .btn-done{display:block;margin-bottom:12px}
.gate-skip{font-size:12.5px;color:var(--ink-3);text-decoration:underline}
.gate-skip:hover{color:var(--ink)}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);z-index:99;opacity:0;
  background:var(--bg-3);border:1px solid var(--acc-dim);color:var(--acc);font-family:var(--mono);
  font-size:13px;padding:11px 20px;border-radius:10px;transition:all .3s var(--ease);
  pointer-events:none;box-shadow:0 14px 40px -10px rgba(0,0,0,.7)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── DASHBOARD ──────────────────────────────────────────── */
.dash{max-width:1100px;margin:0 auto;padding:40px 28px 100px;position:relative;z-index:1}
.dash-top{display:flex;align-items:center;gap:14px;padding:6px 0 30px}
.dash-top .sb-brand{font-size:20px}
.dash-top a.out{margin-left:auto;font-size:13px;color:var(--ink-3)}
.dash-top a.out:hover{color:var(--acc)}
.dash-hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:40px 44px;margin-bottom:40px;
  background:radial-gradient(120% 200% at 100% 0%,rgba(34,211,238,.1),transparent 50%),var(--bg-2)}
.dash-hero h1{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;
  margin-bottom:10px}
.dash-hero p{color:var(--ink-2);max-width:520px;margin-bottom:22px}
#dash-resume{display:inline-block;padding:13px 26px;border-radius:11px;font-weight:700;
  background:linear-gradient(135deg,var(--acc),#3ddcf5);color:#041018;
  box-shadow:0 10px 30px -8px rgba(34,211,238,.5);transition:transform .2s}
#dash-resume:hover{transform:translateY(-2px)}
#dash-ring{position:relative;width:130px;height:130px}
#dash-ring svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line-2);stroke-width:9}
.ring-fg{fill:none;stroke:var(--acc);stroke-width:9;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.5));transition:stroke-dashoffset 1s var(--ease)}
.ring-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-txt strong{font-family:var(--disp);font-size:26px}
.ring-txt span{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
#dash-cert{display:none}
#dash-cert.earned{display:block;margin:0 0 36px;padding:22px 26px;border-radius:var(--r-lg);
  border:1px solid var(--amber);background:var(--amber-soft);color:var(--amber);
  font-weight:600;text-align:center}
.dash-h2{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px}
#dash-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.dash-mod{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;background:var(--bg-2);
  transition:all .2s var(--ease);display:flex;flex-direction:column;gap:8px}
.dash-mod:hover{transform:translateY(-3px);border-color:var(--acc-dim);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.dash-mod.complete{border-color:rgba(34,211,238,.4)}
.dm-top{display:flex;justify-content:space-between;align-items:center}
.dm-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:var(--acc-soft);color:var(--acc);font-size:15px}
.dash-mod.complete .dm-ic{background:var(--acc);color:#041018}
.dm-num{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.dash-mod h3{font-size:16px;font-weight:700}
.dash-mod p{font-size:12.8px;color:var(--ink-3);flex:1;line-height:1.5}
.dm-bar{height:4px;border-radius:3px;background:#142038;overflow:hidden}
.dm-bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.dm-count{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1020px){
  .shell{grid-template-columns:1fr}
  #sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sbw);z-index:80;
    transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:30px 0 80px rgba(0,0,0,.5)}
  body.sb-open #sidebar{transform:none}
  #sb-toggle{display:block}
  main.reader{padding:20px 22px 90px}
  #topbar{margin:-20px -22px 30px}
  .dash-hero{grid-template-columns:1fr}
  #pager{flex-direction:column}.pg{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC LAYER — luxury glass, ambient light, scroll reveal
   (palette-agnostic: every color is drawn from the theme tokens)
   ═══════════════════════════════════════════════════════════════ */

/* ── ambient stage light ────────────────────────────────────── */
body.course{position:relative}
body.course::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, color-mix(in srgb, var(--amber) 6%, transparent), transparent 55%),
    radial-gradient(1200px 800px at 50% 115%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 60%);
  animation:ambientDrift 26s ease-in-out infinite alternate}
@keyframes ambientDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  100%{transform:translate3d(-18px,12px,0) scale(1.04);opacity:1}}
body.course .shell{position:relative;z-index:1}

/* deep vignette — the cinema frame */
body::before{box-shadow:inset 0 0 220px 60px rgba(0,0,0,.55)}

/* ── module header: the title card ──────────────────────────── */
.mod-head{
  position:relative;overflow:hidden;border-radius:20px;
  padding:42px 44px 38px;margin-bottom:44px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 8%, var(--bg-2)) 0%, var(--bg-2) 45%, color-mix(in srgb, var(--amber) 4%, var(--bg-2)) 100%);
  border:1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06)}
.mod-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 220px at 12% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%)}
.mod-head h1{
  background:linear-gradient(120deg, var(--ink) 30%, var(--acc) 75%, var(--amber) 110%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 18px color-mix(in srgb, var(--acc) 25%, transparent))}

/* ── topic headings: glowing act titles ─────────────────────── */
section.topic{position:relative}
section.topic h2{
  background:linear-gradient(110deg, var(--ink) 55%, var(--acc) 105%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
section.topic h2::after{
  content:"";display:block;height:2px;margin-top:10px;width:120px;border-radius:2px;
  background:linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--amber) 70%, transparent), transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--acc) 55%, transparent)}

/* ── glass panels: figures, labs, callouts ──────────────────── */
figure.fig,.lab{
  background:
    linear-gradient(175deg, color-mix(in srgb, var(--acc) 4%, var(--bg-2)) 0%, var(--bg-2) 60%);
  border:1px solid color-mix(in srgb, var(--acc) 16%, var(--line-2));
  box-shadow:0 24px 60px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:18px;backdrop-filter:blur(6px)}
figure.fig{transition:border-color .4s var(--ease), box-shadow .4s var(--ease)}
figure.fig:hover{
  border-color:color-mix(in srgb, var(--acc) 38%, var(--line-2));
  box-shadow:0 30px 80px -28px color-mix(in srgb, var(--acc) 18%, rgba(0,0,0,.8)), inset 0 1px 0 rgba(255,255,255,.07)}
.note,.warn,.protip,.story{backdrop-filter:blur(4px);box-shadow:0 14px 40px -20px rgba(0,0,0,.6)}

/* ── plain-words intuition box ("explain it to anyone") ─────── */
.eli5{
  position:relative;border-radius:16px;margin:0 0 24px;
  padding:18px 22px 18px 58px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--amber) 7%, var(--bg-2)), var(--bg-2) 70%);
  border:1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  box-shadow:0 16px 44px -22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
  font-size:14.5px;color:var(--ink-2)}
.eli5::before{
  content:"✦";position:absolute;left:20px;top:14px;font-size:20px;color:var(--amber);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--amber) 70%, transparent))}
.eli5 b,.eli5 strong{color:var(--ink)}
.eli5 .eli5-k{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px}

/* ── waveform figures: phosphor glow ────────────────────────── */
.fig .wv,.lab .wv{filter:drop-shadow(0 0 4px currentColor);stroke-linecap:round;stroke-linejoin:round}
.fig .wv.clk,.lab .wv.clk{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 80%, transparent))}
.fig .glowline,.lab .glowline{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 80%, transparent))}
.fig-wave{position:relative}
.fig-wave svg{background:
  linear-gradient(color-mix(in srgb, var(--acc) 5%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--acc) 5%, transparent) 1px, transparent 1px);
  background-size:28px 28px;border-radius:12px}

/* ── scroll reveal: scenes fade up as you arrive ────────────── */
@media (prefers-reduced-motion: no-preference){
  .topic>p,.topic>figure,.topic>table,.topic>ul,.topic>ol,
  .topic>.note,.topic>.warn,.topic>.protip,.topic>.story,.topic>.eli5,
  .topic>.lab,.topic>.quiz{
    opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .topic>.rv-in{opacity:1;transform:none}
}

/* ── luxury micro-details ───────────────────────────────────── */
table.t{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 16px 44px -24px rgba(0,0,0,.6)}
table.t th{background:color-mix(in srgb, var(--acc) 7%, var(--bg-2))}
.lab-bar{background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%)}
.lab-led{box-shadow:0 0 12px var(--acc), 0 0 4px var(--acc)}
#pager a{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
#pager a:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--acc) 45%, transparent)}
::selection{background:color-mix(in srgb, var(--acc) 35%, transparent)}