:root{--b:#0a0a0b;--f:#e4e4e7;--a:#3b82f6;--m:#71717a}
*{margin:0;padding:0;box-sizing:border-box}
body{font:18px/1.6 system-ui,sans-serif;background:var(--b);color:var(--f);max-width:600px;margin:0 auto;padding:2rem 1rem;min-height:100vh}
h1{font-size:2rem;margin-bottom:.5rem}
h2{font-size:1rem;color:var(--m);font-weight:400;margin:2rem 0 .5rem;text-transform:uppercase;letter-spacing:.1em}
a{color:var(--a);text-decoration:none}
a:hover{text-decoration:underline}
a:focus{outline:2px solid var(--a);outline-offset:2px}
ul{list-style:none}
li{margin:.25rem 0}
nav{margin-bottom:2rem;border-bottom:1px solid var(--m);padding-bottom:1rem}
nav a{margin-right:1rem}
@media(prefers-color-scheme:light){:root{--b:#f9fafb;--f:#18181b;--a:#2563eb;--m:#52525b}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}