:root { color-scheme: light dark; --bg:#fff; --ink:#14141a; --muted:#5f5f6b; --line:#e4e4ea; --accent:#c2410c; --note:#f6f6f9; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e0e12; --ink:#f4f4f7; --muted:#a0a0ae; --line:#26262e; --accent:#fb923c; --note:#17171d; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100vh; display:flex; flex-direction:column; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--bg); padding:8px; z-index:1; }
header, footer, main { width:100%; max-width:760px; margin:0 auto; padding:0 24px; }
header { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; justify-content:space-between; padding-top:24px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:1.25rem; letter-spacing:-.02em; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:4px 20px; font-size:.95rem; }
nav a[aria-current="page"] { font-weight:700; }
main { flex:1; padding-top:32px; padding-bottom:48px; }
h1 { font-size:clamp(2rem,6vw,3rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 16px; }
h2 { font-size:1.3rem; margin:2rem 0 .5rem; }
p, li { max-width:65ch; } li { margin:.3rem 0; }
a { color:var(--accent); text-underline-offset:3px; } .brand, nav a { color:inherit; }
.lead { font-size:1.25rem; color:var(--muted); }
.updated { color:var(--muted); font-size:.9rem; }
.box { background:var(--note); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin:1.5rem 0; }
.later { border-style:dashed; }
footer { padding-top:16px; padding-bottom:32px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }