:root{
  --ground:#F5F7F6; --surface:#FFFFFF; --ink:#14201B; --muted:#5A6B64;
  --line:#D9E1DD; --accent:#0E6B55; --accent-ink:#0A5443; --amber:#9C5400;
  --red:#A0342A; --chip:#E7EFEB; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#101614; --surface:#18211D; --ink:#E7EDEA; --muted:#93A39B;
    --line:#2A3630; --accent:#4CC29E; --accent-ink:#6ED4B4; --amber:#E0A458;
    --red:#E08578; --chip:#20302A;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.55 'IBM Plex Sans',system-ui,sans-serif;
}
a{color:var(--accent-ink)}
nav{
  display:flex; flex-wrap:wrap; gap:2px; padding:10px 16px; align-items:center;
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:5;
}
nav .brand{font:600 13px/1 var(--mono); letter-spacing:.08em; margin-right:14px; color:var(--muted); text-transform:uppercase}
nav a{
  font:600 14px/1 'IBM Plex Sans',sans-serif; text-decoration:none; color:var(--muted);
  padding:8px 11px; border-radius:6px;
}
nav a:hover{color:var(--ink); background:var(--chip)}
nav a[aria-current]{color:var(--accent-ink); background:var(--chip)}
main{max-width:920px; margin:0 auto; padding:36px 20px 80px}
.eyebrow{
  font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 10px;
}
h1{
  font:700 44px/1.05 'IBM Plex Sans Condensed',sans-serif; margin:0 0 12px;
  letter-spacing:-.01em; text-wrap:balance;
}
.mission{font-size:19px; max-width:62ch; margin:0 0 16px; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px}
.chip{
  font:600 13px/1 var(--mono); background:var(--chip); color:var(--ink);
  padding:7px 10px; border-radius:999px; border:1px solid var(--line);
}
.chip .k{color:var(--muted); font-weight:400}
.chip.open{border-style:dashed; color:var(--muted)}
h2{
  font:700 15px/1.2 'IBM Plex Sans Condensed',sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:40px 0 14px;
  padding-top:18px; border-top:1px solid var(--line);
}
.glance{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:22px}
.cell{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px}
.cell h3{font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.cell p{margin:0; font-size:15px}
.cell .big{font:600 17px/1.35 'IBM Plex Sans',sans-serif}
code,.ch{font:600 .92em var(--mono); background:var(--chip); padding:1px 6px; border-radius:5px; white-space:nowrap}
ol.steps{list-style:none; counter-reset:s; margin:0; padding:0}
ol.steps>li{
  counter-increment:s; position:relative;
  padding:14px 0 14px 58px; border-bottom:1px solid var(--line);
}
ol.steps>li::before{
  content:counter(s); font:700 20px/1 'IBM Plex Sans Condensed',sans-serif;
  color:var(--accent-ink); background:var(--chip); border:1px solid var(--line);
  width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  position:absolute; left:0; top:14px;
}
ol.steps b{display:block; font-size:16px}
ol.steps p{margin:4px 0 0; color:var(--muted); font-size:15px; max-width:68ch}
table{border-collapse:collapse; width:100%; font-size:15px; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
th{font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left}
th,td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}
.twrap{overflow-x:auto}
.clockrail{list-style:none; margin:0; padding:0}
.clockrail li{display:grid; grid-template-columns:92px 1fr; gap:14px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:15px}
.clockrail .t{font:600 14px/1.5 var(--mono); color:var(--amber); white-space:nowrap; font-variant-numeric:tabular-nums}
.never{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:10px; padding:14px 18px}
.never h2{border:0; margin:0 0 8px; padding:0; color:var(--red)}
.never ul{margin:0; padding-left:18px}
.never li{margin:6px 0; font-size:15px}
.key{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:14px 18px}
.key h2{border:0; margin:0 0 8px; padding:0; color:var(--accent-ink)}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.pause{
  font:600 13px var(--mono); letter-spacing:.08em; color:var(--amber);
  border:1px dashed var(--amber); border-radius:8px; padding:8px 12px; margin:10px 0 10px 58px;
}
.foot{margin-top:44px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.say{
  font:400 15px/1.5 var(--mono); background:var(--chip); border-radius:8px;
  padding:10px 14px; margin:8px 0 0; white-space:normal;
}
details{background:var(--surface); border:1px solid var(--line); border-radius:10px; margin:10px 0}
details summary{
  cursor:pointer; padding:14px 18px; font:700 15px/1.2 'IBM Plex Sans Condensed',sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); list-style:none;
}
details summary::before{content:"+"; font:700 16px var(--mono); margin-right:10px; color:var(--muted)}
details[open] summary::before{content:"\2212"}
details summary .n{color:var(--muted); font:400 13px var(--mono); letter-spacing:0; text-transform:none; margin-left:8px}
details .twrap{padding:0 12px 12px}
details table{border:0}
.lead{font:600 12px var(--mono); background:var(--chip); border:1px solid var(--line); border-radius:6px; padding:3px 8px; white-space:nowrap}

/* Long-form pages rendered from markdown by build.py. */
.doc{max-width:860px}
.doc p,.doc li{max-width:74ch}
.doc h2{
  font:700 22px/1.25 'IBM Plex Sans Condensed',sans-serif; letter-spacing:0;
  text-transform:none; color:var(--ink); margin:38px 0 12px; padding-top:16px;
}
.doc h3{font:600 17px/1.3 'IBM Plex Sans',sans-serif; margin:26px 0 8px; color:var(--ink)}
.doc h4{font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 0 8px}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:7px 0}
.doc li>ul,.doc li>ol{margin:6px 0}
.doc blockquote{
  margin:16px 0; padding:12px 18px; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px;
}
.doc blockquote p{margin:6px 0}
.doc pre{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; overflow-x:auto; font:400 13.5px/1.5 var(--mono);
}
.doc pre code{background:none; padding:0; white-space:pre; font-weight:400}
.doc code{white-space:normal}
.doc table{margin:16px 0; display:block; overflow-x:auto}
.doc hr{border:0; border-top:1px solid var(--line); margin:34px 0}
.doc .xref{color:var(--muted); border-bottom:1px dotted var(--line)}