:root { color-scheme: light dark; --bg:#fff; --fg:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7; --accent:#0a66d6; --card:#f5f5f7; }
@media (prefers-color-scheme: dark) { :root { --bg:#1c1c1e; --fg:#f5f5f7; --muted:#a1a1a6; --line:#3a3a3c; --accent:#4da3ff; --card:#2c2c2e; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 56px 20px 80px; }
nav { font-size:15px; color:var(--muted); margin-bottom:32px; }
nav a { color:var(--muted); text-decoration:none; } nav a:hover { color:var(--accent); }
h1 { font-size:34px; line-height:1.15; margin:0 0 8px; letter-spacing:-0.02em; }
h2 { font-size:22px; margin:36px 0 8px; }
p, li { color:var(--fg); } .lead { font-size:20px; color:var(--muted); margin:0 0 28px; }
a { color:var(--accent); }
ul { padding-left: 22px; } li { margin: 4px 0; }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0; text-decoration:none; color:inherit; }
.card:hover { border-color:var(--accent); } .card strong { display:block; font-size:19px; } .card span { color:var(--muted); }
footer { margin-top:56px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }