/* Reuse Disk Ninja's color tokens from src/App.css; no remote assets or scripts. */
:root { color-scheme: light dark; --bg:#f3f4f6; --surface:#fff; --ink:#13171e; --ink-muted:#5e6877; --line:#e0e3e8; --focus:#3f51f0; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1115; --surface:#161a20; --ink:#e8ebef; --ink-muted:#8d97a5; --line:#262c35; --focus:#8c98ff; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 system-ui, sans-serif; }
header, main, footer { max-width:800px; margin:auto; padding:24px; }
header { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:20px; }
a { color:var(--focus); text-underline-offset:4px; overflow-wrap:anywhere; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; }
main { margin:32px auto; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
h1 { font-size:clamp(2rem, 7vw, 3rem); line-height:1.15; letter-spacing:-.04em; margin:0 0 16px; }
h2 { font-size:1.25rem; line-height:1.35; margin:32px 0 12px; }
p, ul { margin:12px 0; }
.meta, footer { color:var(--ink-muted); font-size:.9rem; }
a:focus-visible { outline:2px solid var(--focus); outline-offset:5px; border-radius:2px; }
.skip { position:absolute; left:16px; top:-100px; background:var(--surface); padding:8px; }
.skip:focus { top:8px; }
@media (max-width:540px) { main { margin:16px 12px; padding:24px 20px; } header, footer { padding:20px; } }