:root { --bg:#fff; --fg:#1d1d1f; --muted:#6e6e73; --accent:#0071e3; --line:#d2d2d7; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#000; --fg:#f5f5f7; --muted:#a1a1a6; --accent:#2997ff; --line:#38383a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
header, main, footer { max-width:720px; margin:0 auto; padding:0 20px; }
header { padding-top:24px; padding-bottom:16px; border-bottom:1px solid var(--line); display:flex; gap:20px; flex-wrap:wrap; align-items:baseline; }
header .brand { font-weight:600; margin-right:auto; color:var(--fg); text-decoration:none; }
a { color:var(--accent); }
h1 { font-size:2rem; line-height:1.2; margin:40px 0 8px; }
h2 { font-size:1.25rem; margin:32px 0 8px; }
.muted { color:var(--muted); font-size:.9rem; }
footer { padding-top:24px; padding-bottom:40px; margin-top:48px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.button { display:inline-block; background:var(--accent); color:#fff; padding:10px 20px; border-radius:980px; text-decoration:none; font-weight:500; }