:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #17181a;
  --muted: #62666d;
  --line: #e2e4e8;
  --accent: #3b6cff;
  --accent-soft: #eaf0ff;
  --max: 860px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --card: #191b1f;
    --text: #f4f5f7;
    --muted: #a9adb5;
    --line: #2b2e34;
    --accent: #7ea0ff;
    --accent-soft: #1b2745;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width: var(--max); margin: 0 auto; padding: 48px 20px 72px; }
nav { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:34px; font-size:14px; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 8px 28px rgba(0,0,0,.04); }
h1 { font-size: 34px; line-height:1.15; margin:0 0 8px; }
h2 { font-size:22px; margin:34px 0 12px; }
h3 { font-size:18px; margin:24px 0 8px; }
p, li { color: var(--text); }
.muted { color:var(--muted); }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; margin-bottom:12px; }
ul { padding-left: 22px; }
footer { margin-top:28px; color:var(--muted); font-size:13px; text-align:center; }
.notice { border-left:3px solid var(--accent); padding:10px 14px; background:var(--accent-soft); border-radius:8px; }