:root{--paper:#ECEEEC;--ink:#121514;--muted:#59605D;--line:#C6CCC9;--plate:#1D45C6;--fill:#FFF3C4;
--display:"Anton","Impact","Arial Narrow",sans-serif;--body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0F1211;--ink:#E8ECEA;--muted:#9AA39F;--line:#2B3230;--plate:#6B8DFF;--fill:#3A3315;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0F1211;--ink:#E8ECEA;--muted:#9AA39F;--line:#2B3230;--plate:#6B8DFF;--fill:#3A3315;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;margin:0}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 64px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:40px}
.mark{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.mark span{color:var(--plate)}
.back{color:var(--muted);font-size:.95rem}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;margin:0 0 28px}
h2{font-size:1.1rem;font-weight:700;margin:32px 0 8px}
p,ul{margin:0 0 12px;max-width:65ch}
a{color:var(--ink)}
.todo{background:var(--fill);padding:1px 5px;border-radius:2px;font-family:var(--mono);font-size:.9em}
.small{color:var(--muted);font-size:.9rem;margin-top:40px}
:focus-visible{outline:3px solid var(--plate);outline-offset:3px}