:root{
  --bg:#ffffff; --bg2:#f6f7fb; --ink:#1d2433; --muted:#5d6779; --line:#e3e6ee;
  --brand:#6d28d9; --brand2:#8b5cf6; --brand-soft:#f1ebff; --accent:#f59e0b;
  --code-bg:#0f1720; --code-ink:#e6edf3; --out-bg:#f3f5f9;
  --note:#eef6ff; --note-line:#3b82f6; --warn:#fff7e6; --warn-line:#f59e0b;
  --side-w:270px; --top-h:56px; --cat-h:42px;
}
[data-theme="dark"]{
  --bg:#0f141c; --bg2:#151c27; --ink:#e4e8ef; --muted:#9aa5b5; --line:#263041;
  --brand:#c4b5fd; --brand2:#8b5cf6; --brand-soft:#2a1d4d;
  --code-bg:#0a0e14; --out-bg:#1a2230; --note:#132238; --warn:#2a2112;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px}
a{color:var(--brand)}
/* ---------- Header ---------- */
header.top{position:sticky;top:0;z-index:30;height:var(--top-h);display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--brand);color:#fff}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.3px;text-decoration:none;color:#fff;white-space:nowrap}
.logo-mark{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:15px;font-weight:800}
[data-theme="dark"] header.top{background:#3b1a78}
[data-theme="dark"] .logo-mark{color:#3b1a78}
.top-search{flex:1;max-width:420px;margin-left:auto;position:relative}
.top-search input{width:100%;padding:8px 12px 8px 34px;border-radius:8px;border:0;font:inherit;font-size:14px;background:rgba(255,255,255,.18);color:#fff;outline:none}
.top-search input::placeholder{color:rgba(255,255,255,.8)}
.top-search input:focus{background:#fff;color:#1d2433}
.top-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.85}
.results{position:absolute;top:42px;left:0;right:0;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);max-height:340px;overflow:auto;display:none}
.results a{display:block;padding:9px 14px;text-decoration:none;color:var(--ink);font-size:14px;border-bottom:1px solid var(--line)}
.results a:hover,.results a.active{background:var(--brand-soft)}
.results small{color:var(--muted);display:block;font-size:12px}
.icon-btn{background:rgba(255,255,255,.15);border:0;color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;display:grid;place-items:center;flex:none}
.icon-btn:hover{background:rgba(255,255,255,.28)}
#menuBtn{display:none}
/* ---------- Category bar ---------- */
nav.cats{position:sticky;top:var(--top-h);z-index:25;height:var(--cat-h);display:flex;gap:2px;overflow-x:auto;background:var(--bg2);border-bottom:1px solid var(--line);padding:0 10px;scrollbar-width:none}
nav.cats::-webkit-scrollbar{display:none}
nav.cats a{flex:none;display:flex;align-items:center;padding:0 14px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent}
nav.cats a:hover{color:var(--ink)}
nav.cats a.on{color:var(--brand);border-bottom-color:var(--brand)}
/* ---------- Layout ---------- */
.wrap{display:flex;max-width:1400px;margin:0 auto}
aside.side{width:var(--side-w);flex:none;position:sticky;top:calc(var(--top-h) + var(--cat-h));height:calc(100vh - var(--top-h) - var(--cat-h));overflow-y:auto;border-right:1px solid var(--line);background:var(--bg);padding:14px 0 40px}
.side-head{padding:0 18px 10px;display:flex;justify-content:space-between;align-items:center}
.side-head b{font-size:15px}
.prog{font-size:12px;color:var(--muted)}
.progbar{margin:0 18px 12px;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.progbar i{display:block;height:100%;width:0;background:var(--brand2);transition:width .3s}
.sec{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 18px 6px}
aside.side a{display:flex;align-items:center;gap:8px;padding:6px 18px 6px 20px;font-size:14.5px;color:var(--ink);text-decoration:none;border-left:3px solid transparent}
aside.side a:hover{background:var(--bg2)}
aside.side a.on{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand);font-weight:600}
aside.side a .tick{margin-left:auto;color:var(--brand2);font-size:13px;visibility:hidden}
aside.side a.done .tick{visibility:visible}
main{flex:1;min-width:0;padding:28px 44px 60px}
article{max-width:860px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none}
h1{font-size:34px;line-height:1.2;margin:4px 0 14px;letter-spacing:-.5px}
h2{font-size:24px;margin:34px 0 10px;padding-top:6px;border-top:1px solid var(--line);padding-top:22px}
h3{font-size:19px;margin:24px 0 6px}
p{margin:10px 0}
ul,ol{padding-left:24px}
li{margin:4px 0}
code{font-family:"JetBrains Mono",monospace;font-size:.88em;background:var(--bg2);border:1px solid var(--line);padding:1px 5px;border-radius:5px}
.navbtns{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.navbtns a{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.navbtns a:hover{filter:brightness(1.1)}
.navbtns a.ghost{visibility:hidden}
[data-theme="dark"] .navbtns a{color:#1e0b4b}
/* code blocks */
.code{margin:16px 0;border-radius:10px;overflow:hidden;border:1px solid #1f2a37;background:var(--code-bg)}
.code-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#18222e;color:#9fb0c3;font-size:12.5px;font-weight:600}
.code-bar .btns{display:flex;gap:6px}
.code-bar button{background:#263445;color:#d7e2ee;border:0;border-radius:6px;padding:4px 10px;font:600 12px Inter,sans-serif;cursor:pointer}
.code-bar button:hover{background:#33465b}
.code-bar button.run{background:var(--brand2);color:#ffffff}
pre{margin:0;padding:14px 16px;overflow-x:auto;color:var(--code-ink);font:14px/1.6 "JetBrains Mono",monospace}
pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.output{display:none;border-top:1px dashed #2c3a4a;background:#0b1118;color:#a7f3d0;padding:10px 16px;font:13.5px/1.6 "JetBrains Mono",monospace;white-space:pre-wrap}
.output.show{display:block}
.output::before{content:"Output";display:block;color:#7c8ea3;font-size:11px;font-family:Inter,sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
/* token colours */
.t-kw{color:#ff7b72}.t-ty{color:#ffa657}.t-str{color:#a5d6ff}.t-com{color:#8b949e;font-style:italic}.t-num{color:#79c0ff}.t-fn{color:#d2a8ff}.t-ann{color:#f2cc60}
/* callouts & tables */
.box{border-left:4px solid var(--note-line);background:var(--note);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0}
.box.warn{border-color:var(--warn-line);background:var(--warn)}
.box b:first-child{display:block;margin-bottom:2px}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--brand-soft);color:var(--ink)}
tr:nth-child(even) td{background:var(--bg2)}
.hero{background:linear-gradient(135deg,var(--brand),#9333ea);color:#fff;border-radius:14px;padding:26px 28px;margin:6px 0 20px}
.hero h1{color:#fff;margin:0 0 6px}
.hero p{margin:0;opacity:.95}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0}
.cards a{display:block;border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:var(--ink);background:var(--bg)}
.cards a:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(109,40,217,.14)}
.cards b{display:block;color:var(--brand)}
.cards span{font-size:13px;color:var(--muted)}
.done-row{display:flex;align-items:center;gap:10px;margin:30px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.done-row button{border:1px solid var(--brand);background:transparent;color:var(--brand);font:600 14px Inter,sans-serif;padding:7px 14px;border-radius:8px;cursor:pointer}
.done-row button.is-done{background:var(--brand);color:#fff}
[data-theme="dark"] .done-row button.is-done{color:#1e0b4b}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#5b21b6,#7e22ce)}
/* diagrams */
.diagram{margin:22px 0;padding:16px 12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:center;overflow-x:auto}
.diagram svg{width:100%;height:auto;display:block;margin:0 auto}
.diagram figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.dg text{font-family:Inter,sans-serif;font-size:14px;fill:var(--ink)}
.dg .t-sm{font-size:12.5px}.dg .t-b{font-weight:700}.dg .t-mono{font-family:"JetBrains Mono",monospace}
.dg .t-mut{fill:var(--muted)}.dg .t-br{fill:var(--brand)}.dg .t-inv{fill:#fff}.dg .t-bad{fill:#dc2626;font-size:22px}
[data-theme="dark"] .dg .t-inv{fill:#1e0b4b}
.dg .lbl{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.dg .box{fill:var(--brand-soft);stroke:var(--brand);stroke-width:1.6}
.dg .box2{fill:var(--bg2);stroke:var(--line);stroke-width:1.5}
.dg .box3{fill:var(--brand);stroke:var(--brand);stroke-width:1.6}
.dg .ln{stroke:var(--muted);stroke-width:1.6;fill:none}
.dg .ln-b{stroke:var(--brand);stroke-width:1.9;fill:none}
.dg .ln-ink{stroke:var(--ink);stroke-width:1.2;fill:none}
.dg .dash{stroke-dasharray:5 4}.dg .bad{stroke:#dc2626}
.dg .dg-head{fill:var(--muted)}.dg .dot{fill:var(--brand)}
.dg .hl{fill:var(--brand2)}.dg .hlg{opacity:.5}
/* quiz */
.quiz{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:22px 0;background:var(--bg)}
.quiz h3{margin-top:0}
.quiz .opt{display:block;width:100%;text-align:left;margin:6px 0;padding:9px 12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:8px;font:inherit;font-size:15px;cursor:pointer}
.quiz .opt:hover{border-color:var(--brand)}
.quiz .opt.right{border-color:#16a34a;background:#dcfce7;color:#14532d}
.quiz .opt.wrong{border-color:#dc2626;background:#fee2e2;color:#7f1d1d}
.quiz .why{display:none;font-size:14.5px;color:var(--muted);margin-top:8px}
/* right TOC */
.toc{width:220px;flex:none;position:sticky;top:calc(var(--top-h) + var(--cat-h) + 20px);align-self:flex-start;padding:28px 18px 0 0;font-size:13.5px}
.toc b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:4px 0 4px 10px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--brand);border-left-color:var(--brand)}
footer{border-top:1px solid var(--line);padding:22px;text-align:center;font-size:13px;color:var(--muted);background:var(--bg2)}
.scrim{display:none}
/* ---------- Ads ---------- */
.ad{margin:22px 0;text-align:center;min-height:90px;position:relative}
.ad .ad-label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad-ph{display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);border-radius:10px;background:var(--bg2);color:var(--muted);font-size:13px;font-weight:600}
.ad-top.ad-ph,.ad-bottom.ad-ph{min-height:100px}
.ad-inArticle.ad-ph{min-height:250px}
.toc .ad{margin-top:22px}
.toc .ad-ph{min-height:600px}
/* ---------- Footer & pages ---------- */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:8px}
.foot-links a{color:var(--muted);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--brand)}
body.page-mode aside.side{display:none}
body.page-mode #menuBtn{visibility:hidden}
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:760px;margin:0 auto;display:flex;gap:14px;align-items:center;background:#1d2433;color:#e8ecf2;padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px}
.cookie-bar[hidden]{display:none}
.cookie-bar a{color:#c4b5fd}
.cookie-bar button{flex:none;background:#7c3aed;color:#ffffff;border:0;border-radius:8px;padding:8px 14px;font:600 14px Inter,sans-serif;cursor:pointer}
.contact-form{display:grid;gap:10px;max-width:520px}
.contact-form input,.contact-form textarea{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.contact-form button{justify-self:start;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:9px 18px;font:600 14px Inter,sans-serif;cursor:pointer}
.output.preview{background:#fff;color:#1d2433;font:15px/1.6 Inter,sans-serif;white-space:normal}
.output.preview::before{content:"Result";color:#7c8ea3}
.output.preview table{width:auto}.output.preview input,.output.preview select,.output.preview textarea{font:inherit;padding:4px 6px;margin:2px 0}
.output.preview h1,.output.preview h2{border:0;padding:0;margin:8px 0}
pre.ascii{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:10px;font-size:13.5px}
@media (max-width:1180px){.toc{display:none}}
@media (max-width:860px){
  #menuBtn{display:grid}
  aside.side{position:fixed;left:0;top:calc(var(--top-h) + var(--cat-h));z-index:40;transform:translateX(-100%);transition:transform .25s;box-shadow:4px 0 24px rgba(0,0,0,.2)}
  body.menu-open aside.side{transform:none}
  body.menu-open .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.35)}
  main{padding:20px 18px 50px}
  h1{font-size:27px}
  .top-search{max-width:none}
  .logo span.full{display:none}
}

/* ---------- static-site additions ---------- */
h2[id],h3[id]{scroll-margin-top:120px}
.home-hero{background:linear-gradient(135deg,var(--brand),#9333ea);color:#fff;border-radius:16px;padding:40px 34px;margin:4px 0 26px}
[data-theme="dark"] .home-hero{background:linear-gradient(135deg,#5b21b6,#7e22ce)}
.home-hero h1{color:#fff;font-size:38px;margin:0 0 8px}
.home-hero p{margin:0;font-size:17px;opacity:.95;max-width:640px}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin:18px 0 30px}
.course-card{border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;background:var(--bg);display:flex;flex-direction:column}
.course-card:hover{border-color:var(--brand);box-shadow:0 6px 20px rgba(109,40,217,.12)}
.course-card h2{border:0;padding:0;margin:0 0 4px;font-size:20px}
.course-card h2 a{text-decoration:none;color:var(--ink)}
.course-card .count{font-size:12.5px;color:var(--brand);font-weight:700}
.course-card p{font-size:14px;color:var(--muted);margin:8px 0}
.course-card ul{list-style:none;padding:0;margin:4px 0 10px;font-size:14px}
.course-card li{margin:2px 0}
.course-card li a{text-decoration:none}
.course-card .start{margin-top:auto;align-self:flex-start;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:7px 14px;border-radius:8px}
[data-theme="dark"] .course-card .start{color:#1e0b4b}
body.home-mode main{max-width:1200px;margin:0 auto}
body.home-mode article{max-width:none}