:root{
  --paper:#fbf7ef; --paper2:#f3ecde; --card:#fffdf8; --ink:#241d14; --ink2:#4f4536; --ink3:#5a4d3a;
  --muted:#8a7a62; --line:#e7ddc9; --line2:#d3c4a6;
  --sun:#d9821a; --sun-d:#b5650c; --ember:#c2410c; --jade:#0f7d5f; --indigo:#3b4b9c; --berry:#9b2c5e;
  --display:'Newsreader',Georgia,serif; --sans:'Spline Sans',system-ui,sans-serif; --mono:'Spline Sans Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink2);line-height:1.7;
  background-image:radial-gradient(1100px 500px at 100% -5%,rgba(217,130,26,.06),transparent 60%);}
a{color:var(--sun-d);text-decoration:none} a:hover{text-decoration:underline}
.layout{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;max-width:1380px;margin:0 auto;min-height:100vh}

/* left nav */
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:24px 18px;border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper2),var(--paper))}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.sun{width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 50% 38%,#ffd778,var(--sun) 45%,var(--ember));box-shadow:0 0 18px -2px rgba(217,130,26,.6)}
.brand b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.side .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sun-d);margin:2px 0 20px 41px}
.nav h5{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
.nav a{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:8px;color:var(--ink3);font-size:14px;font-weight:500;border-left:2px solid transparent}
.nav a:hover{background:var(--card);text-decoration:none;color:var(--ink)}
.nav a.active{background:var(--card);color:var(--sun-d);border-left-color:var(--sun);font-weight:600}
.nav a .e{width:18px;text-align:center}

/* content */
main{padding:50px 56px 120px;min-width:0;max-width:860px}
main .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sun-d);font-weight:600}
.doc h1{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.02em;margin:6px 0 16px;color:var(--ink)}
.doc h1:not(:first-of-type){font-size:30px;margin-top:54px;padding-top:22px;border-top:2px solid var(--line2)}
.doc h2{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:42px 0 8px;padding-top:14px;color:var(--ink);scroll-margin-top:16px}
.doc h3{font-family:var(--display);font-weight:600;font-size:20px;margin:28px 0 6px;color:var(--ink);scroll-margin-top:16px}
.doc h4{font-size:15px;font-weight:700;margin:20px 0 4px;color:var(--ink)}
.doc p,.doc li{font-size:16px;color:var(--ink2)}
.doc ul,.doc ol{margin:10px 0 12px 24px} .doc li{margin:5px 0}
.doc strong{color:var(--ink);font-weight:600}
.doc em{color:var(--ink3)}
.doc code{font-family:var(--mono);font-size:13px;background:var(--paper2);padding:1.5px 6px;border-radius:5px;color:var(--ember);word-break:break-word}
.doc pre{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto;margin:16px 0}
.doc pre code{background:none;padding:0;color:var(--ink2);font-size:12.5px;line-height:1.6}
.doc blockquote{margin:18px 0;padding:14px 20px;background:var(--card);border-left:3px solid var(--sun);border-radius:0 10px 10px 0;color:var(--ink3)}
.doc blockquote p{font-size:15.5px}
.doc hr{border:none;border-top:1px solid var(--line);margin:30px 0}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px;background:var(--card);border-radius:10px;overflow:hidden;display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;min-width:90px}
.doc th{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper2);white-space:nowrap}
.doc td:first-child{font-weight:600;color:var(--ink)} .doc tr:last-child td{border-bottom:none}
.doc img{max-width:100%;border-radius:8px}
.doc a{border-bottom:1px solid rgba(181,101,12,.25)}

/* right TOC */
.toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:50px 16px 40px;border-left:1px solid var(--line)}
.toc .h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{display:block;font-size:12.5px;color:var(--muted);padding:4px 0 4px 10px;border-left:2px solid var(--line);line-height:1.35}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc a.active{color:var(--sun-d);border-left-color:var(--sun);font-weight:600}
.toc a.lvl3{padding-left:20px;font-size:12px}

/* home hero + cards */
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sun-d);font-weight:600}
.hero h1{font-family:var(--display);font-weight:700;font-size:46px;line-height:1.07;letter-spacing:-.02em;margin:8px 0 14px;color:var(--ink)}
.hero .lead{font-size:19px;font-family:var(--display);color:var(--ink);margin-bottom:10px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}
.pcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;overflow:hidden;color:var(--ink2)}
.pcard:hover{border-color:var(--line2);text-decoration:none;transform:translateY(-2px);transition:.15s}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--sun))}
.pcard .e{font-size:24px} .pcard h4{font-family:var(--display);font-size:20px;font-weight:700;margin:6px 0 2px;color:var(--ink)}
.pcard .w{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pcard p{font-size:13.5px;margin-top:8px}
.linkrow{display:flex;gap:11px;flex-wrap:wrap;margin:16px 0}
.lk{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 15px;font-weight:600;font-size:14px;color:var(--ink)}
.lk:hover{border-color:var(--sun);text-decoration:none}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink3);background:var(--card);margin:2px 4px 2px 0}
.pill.done{color:var(--jade);border-color:rgba(15,125,95,.3);background:rgba(15,125,95,.07)}
.loading{color:var(--muted);font-family:var(--mono);font-size:13px;padding:40px 0}

.mobnav{display:none}
@media(max-width:1100px){.layout{grid-template-columns:230px minmax(0,1fr)}.toc{display:none}}
@media(max-width:820px){.layout{grid-template-columns:1fr}.side{display:none}main{padding:28px 20px 80px}.cards{grid-template-columns:1fr}.hero h1{font-size:32px}
  .mobnav{display:flex;gap:8px;overflow-x:auto;position:sticky;top:0;background:var(--paper);padding:12px;border-bottom:1px solid var(--line);z-index:5}
  .mobnav a{white-space:nowrap;font-size:13px;padding:6px 11px;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--ink3)}}