:root { color-scheme: light dark; --ink:#10212b; --paper:#f4f8fa; --accent:#e94f46; --teal:#078482; --muted:#5a6c73; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
main { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:56px 0 72px; }
h1 { font-size:clamp(2rem,7vw,3.4rem); line-height:1.05; margin:0 0 12px; }
h2 { margin-top:34px; font-size:1.25rem; }
p,li { color:var(--muted); }
a { color:var(--teal); }
.brand { color:var(--accent); font-weight:750; margin-bottom:12px; }
.nav { display:flex; flex-wrap:wrap; gap:18px; margin:28px 0; }
.note { padding:16px; border-left:4px solid var(--accent); background:color-mix(in srgb,var(--paper) 75%,white); }
footer { margin-top:48px; font-size:.9rem; color:var(--muted); }
@media (prefers-color-scheme:dark) { :root { --ink:#f4f8fa; --paper:#0d1820; --muted:#b5c4c9; } }