:root { --ink:#111113; --muted:#6e6e73; --line:rgba(0,0,0,.08); --bg:#f5f5f7; --card:#fff; --accent:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --ink:#f5f5f7; --muted:#98989f; --line:rgba(255,255,255,.1); --bg:#000; --card:#1c1c1e; --accent:#4f8bff; } }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
main { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
header { display:flex; align-items:center; gap:14px; margin-bottom: 32px; }
header img { width:48px; height:48px; border-radius:11px; }
header a { color:inherit; text-decoration:none; font-weight:600; font-size:20px; }
h1 { font-size: 40px; line-height:1.1; margin: 0 0 12px; letter-spacing:-.02em; }
h2 { font-size: 22px; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.lead { font-size: 21px; color: var(--muted); margin: 0 0 28px; }
.muted { color: var(--muted); }
a { color: var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding: 20px 22px; margin: 16px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.grid .card { margin:0; }
.card h3 { margin: 0 0 4px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
footer { margin-top: 56px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; }
footer a { color: var(--muted); margin-right: 16px; }