:root { --bg:#0d1117; --panel:#161b22; --fg:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --border:#30363d; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background:var(--bg); color:var(--fg); line-height:1.75; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.layout { display:flex; max-width:1200px; margin:0 auto; min-height:100vh; }
nav { width:230px; flex-shrink:0; padding:24px 16px; border-right:1px solid var(--border); position:sticky; top:0; height:100vh; overflow:auto; background:var(--panel); }
nav .brand { font-size:18px; font-weight:700; margin-bottom:16px; color:var(--fg); }
nav a { display:block; padding:8px 10px; border-radius:6px; color:var(--muted); font-size:14px; }
nav a:hover { background:#21262d; text-decoration:none; color:var(--fg); }
nav a.active { background:#1f6feb33; color:var(--accent); font-weight:600; }
main { flex:1; padding:32px 40px 80px; max-width:860px; }
h1 { border-bottom:1px solid var(--border); padding-bottom:12px; }
h2 { margin-top:36px; border-bottom:1px solid var(--border); padding-bottom:6px; }
h3 { margin-top:28px; }
blockquote { margin:16px 0; padding:8px 16px; border-left:3px solid var(--accent); background:var(--panel); color:var(--muted); border-radius:0 6px 6px 0; }
table { border-collapse:collapse; margin:16px 0; width:100%; }
th, td { border:1px solid var(--border); padding:8px 12px; font-size:14px; }
th { background:var(--panel); }
code { background:var(--panel); padding:2px 6px; border-radius:4px; font-size:0.92em; }
strong { color:#ffa657; }
footer { color:var(--muted); font-size:13px; margin-top:48px; border-top:1px solid var(--border); padding-top:16px; }
@media (max-width:800px) {
  .layout { flex-direction:column; }
  nav { width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid var(--border); }
  main { padding:20px; }
}