:root { --bg:#eef4f7; --surface:#fff; --ink:#0f2433; --muted:#5b7181; --line:#d3e1e9; --accent:#0a7ccd; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1820; --surface:#13242f; --ink:#e6f0f5; --muted:#8ea6b5; --line:#22394a; --accent:#5cc8e4; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width:720px; margin:0 auto; padding:32px 16px 48px; }
nav { display:flex; gap:20px; justify-content:center; padding:16px; border-bottom:1px solid var(--line); }
a { color:var(--accent); }
nav a { text-decoration:none; font-weight:600; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; margin:20px 0; }
h1 { font-size:32px; line-height:1.2; letter-spacing:-0.5px; margin:8px 0 12px; }
h2 { font-size:20px; margin:28px 0 8px; }
.muted { color:var(--muted); }
.hero { text-align:center; }
.hero img { width:240px; max-width:70%; height:auto; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:12px 22px; border-radius:12px; font-weight:700; text-decoration:none; }
footer { text-align:center; color:var(--muted); font-size:14px; padding:24px 16px; }