:root{
  color-scheme:light;
  --ground:#eceef0;
  --paper:#f7f8f9;
  --paper-2:#e3e7ea;
  --ink:#15191c;
  --ink-2:#414a51;
  --ink-3:#5b646b;
  --line:#d0d5d9;
  --line-strong:#8e969d;
  --accent:#0066cc;
  --accent-wash:rgba(0,102,204,.10);
  --ng:#c8101e;
  --ok:#2e7d32;
  --ok-mark:#4caf50;
  --warn-mark:#f5a623;
  --grid:rgba(21,25,28,.055);
  --slot:#f3e7c9;
  --slot-ink:#6b5310;
  --specimen-ground:#f0f0f0;
  --display:"Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#101315;--paper:#16191c;--paper-2:#22272b;
    --ink:#e7eaec;--ink-2:#b5bcc2;--ink-3:#8c959c;
    --line:#2b3136;--line-strong:#545d65;
    --accent:#3f8ae6;--accent-wash:rgba(63,138,230,.12);
    --ng:#ff6b6b;--ok:#6cc374;--ok-mark:#5cb860;
    --grid:rgba(231,234,236,.045);
    --slot:#3a3120;--slot-ink:#e8c979;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#101315;--paper:#16191c;--paper-2:#22272b;
  --ink:#e7eaec;--ink-2:#b5bcc2;--ink-3:#8c959c;
  --line:#2b3136;--line-strong:#545d65;
  --accent:#3f8ae6;--accent-wash:rgba(63,138,230,.12);
  --ng:#ff6b6b;--ok:#6cc374;--ok-mark:#5cb860;
  --grid:rgba(231,234,236,.045);
  --slot:#3a3120;--slot-ink:#e8c979;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  padding-inline:20px;padding-block:0 80px;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:760px){ body{padding-inline:40px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
code{font-family:var(--display);font-stretch:87.5%;font-size:.86em}

.wrap{max-width:1080px;margin-inline:auto}
.eyebrow{
  font-family:var(--display);font-stretch:87.5%;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
h2{
  font-family:var(--display);font-stretch:87.5%;font-weight:600;
  font-size:clamp(25px,3.3vw,34px);line-height:1.2;letter-spacing:-.015em;
}
h3{font-size:18px;font-weight:600;line-height:1.4}

/* top bar */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:22px;border-bottom:1px solid var(--line);
}
.brand{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.topnav{display:flex;gap:4px 20px;flex-wrap:wrap}
.topnav a{font-family:var(--display);font-stretch:87.5%;font-size:12.5px;color:var(--ink-2);text-decoration:none}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--ink)}
.topnav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}

/* placeholder slots the owner fills in */
.slot{
  background:var(--slot);color:var(--slot-ink);
  border-radius:2px;padding:0 5px;
  font-family:var(--display);font-stretch:87.5%;font-size:.84em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.slot-block{
  border:1px dashed var(--slot-ink);background:color-mix(in srgb,var(--slot) 55%,transparent);
  color:var(--slot-ink);padding:14px 16px;font-size:14px;line-height:1.55;
}

/* grid bg */
.gridbg{position:relative;isolation:isolate}
.gridbg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent);
}

.section{padding-block:64px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:28px;scroll-margin-top:env(safe-area-inset-top,0px)}
.section-head{display:flex;flex-direction:column;gap:10px}
.lead{font-size:19px;line-height:1.6;max-width:62ch}
.muted{color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-3);line-height:1.55}

.foot{padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}