:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#ffffff; --muted:#555; --accent:#0b5cad; --note-bg:#fff6d6; --note-border:#b38600; }
@media (prefers-color-scheme: dark) { :root { --fg:#eee; --bg:#141414; --muted:#bbb; --accent:#7fb6ff; --note-bg:#3a3100; --note-border:#e0b000; } }
* { box-sizing: border-box; }
body { margin:0; font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
.skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; background:var(--bg); padding:.5rem; }
header, main, footer { max-width: 42rem; margin: 0 auto; padding: 1rem 1.25rem; }
header { border-bottom: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); }
nav ul { list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:1rem; }
a { color: var(--accent); } a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1 { font-size: 1.6rem; line-height:1.25; }
.draft { background:var(--note-bg); border-left:4px solid var(--note-border); padding:.75rem 1rem; margin:1rem 0; }
footer { color: var(--muted); font-size: .9rem; }