:root{
  --paper:#E8EAEE; --surface:#F8F9FB; --ink:#151C2B; --muted:#5A6377; --rule:#C8CDD7; --action:#2E3FD1; --warn:#9A5B00;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#161B26; --surface:#1F2533; --ink:#E9ECF2; --muted:#9AA3B5; --rule:#343C4E; --action:#7D8BFF; --warn:#F2B35C;
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--body)}
a{color:var(--action)}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding:0 1.25rem}
header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}
.brand{font:800 1.35rem/1 var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
header nav a{color:var(--muted);text-decoration:none;font-size:.95rem;margin-left:1rem}
main{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:2rem 2rem 1.5rem;margin:1rem 0 2rem}
@media (max-width:560px){main{padding:1.3rem 1rem}}
h1{font:800 clamp(1.9rem,5vw,2.6rem)/1.1 var(--display);letter-spacing:-.03em;margin:0 0 .4rem}
h2{font:700 1.25rem/1.3 var(--display);margin:2rem 0 .5rem}
.updated{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}
p,li{max-width:68ch}
ul{padding-left:1.2rem}
li{margin:.3rem 0}
.fill{background:rgba(201,142,0,.18);color:var(--warn);font-weight:600;border-radius:3px;padding:0 .2rem}
footer{padding:1.5rem 0 3rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--rule)}
footer a{color:var(--muted);margin-right:1rem}