:root { color-scheme: dark; --bg:#222639; --card:#2d3250; --fg:#eeeef4; --muted:#a0a3b8; --accent:#bb99ff; --danger:#ff6b81; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,sans-serif; }
main { max-width:720px; margin:0 auto; padding:32px 16px 64px; }
h1 { font-size:28px; margin:0 0 4px; }
h2 { font-size:20px; margin:36px 0 8px; }
h3 { font-size:16px; margin:20px 0 4px; }
p, li { color:var(--fg); }
.lede { color:var(--muted); margin:0 0 24px; }
a { color:var(--accent); }
code { background:var(--card); padding:1px 5px; border-radius:4px; font-size:0.9em; }
.card { background:var(--card); border-radius:8px; padding:14px 16px; margin:16px 0; }
.url { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.url code { flex:1; min-width:0; overflow-wrap:anywhere; padding:6px 8px; }
button { font:inherit; border:0; border-radius:4px; background:var(--accent); color:#111; padding:6px 12px; cursor:pointer; }
nav.toc { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 8px; font-size:14px; }
.tag { font-size:12px; border:1px solid var(--muted); border-radius:4px; padding:0 5px; color:var(--muted); }
.danger { color:var(--danger); }
dt { font-weight:600; margin-top:10px; }
dd { margin:0 0 0 16px; color:var(--muted); }