/* ============================================================
   SWE Prep — shared lesson stylesheet.
   Powers every offline lesson page under /swe-prep/.
   Self-contained: no external fonts, no CDNs, opens from file://.
   Theme tokens mirror the prep guides for visual parity.
   ============================================================ */
:root{
  --bg:#0b0e15; --bg-soft:#0e1219; --surface:#141925; --surface-2:#1a2030;
  --surface-3:#232a3d; --border:#232a3a; --border-strong:#344057;
  --ink:#ecedf3; --ink-2:#c1c7da; --muted:#8a92ad; --faint:#5e6680;
  --accent:#a5b4fc; --accent-fg:#0b0d22; --accent-soft:rgba(165,180,252,.10); --accent-strong:#c7d2fe;
  --good:#6ee7b7; --good-soft:rgba(110,231,183,.10);
  --strong:#86efac; --strong-soft:rgba(134,239,172,.10);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.10);
  --weak:#fb923c; --weak-soft:rgba(251,146,60,.10);
  --bad:#fca5a5; --bad-soft:rgba(252,165,165,.10);
  --shadow:0 4px 14px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.30);
  --shadow-lg:0 12px 36px rgba(0,0,0,.40);
  --r-sm:8px; --r:12px; --r-lg:18px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --p1:#7dd3fc; --p2:#a5b4fc; --p3:#f0abfc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:radial-gradient(1200px 700px at 80% -10%,rgba(165,180,252,.07),transparent 60%),
             radial-gradient(900px 600px at -10% 10%,rgba(240,171,252,.045),transparent 55%),
             var(--bg);
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-strong); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.22; margin:0}
p{margin:0 0 14px}
strong,b{color:var(--ink)}
em,i{color:var(--ink-2)}
code{font-family:var(--mono); font-size:.9em; background:var(--surface-2); padding:1.5px 6px; border-radius:6px; color:var(--accent-strong); border:1px solid var(--border)}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3));z-index:60;transition:width .1s linear}

/* top nav */
.topnav{position:sticky;top:0;z-index:50;background:rgba(11,14,21,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topnav .inner{max-width:860px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 20px;flex-wrap:wrap}
.topnav .back{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.topnav .back:hover{color:var(--ink);text-decoration:none}
.topnav .crumb{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}
.topnav .crumb .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--p1),var(--p3))}
.topnav .spacer{margin-left:auto}
.topnav .mins{font-size:11.5px;color:var(--faint)}

.shell{max-width:860px;margin:0 auto;padding:0 20px 120px}

/* hero */
.lhero{padding:52px 0 8px}
.lhero .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.lhero h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.025em;margin:10px 0 14px;background:linear-gradient(120deg,#fff,var(--accent-strong) 60%,var(--p3));-webkit-background-clip:text;background-clip:text;color:transparent}
.lhero .lede{font-size:17px;color:var(--ink-2);max-width:64ch}
.lhero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2)}
.chip b{color:var(--ink)}

/* prose sections */
.lesson{margin-top:18px}
.lesson section{padding:34px 0 4px;scroll-margin-top:64px;border-top:1px solid var(--border)}
.lesson section:first-of-type{border-top:none}
.lesson h2{font-size:24px;letter-spacing:-.02em;margin:6px 0 4px;display:flex;align-items:center;gap:11px}
.lesson h2 .nm{font-size:14px;font-weight:800;color:var(--accent-fg);background:var(--accent);border-radius:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.lesson h3{font-size:17px;margin:26px 0 8px;color:var(--accent-strong)}
.lesson h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin:22px 0 8px}
.lesson p,.lesson li{font-size:15px;color:var(--ink-2)}
.lesson ul,.lesson ol{margin:0 0 14px;padding-left:22px}
.lesson li{margin-bottom:6px}
.lead{font-size:16px;color:var(--ink);max-width:66ch}

/* code blocks */
pre{font-family:var(--mono); font-size:13px; background:#080b11; border:1px solid var(--border); border-radius:var(--r); padding:15px 16px; overflow:auto; margin:0 0 14px; line-height:1.55; position:relative}
pre code{background:none;border:none;padding:0;color:#dbe2f1;display:block}
pre .cm{color:var(--faint)}            /* comment */
pre .kw{color:var(--p3)}               /* keyword */
pre .fn{color:var(--p1)}               /* function */
pre .st{color:var(--good)}             /* string/number */
pre .hl{background:rgba(165,180,252,.12);display:inline-block;width:100%}
.code-cap{font-size:11px;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.code-cap .lang{font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid var(--border-strong);padding:1px 7px;border-radius:999px;font-size:9.5px}

/* callouts */
.box{border-radius:var(--r);padding:14px 16px;font-size:14px;margin:0 0 16px;border:1px solid}
.box .lbl{font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.09em;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.box p:last-child{margin-bottom:0}
.box.key{background:var(--accent-soft);border-color:rgba(165,180,252,.35)} .box.key .lbl{color:var(--accent)}
.box.aha{background:var(--good-soft);border-color:rgba(110,231,183,.35)} .box.aha .lbl{color:var(--good)}
.box.warn{background:var(--warn-soft);border-color:rgba(251,191,36,.35)} .box.warn .lbl{color:var(--warn)}
.box.bad{background:var(--bad-soft);border-color:rgba(252,165,165,.35)} .box.bad .lbl{color:var(--bad)}
.box.say{background:var(--surface);border-color:var(--border-strong)} .box.say .lbl{color:var(--p1)}
.box.say{font-style:italic;color:var(--ink)}

/* complexity / data tables */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--border)}
.tbl thead th{background:var(--surface-2);font-size:12px;color:var(--ink)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl td code{font-size:.85em}
.tbl .o{font-family:var(--mono);font-weight:700}
.tbl .o.g{color:var(--good)} .tbl .o.ok{color:var(--p1)} .tbl .o.m{color:var(--warn)} .tbl .o.b{color:var(--weak)} .tbl .o.x{color:var(--bad)}

/* visualization stage (shared) */
.viz{border:1px solid var(--border-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bg-soft),#080b11);padding:18px;margin:8px 0 18px}
.viz .cap{font-size:12px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.viz .cap .tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid var(--border-strong);padding:2px 8px;border-radius:999px}
.viz-ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.viz-ctrl button{font:inherit;font-size:12.5px;padding:7px 13px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.viz-ctrl button:hover{border-color:var(--accent)}
.viz-ctrl button.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.viz svg{display:block;max-width:100%;height:auto;margin:0 auto}
.viz svg text{fill:var(--ink);font-size:12px;font-family:var(--sans)}
.viz svg text.sub{fill:var(--muted);font-size:10px}
.viz svg .axis{stroke:rgba(255,255,255,.12);stroke-width:1}
.viz svg .curve{fill:none;stroke-width:2.5;opacity:.35;transition:opacity .2s,stroke-width .2s}
.viz svg .curve.on{opacity:1;stroke-width:3.5}
.vstat{font-size:13px;color:var(--ink-2);margin-top:12px;min-height:20px;padding:9px 12px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border)}
.vstat.ok{color:var(--good);border-color:rgba(110,231,183,.3);background:var(--good-soft)}
.vstat.bad{color:var(--bad);border-color:rgba(252,165,165,.3);background:var(--bad-soft)}

/* memory-cell array viz */
.arr{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:24px 0 6px}
.acell{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;background:var(--surface);border:1.5px solid var(--border);color:var(--ink-2);position:relative;transition:background .25s,border-color .25s,transform .3s,opacity .25s}
.acell .pi{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;white-space:nowrap}
.acell .ad{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:8.5px;color:var(--faint);font-family:var(--mono)}
.acell.hit{background:var(--good-soft);border-color:var(--good);color:var(--good);transform:translateY(-4px)}
.acell.scan{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.acell.move{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.acell.empty{border-style:dashed;color:var(--faint);background:transparent}
.acell.win{background:rgba(165,180,252,.15);border-color:var(--accent)}
.acell.dim{opacity:.3}

/* MCQ / quiz engine */
.mcq{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:16px 18px;margin:0 0 14px}
.mcq .q{font-size:14.5px;color:var(--ink);font-weight:600;margin-bottom:10px}
.mcq .q .pill{font-size:10px;font-weight:700;color:var(--accent);border:1px solid var(--border-strong);border-radius:999px;padding:1px 8px;margin-left:8px;text-transform:uppercase;letter-spacing:.06em}
.mcq pre{margin:8px 0 12px}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{text-align:left;font:inherit;font-size:13.5px;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;padding:10px 13px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;align-items:center;gap:9px}
.opt:hover:not(.locked){border-color:var(--accent)}
.opt .mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.opt.correct{background:var(--good-soft);border-color:var(--good);color:var(--good)} .opt.correct .mark{border-color:var(--good);color:var(--good)}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)} .opt.wrong .mark{border-color:var(--bad);color:var(--bad)}
.opt.locked{cursor:default}
.mcq-exp{display:none;margin-top:11px;font-size:13px;color:var(--ink-2);border-left:2px solid var(--accent);padding-left:11px}
.mcq-exp.show{display:block;animation:fade .25s ease}
.quiz-score{position:sticky;bottom:16px;margin:18px 0 0;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:999px;padding:10px 18px;font-size:13px;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg)}
.quiz-score b{color:var(--accent-strong)}

/* spoiler / reveal */
.spoiler{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:0 0 12px;background:var(--surface)}
.spoiler-btn{width:100%;text-align:left;font:inherit;font-size:13.5px;font-weight:600;color:var(--accent-strong);background:var(--surface-2);border:none;padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:9px}
.spoiler-btn:hover{background:var(--surface-3)}
.spoiler-btn .tw{transition:transform .2s;color:var(--muted)}
.spoiler.open .spoiler-btn .tw{transform:rotate(90deg)}
.spoiler-body{display:none;padding:15px 16px;border-top:1px solid var(--border)}
.spoiler.open .spoiler-body{display:block;animation:fade .25s ease}
.spoiler-body > :last-child{margin-bottom:0}

/* problem cards */
.prob{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);padding:0;margin:0 0 20px;overflow:hidden}
.prob .ph{padding:14px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.prob .ph .pnum{font-size:11px;font-weight:800;color:var(--accent-fg);background:var(--accent);border-radius:7px;padding:3px 9px}
.prob .ph h3{font-size:16px;margin:0;color:var(--ink)}
.prob .ph .diff{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:999px;margin-left:auto}
.prob .ph .diff.easy{color:var(--good);background:var(--good-soft);border:1px solid rgba(110,231,183,.4)}
.prob .ph .diff.med{color:var(--warn);background:var(--warn-soft);border:1px solid rgba(251,191,36,.4)}
.prob .pb{padding:16px 18px}
.prob .pb > :last-child{margin-bottom:0}

/* checklist */
.check{list-style:none;padding:0;margin:0}
.check li{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:8px;cursor:pointer;font-size:14px;color:var(--ink-2)}
.check li .cb{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);flex:0 0 auto;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;transition:all .15s}
.check li.done{opacity:.6}
.check li.done .cb{background:var(--good);border-color:var(--good);color:var(--accent-fg)}
.check li.done span{text-decoration:line-through}

/* week nav footer */
.weeknav{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.weeknav a{flex:1;min-width:200px;border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:16px 18px;background:var(--surface);transition:transform .12s,border-color .15s}
.weeknav a:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent)}
.weeknav a .dir{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.weeknav a .t{font-size:15px;font-weight:700;color:var(--ink);margin-top:3px}
.weeknav a.next{text-align:right}
.weeknav a.disabled{opacity:.4;pointer-events:none}

.lfoot{margin-top:46px;padding-top:22px;border-top:1px solid var(--border);color:var(--faint);font-size:12.5px;text-align:center}

/* shared algorithm-viz engines (LessonViz.pointerWalk / recursion / dpGrid) */
.lv-arr{margin:6px 0}
.lv-dp{margin:22px 0 6px}
.lv-dp .acell{flex-direction:column}
.lv-val{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--ink);line-height:1}
.acell.empty .lv-val{color:var(--faint);font-weight:400}
.lv-stack{display:flex;flex-direction:column-reverse;gap:7px;align-items:center;margin:20px 0 6px;min-height:60px}
.lv-frame{min-width:140px;text-align:center;font-family:var(--mono);font-size:13px;padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);transition:background .2s,border-color .2s,color .2s}
.lv-frame.active{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.lv-frame.returning{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.lv-empty{color:var(--faint);font-style:italic;font-size:13px;padding:10px}

@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}
@media(max-width:640px){.lhero h1{font-size:30px}.lesson section{padding-top:28px}}