:root {
  color-scheme: light dark;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #5d6678;
  --accent: #4f6df5;
  --border: #dfe4ee;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1420; --panel:#171d2b; --text:#eef2fb; --muted:#aeb7c8; --accent:#8ea2ff; --border:#2b3549; }
}
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); line-height:1.65; }
main { max-width:900px; margin:0 auto; padding:40px 20px 64px; }
header { margin-bottom:28px; }
h1 { line-height:1.2; margin:0 0 8px; font-size:clamp(2rem,6vw,3.2rem); }
h2 { margin-top:2rem; line-height:1.25; }
p, li { font-size:1rem; }
.muted { color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px; margin:16px 0; }
nav { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px; }
nav a, .button { display:inline-block; text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:9px 14px; color:var(--text); background:var(--panel); }
a { color:var(--accent); }
footer { margin-top:42px; padding-top:20px; border-top:1px solid var(--border); color:var(--muted); font-size:.92rem; }
code { background:var(--panel); padding:.1em .35em; border-radius:6px; }
.warning { border-left:4px solid #d99614; padding-left:16px; }