:root {
  --bg: #0f1116;
  --panel: #141820;
  --panel-2: #1a1f2a;
  --ink: #f5f7fb;
  --muted: #b9c0cc;
  --accent: #f4c542;
  --accent-2: #ffd36b;
  --cream: #f7e8c4;
  --border: #232a36;
  --shadow: 0 18px 30px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Space Grotesk", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top left, #1a1f2a 0%, #0f1116 40%, #0b0d12 100%);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
  background: linear-gradient(180deg, #141820 0%, #11151c 100%);
  border-right: 1px solid var(--border); padding: 24px 18px;
}
.brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-weight:700; letter-spacing:.02em; }
.brand img { width:30px; height:30px; border-radius:8px; box-shadow: var(--shadow); }
.nav-group { margin-top:16px; }
.nav-title { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.nav a { display:block; padding:8px 10px; border-radius:8px; color:var(--ink); font-weight:500; }
.nav a:hover { background:#1d2430; text-decoration:none; }
.nav a.active { background:#232a36; color:var(--accent); }
.content { padding:36px 6vw 80px 6vw; }
.hero { background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:16px; padding:28px; margin-bottom:28px; }
h1, h2, h3 { font-family:"Space Grotesk", sans-serif; margin-top:28px; margin-bottom:12px; }
h1 { font-size:34px; margin-top:0; }
p { line-height:1.65; color:var(--muted); }
.card { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); margin-top:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
pre, code { font-family:"Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
pre { background:#0b0d12; color:var(--cream); padding:14px 16px; border-radius:12px; border:1px solid #222833; overflow:auto; font-size:13px; line-height:1.5; }
.pill { display:inline-block; background:rgba(244,197,66,.12); color:var(--accent); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; margin-right:6px; margin-bottom:6px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:var(--accent); color:#1a1f2a; font-weight:600; border:1px solid #d1a93a; box-shadow:var(--shadow); }
.btn-secondary { background:#1d2430; color:var(--cream); border:1px solid #2b3342; }
.search-box { margin:14px 0 18px 0; }
.search-box input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0f131b; color:var(--ink); }
.search-results { display:none; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:#111723; padding:6px 8px; }
.search-results a { display:block; padding:6px 6px; color:var(--muted); }
.search-results a:hover { color:var(--accent); }
.toc { position:sticky; top:18px; background:#141820; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:14px; box-shadow:var(--shadow); }
.toc a { display:block; padding:4px 0; color:var(--muted); }
.two-col { display:grid; grid-template-columns:1fr 240px; gap:18px; align-items:start; }
@media (max-width: 980px) { .layout{grid-template-columns:1fr;} .sidebar{position:static;height:auto;} .two-col{grid-template-columns:1fr;} }