:root { --bg:#15171B; --surface:#1E2126; --ink:#F1EADB; --muted:#9A958A; --signal:#7FE36F; --hair:rgba(241,234,219,.14); }
@media (prefers-color-scheme: light) { :root { --bg:#EFE9DC; --surface:#F7F3EA; --ink:#15171B; --muted:#6B675F; --signal:#2E9A3E; --hair:rgba(21,23,27,.14); } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
header svg { width: 44px; height: 44px; }
header a { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .01em; }
nav { font-size: 14px; color: var(--muted); margin-left: auto; }
nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
nav a:hover { color: var(--signal); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 36px 0 8px; padding-top: 20px; border-top: 1px solid var(--hair); }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--signal); }
ul { padding-left: 20px; }
footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
code { font: 15px ui-monospace, Menlo, monospace; }