@font-face{ font-family:"ABC Areal Mono"; src:url(/fonts/ABCArealMonoVariable.woff2) format("woff2"); font-weight:400 700; font-display:swap; }
:root{ --mono:"ABC Areal Mono",ui-monospace,Menlo,Consolas,monospace; --drkm:0;
  --paper:#FFFFFF; --ink:#161616; --dim:#8B8B86; --hair:#E4E4E1; }
@media (prefers-color-scheme:dark){ :root{ --paper:#131313; --ink:#EAEAE6; --dim:#93938D; --hair:#2B2B29; --drkm:1; } }
*,*::before,*::after{ box-sizing:border-box; font-variation-settings:"DRKM" var(--drkm); }
html{ -webkit-text-size-adjust:100%; font-size:17px; }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono); line-height:1.6; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wrap{ max-width:44rem; margin:0 auto; padding:0 clamp(1.2rem,5vw,3rem); }
.topbar{ display:flex; justify-content:space-between; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--hair); font-size:.8rem; }
.topbar b{ font-weight:700; }
.topbar span{ color:var(--dim); }
main{ padding:clamp(2rem,6vw,4rem) 0 3rem; }
h1{ font-size:1.35rem; margin:0 0 .4rem; }
.meta{ color:var(--dim); font-size:.8rem; margin:0 0 2.2rem; }
h2{ font-size:1rem; margin:2.2rem 0 .6rem; }
p,li{ font-size:.92rem; }
ul{ padding-left:1.2rem; }
li{ margin:.3rem 0; }
.lede{ font-size:1rem; }
.summary{ border:1px solid var(--hair); padding:1rem 1.2rem; margin:0 0 1.5rem; }
.summary p{ margin:.3rem 0; }
.summary .k{ color:var(--dim); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
code{ font-size:.88em; background:color-mix(in srgb,var(--ink) 6%,var(--paper)); padding:.1em .35em; }
footer{ border-top:1px solid var(--hair); padding:1.4rem 0 3rem; font-size:.78rem; color:var(--dim); }
footer nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }