:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6470; --card:#fff; --accent:#0b6bcb; --line:#dde1e6; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171a; --fg:#e8eaed; --muted:#9aa3ad; --card:#1d2227; --accent:#6db3ff; --line:#2b3238; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui, sans-serif; }
main { max-width:40rem; margin:0 auto; padding:2rem 16px 3rem; }
h1 { font-size:2rem; margin:0 0 .25rem; }
h2 { font-size:1.15rem; margin-top:1.8rem; }
.lead { color:var(--muted); margin-top:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin:1.25rem 0; }
.button { display:inline-block; background:var(--accent); color:var(--bg); padding:.7rem 1.2rem; border-radius:8px; text-decoration:none; font-weight:600; }
.button[aria-disabled="true"] { opacity:.5; pointer-events:none; }
a { color:var(--accent); }
code { word-break:break-all; font-size:.85em; }
.muted { color:var(--muted); font-size:.9em; }
footer { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.9em; }
footer a { margin-right:1rem; }