:root { --bg:#fff; --fg:#111827; --muted:#6b7280; --accent:#1f4e79; --link:#1d4ed8; --line:#e5e7eb; --code:#f3f4f6; --side:#f8fafc; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --accent:#7fb2e5; --link:#8ab4ff; --line:#263247; --code:#1e293b; --side:#111c33; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 system-ui,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif; }
a { color:var(--link); }
.layout { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
nav { background:var(--side); border-right:1px solid var(--line); padding:20px 16px; position:sticky; top:0; align-self:start; height:100vh; overflow:auto; }
nav .brand { font-weight:700; font-size:1.15rem; color:var(--accent); text-decoration:none; display:block; margin-bottom:12px; }
nav h2 { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:18px 0 6px; }
nav a.item { display:block; padding:4px 8px; border-radius:6px; color:var(--fg); text-decoration:none; font-size:.94rem; }
nav a.item:hover { background:var(--line); }
nav a.item[aria-current="page"] { background:var(--accent); color:var(--bg); }
main { min-width:0; overflow-wrap:anywhere; padding:32px clamp(16px,5vw,64px) 64px; max-width:900px; width:100%; }
h1,h2,h3 { color:var(--accent); line-height:1.3; } h1 { margin-top:0; font-size:2rem; }
h2 { margin-top:2em; padding-bottom:.25em; border-bottom:1px solid var(--line); }
code { background:var(--code); padding:.1em .35em; border-radius:4px; font:.9em Consolas,"Cascadia Mono",monospace; }
pre { background:var(--code); padding:14px 16px; border-radius:8px; overflow:auto; } pre code { background:none; padding:0; }
table { border-collapse:collapse; display:block; overflow-x:auto; max-width:100%; } th,td { border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top; } th { background:var(--side); }
blockquote { margin:1em 0; padding:.2em 1em; border-left:4px solid var(--accent); color:var(--muted); }
footer { margin-top:3rem; color:var(--muted); font-size:.85rem; }
@media (max-width:760px) { .layout { display:block; } nav { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); } }