:root { color-scheme: light dark; --fg: #0c0a09; --muted: #57534e; --bg: #fafaf9; --border: #e7e5e4; --accent: #0369a1; }
@media (prefers-color-scheme: dark) { :root { --fg: #fafaf9; --muted: #a8a29e; --bg: #0c0a09; --border: #292524; --accent: #38bdf8; } }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 920px; margin: 0 auto; padding: 64px 24px 96px; }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
p.lede { color: var(--muted); margin: 0 0 32px; max-width: 64ch; }
p.lede a { color: var(--accent); }
ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
li { padding: 16px 0; border-bottom: 1px solid var(--border); }
li a { color: var(--accent); text-decoration: none; }
li a:hover { text-decoration: underline; }
code { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-size: 13px; }
.title { color: var(--fg); font-weight: 500; }
footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
footer a { color: var(--accent); }