:root { --bg:#ffffff; --fg:#1a1f2e; --muted:#5b6472; --accent:#4353ff; --border:#e4e7ec; --code-bg:#f4f5f7; --sidebar:#f9fafb; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1117; --fg:#e6e8ee; --muted:#9aa3b2; --accent:#8b95ff; --border:#262b36; --code-bg:#1a1f2b; --sidebar:#141821; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
.layout { display:flex; min-height:100vh; }
nav.sidebar { width:240px; flex-shrink:0; background:var(--sidebar); border-right:1px solid var(--border); padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; }
nav.sidebar .brand { font-weight:700; font-size:18px; margin-bottom:20px; display:block; color:var(--fg); text-decoration:none; }
nav.sidebar a.item { display:block; padding:6px 10px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:14.5px; }
nav.sidebar a.item:hover { color:var(--fg); background:var(--border); }
nav.sidebar a.item.active { color:var(--accent); font-weight:600; }
main { flex:1; min-width:0; padding:40px 48px 80px; max-width:900px; }
h1,h2,h3,h4 { line-height:1.3; scroll-margin-top:16px; }
h1 { font-size:30px; margin-top:0; }
h2 { font-size:22px; margin-top:2em; border-bottom:1px solid var(--border); padding-bottom:6px; }
h3 { font-size:17px; margin-top:1.6em; }
a { color:var(--accent); }
code { background:var(--code-bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:87%; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background:var(--code-bg); border:1px solid var(--border); border-radius:8px; padding:14px 16px; overflow-x:auto; }
pre code { background:none; border:none; padding:0; font-size:13.5px; }
img { max-width:100%; height:auto; border:1px solid var(--border); border-radius:8px; margin:0.5em 0; }
table { border-collapse:collapse; width:100%; margin:1em 0; font-size:14.5px; display:block; overflow-x:auto; }
th,td { border:1px solid var(--border); padding:7px 11px; text-align:left; vertical-align:top; }
th { background:var(--sidebar); }
blockquote { margin:1em 0; padding:8px 16px; border-left:3px solid var(--accent); background:var(--sidebar); color:var(--muted); border-radius:0 6px 6px 0; }
blockquote p { margin:6px 0; }
hr { border:none; border-top:1px solid var(--border); margin:2em 0; }
footer { margin-top:60px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
@media (max-width: 760px) { .layout { flex-direction:column; } nav.sidebar { width:100%; height:auto; position:static; } main { padding:24px 20px 60px; } }