:root{
  --bg:#0f1115; --panel:#161922; --ink:#e6e9ef; --muted:#9aa3b4;
  --line:#262b36; --accent:#7c9cff; --accent2:#5be3c0;
  --warn:#ffb454; --danger:#ff7a85; --code-bg:#0b0d12; --kw:#c792ea;
  --str:#c3e88d; --com:#5c6370; --fn:#82aaff; --num:#f78c6c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top chapter bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(15,17,21,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 22px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topbar .brand{font-weight:700;font-size:14px;margin-right:14px;color:var(--ink);white-space:nowrap}
.topbar a.ch{font-size:12.5px;color:var(--muted);padding:4px 10px;border-radius:6px;white-space:nowrap}
.topbar a.ch:hover{color:var(--ink);background:#1b1f29;text-decoration:none}
.topbar a.ch.cur{color:var(--accent);background:#1b2030}

/* layout */
.wrap{display:flex;max-width:1280px;margin:0 auto}
.side{position:sticky;top:48px;align-self:flex-start;width:268px;height:calc(100vh - 48px);overflow-y:auto;
  padding:22px 14px 60px 22px;border-right:1px solid var(--line);flex:none}
.side h1{font-size:15px;margin:0 0 4px;color:var(--ink)}
.side .sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.toc a{display:block;color:var(--muted);font-size:13.5px;padding:5px 10px;border-radius:7px;
  border-left:2px solid transparent;margin:1px 0}
.toc a:hover{color:var(--ink);background:#1b1f29;text-decoration:none}
.toc a.active{color:var(--accent);border-left-color:var(--accent);background:#1b2030}
.toc .grp{font-size:11px;letter-spacing:.08em;color:#6a7384;text-transform:uppercase;margin:16px 0 4px 10px}

.main{flex:1;min-width:0;padding:36px 56px 120px;max-width:880px}
section{scroll-margin-top:60px;margin-bottom:18px}
.hero{padding:14px 0 8px;border-bottom:1px solid var(--line);margin-bottom:26px}
.hero h2{font-size:30px;margin:0 0 8px;line-height:1.3}
.hero p{color:var(--muted);margin:6px 0 0;font-size:15px}
.pill{display:inline-block;font-size:12px;color:var(--accent2);border:1px solid #2a4a44;
  background:#11201d;padding:2px 10px;border-radius:20px;margin-bottom:14px}

h3{font-size:23px;margin:42px 0 10px;padding-top:6px;line-height:1.35}
h4{font-size:17px;margin:26px 0 8px;color:#cdd3df}
p{margin:12px 0}
.lead{color:#c2c8d4}
ul,ol{padding-left:22px}
li{margin:6px 0}
code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;
  background:#1d212c;color:#e3b7ff;padding:1.5px 6px;border-radius:5px}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;margin:14px 0;position:relative}
pre code{background:none;color:#cdd3df;padding:0;font-size:13px;line-height:1.65;display:block;white-space:pre}
.copy{position:absolute;top:8px;right:8px;font-size:11px;color:var(--muted);
  background:#1c212d;border:1px solid var(--line);border-radius:6px;padding:3px 9px;cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--accent)}

.kw{color:var(--kw)} .str{color:var(--str)} .com{color:var(--com);font-style:italic}
.fn{color:var(--fn)} .num{color:var(--num)} .bi{color:#ffcb6b}

.box{border-radius:10px;padding:14px 18px;margin:18px 0;border:1px solid var(--line);background:var(--panel)}
.box .bt{font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.box p:first-of-type{margin-top:2px}.box p:last-child{margin-bottom:0}
.tip{border-left:3px solid var(--accent2)} .tip .bt{color:var(--accent2)}
.warn{border-left:3px solid var(--warn)} .warn .bt{color:var(--warn)}
.deep{border-left:3px solid var(--accent)} .deep .bt{color:var(--accent)}
.danger{border-left:3px solid var(--danger)} .danger .bt{color:var(--danger)}

table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:#1b1f29;color:#cdd3df;font-weight:600}
td code{font-size:12.5px}

.diagram{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:20px;margin:18px 0;
  text-align:center;overflow-x:auto}
.ascii{font-family:"SF Mono",Menlo,monospace;font-size:13px;color:#9fb0d0;white-space:pre;text-align:left;display:inline-block;line-height:1.45}

.chk{list-style:none;padding-left:0}
.chk li{padding-left:28px;position:relative}
.chk li:before{content:"\2610";position:absolute;left:0;color:var(--accent2);font-size:16px}

/* course hub cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:22px 0}
.card{display:block;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:18px 20px;color:var(--ink)}
.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);transition:.15s}
.card .n{font-size:12px;color:var(--accent2);letter-spacing:.05em}
.card h3{font-size:18px;margin:6px 0 8px;padding:0}
.card p{font-size:13.5px;color:var(--muted);margin:0}

.pager{display:flex;justify-content:space-between;margin-top:50px;padding-top:22px;border-top:1px solid var(--line);gap:12px}
.pager a{font-size:14px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.pager a:hover{border-color:var(--accent);text-decoration:none}
.pager .sp{flex:1}

footer{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.topbtn{position:fixed;bottom:24px;right:24px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:18px;display:none}

@media(max-width:920px){
  .side{display:none}.main{padding:24px 20px 80px}
}