/* ── tokens ─────────────────────────────────────────────────────────────
   A lab report: cool paper, ink, and two signal colours.
   --amp  power drawn (a meter's amber)      --off  power saved, servers off */
:root{
  --bg:#F5F5F1; --bg-2:#ECECE6; --bg-3:#E1E1D9;
  --fg:#14171B; --fg-dim:#454B54; --micro:#5C636D;
  --amp:#A44A00; --amp-soft:#D98A3D; --amp-wash:rgba(164,74,0,.08);
  --off:#0D6B62; --off-soft:#4FA79C; --off-wash:rgba(13,107,98,.10);
  --rule:rgba(20,23,27,.15); --rule-soft:rgba(20,23,27,.07);
  --sel:rgba(13,107,98,.18);
  --f-serif:"Source Serif 4",Charter,"Iowan Old Style",Georgia,serif;
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:1120px; --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1215; --bg-2:#161A1F; --bg-3:#1E242A;
    --fg:#E7EAED; --fg-dim:#A7AEB7; --micro:#8A929D;
    --amp:#F2A050; --amp-soft:#A86A33; --amp-wash:rgba(242,160,80,.09);
    --off:#5FC6B8; --off-soft:#3D8178; --off-wash:rgba(95,198,184,.10);
    --rule:rgba(231,234,237,.14); --rule-soft:rgba(231,234,237,.07);
    --sel:rgba(95,198,184,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1215; --bg-2:#161A1F; --bg-3:#1E242A;
  --fg:#E7EAED; --fg-dim:#A7AEB7; --micro:#8A929D;
  --amp:#F2A050; --amp-soft:#A86A33; --amp-wash:rgba(242,160,80,.09);
  --off:#5FC6B8; --off-soft:#3D8178; --off-wash:rgba(95,198,184,.10);
  --rule:rgba(231,234,237,.14); --rule-soft:rgba(231,234,237,.07);
  --sel:rgba(95,198,184,.22);
}
html{color-scheme:light dark; scroll-padding-top:72px}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-sans);
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--sel)}
a{color:inherit; text-decoration-color:var(--rule); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--off); text-decoration-color:var(--off)}
:focus-visible{outline:2px solid var(--off); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
p{margin:0}
.wrap{max-width:var(--wide); margin:0 auto; padding-inline:var(--gut)}
.mono{font-family:var(--f-mono)}
.dim{color:var(--fg-dim)}
.skip{position:absolute; left:var(--gut); top:-60px; z-index:40; padding:8px 14px; background:var(--fg); color:var(--bg);
  font-size:13.5px; text-decoration:none; border-radius:3px}
.skip:focus{top:10px; color:var(--bg)}

/* ── header ───────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; gap:24px; height:56px}
.mark{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--f-serif); font-weight:600; font-size:19px; letter-spacing:-.01em}
.mark svg{width:22px; height:22px; flex:none}
.nav{margin-left:auto; display:flex; gap:22px; align-items:center}
.nav a{font-size:13.5px; color:var(--fg-dim); text-decoration:none}
.nav a:hover{color:var(--fg)}
.nav .gh{font-family:var(--f-mono); font-size:12.5px; padding:5px 10px;
  border:1px solid var(--rule); border-radius:3px; color:var(--fg)}
.nav .gh:hover{border-color:var(--off); color:var(--off)}
@media (max-width:720px){.nav a.hs{display:none}}

/* ── title block ──────────────────────────────────────────────────────── */
.title{padding-block:clamp(48px,8vw,96px) clamp(28px,4vw,44px)}
.kicker{font-family:var(--f-mono); font-size:12.5px; color:var(--micro); letter-spacing:.02em}
.kicker b{font-weight:500; color:var(--off)}
h1,h2,h3{font-family:var(--f-serif); font-weight:600; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,72px); line-height:1.02; letter-spacing:-.025em; margin-top:18px; max-width:22ch}
h1 em{display:block; font-style:italic; font-weight:500; color:var(--off)}
h1.sm{font-size:clamp(26px,7.5vw,52px); hyphens:auto; overflow-wrap:break-word}
.abstract{margin-top:28px; display:grid; grid-template-columns:7.5rem minmax(0,62ch); gap:0 28px}
.abstract .lbl{font-family:var(--f-mono); font-size:12.5px; color:var(--micro); padding-top:5px}
.abstract p{font-size:clamp(17px,1.7vw,19.5px); line-height:1.55; color:var(--fg-dim)}
.abstract p + p{margin-top:12px; font-size:16.5px}
@media (max-width:700px){.abstract{grid-template-columns:1fr; gap:6px}}
.facts{margin:36px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--rule)}
.facts div{padding:12px 16px 13px 0}
.facts div + div{padding-left:16px; border-left:1px solid var(--rule-soft)}
.facts dt{font-family:var(--f-mono); font-size:11.5px; color:var(--micro)}
.facts dd{margin:2px 0 0; font-size:15px}
.facts dd a{text-decoration:none; border-bottom:1px solid var(--rule)}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0; border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--rule-soft)}
}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:3px;
  border:1px solid var(--rule); font-size:15px; font-weight:500; text-decoration:none; color:var(--fg)}
.btn:hover{border-color:var(--off); color:var(--off)}
.btn.solid{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.btn.solid:hover{background:var(--off); border-color:var(--off); color:var(--bg)}

/* ── figure: the live sketch ──────────────────────────────────────────── */
.fig{margin:0; border:1px solid var(--rule); background:var(--bg-2); border-radius:4px; overflow:hidden}
.fig-bar{display:flex; gap:12px; align-items:baseline; padding:9px 14px; border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:12.5px; color:var(--micro)}
.fig-bar b{color:var(--fg); font-weight:500; white-space:nowrap}
@media (max-width:560px){.fig-bar{font-size:11.5px; gap:10px; padding-inline:12px} .fig-bar .hs{display:none} .fig-bar .r{white-space:nowrap}}
@media (max-width:400px){.fig-bar b{display:none} .fig-bar span.r{margin-left:0} .fig-bar button{margin-left:auto}}   /* the caption below names the figure */
.fig-bar .r{margin-left:auto}
.fig-bar .r i{font-style:normal; color:var(--amp)}
.fig-bar button{font:inherit; color:var(--fg); background:none; border:1px solid var(--rule); border-radius:3px;
  padding:1px 9px; cursor:pointer; white-space:nowrap}
.fig-bar button:hover{border-color:var(--off); color:var(--off)}
.stage{position:relative; aspect-ratio:16/7.4}
@media (max-width:760px){.stage{aspect-ratio:4/3.6}}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:ew-resize; touch-action:pan-y}
.read{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-top:1px solid var(--rule)}
.read div{padding:9px 14px; min-width:0}
.read div + div{border-left:1px solid var(--rule-soft)}
.read dt{font-family:var(--f-mono); font-size:11.5px; color:var(--micro)}
.read dd{margin:1px 0 0; font-family:var(--f-mono); font-size:15px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.read dd.amp{color:var(--amp)} .read dd.off{color:var(--off)}
@media (max-width:560px){
  .read{grid-template-columns:1fr 1fr}
  .read div:nth-child(3){border-left:0}
  .read div:nth-child(n+3){border-top:1px solid var(--rule-soft)}
}
figcaption, .cap{font-size:13.5px; line-height:1.55; color:var(--fg-dim); max-width:96ch}
.fig + figcaption{margin-top:12px}
figcaption b, .cap b{font-weight:600; color:var(--fg)}
.key{display:inline-block; width:14px; height:2px; vertical-align:middle; margin:0 4px 2px 0}
.key.amp{background:var(--amp)} .key.b0{background:var(--micro)} .key.off{background:var(--off-soft); height:8px; opacity:.6}

/* ── numbered sections with a margin column ───────────────────────────── */
.s{border-top:1px solid var(--rule); padding-block:clamp(48px,7vw,84px)}
.s-h{display:flex; align-items:baseline; gap:14px; margin-bottom:26px}
.s-h .n{font-family:var(--f-mono); font-size:13.5px; color:var(--off); min-width:1.6em}
h2{font-size:clamp(26px,3.6vw,38px); line-height:1.12; letter-spacing:-.015em}
h3{font-size:19px; line-height:1.3}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:0 clamp(28px,5vw,64px)}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.cols > * {min-width:0}
.prose{max-width:66ch}
.prose p{color:var(--fg-dim)}
.prose p + p{margin-top:14px}
.prose strong{color:var(--fg); font-weight:600}
.side{font-size:13.5px; line-height:1.55; color:var(--fg-dim); display:grid; gap:18px; align-content:start}
.side .sn{border-top:1px solid var(--rule); padding-top:10px}
.side .sn b{display:block; font-family:var(--f-mono); font-weight:400; font-size:11.5px; color:var(--micro); margin-bottom:4px}
.side blockquote{margin:0; font-family:var(--f-serif); font-style:italic; font-size:17px; line-height:1.45; color:var(--fg)}
@media (max-width:900px){.side{margin-top:30px; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:18px 28px}}
.mt{margin-top:30px}

/* three levers */
.levers{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:2px solid var(--fg)}
.levers li{padding:16px 18px 4px 0}
.levers li + li{padding-left:18px; border-left:1px solid var(--rule-soft)}
.levers .k{font-family:var(--f-mono); font-size:12.5px; color:var(--micro)}
.levers h3{margin:4px 0 8px}
.levers p{font-size:15px; color:var(--fg-dim)}
@media (max-width:760px){
  .levers{grid-template-columns:1fr}
  .levers li + li{padding-left:0; border-left:0; border-top:1px solid var(--rule-soft)}
}

/* ── tables ───────────────────────────────────────────────────────────── */
.tw{overflow-x:auto; margin-top:28px; container-type:inline-size}
table.data{width:100%; border-collapse:collapse; font-size:15px}
.mt-s{margin-top:12px}
table.data thead th{text-align:left; font-weight:500; font-size:12.5px; color:var(--micro);
  padding:0 14px 9px 0; border-bottom:2px solid var(--fg); vertical-align:bottom}
table.data td{padding:11px 14px 11px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; color:var(--fg-dim)}
table.data tbody tr:last-child td{border-bottom:1px solid var(--rule)}
table.data td:first-child{color:var(--fg)}
table.data td.num{font-family:var(--f-mono); font-size:13.5px; color:var(--fg); white-space:nowrap; font-variant-numeric:tabular-nums}
table.data td.cls{font-family:var(--f-mono); font-size:13.5px; color:var(--off); white-space:nowrap}
table.data td a{white-space:nowrap}
.tag{display:inline-block; font-family:var(--f-mono); font-size:11.5px; padding:1px 7px; border-radius:2px;
  border:1px solid currentColor; white-space:nowrap; line-height:1.6}
.tag.pro{color:var(--off)}
.tag.con{color:var(--amp)}
.tag.mix,.tag.ctx{color:var(--micro)}

@container (max-width:600px){
  table.data.stack, table.data.stack tbody{display:block; min-width:0; width:100%}
  table.data.stack thead{display:none}
  table.data.stack tr{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
    padding:12px 0; border-bottom:1px solid var(--rule-soft)}
  table.data.stack tbody tr:last-child{border-bottom:1px solid var(--rule)}
  table.data.stack td{padding:0; border:0!important}
  table.data.stack td:first-child{flex-basis:100%}
  table.data.stack td:last-child{margin-left:auto}

  /* meter classes: class letter in the margin, accuracy and rate labelled on one line */
  table.data.meters, table.data.meters tbody{display:block; min-width:0; width:100%}
  table.data.meters thead{display:none}
  table.data.meters tr{display:grid; grid-template-columns:1.6rem auto 1fr; gap:4px 16px; padding:12px 0;
    border-bottom:1px solid var(--rule-soft)}
  table.data.meters tbody tr:last-child{border-bottom:1px solid var(--rule)}
  table.data.meters td{padding:0; border:0!important}
  table.data.meters td.cls{grid-row:1/4}
  table.data.meters td:nth-child(2), table.data.meters td:nth-child(5){grid-column:2/-1}
  table.data.meters td:nth-child(2){color:var(--fg)}
  table.data.meters td[data-l]::before{content:attr(data-l) " "; font-family:var(--f-mono); font-size:11.5px; color:var(--micro)}
}
.nw, .cap .mono, a[href*="/adr/"]{white-space:nowrap}

/* experiment arms */
.arms{margin:28px 0 0; display:grid; gap:0; border-top:2px solid var(--fg)}
.arms > div{display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 16px; padding:13px 0; border-bottom:1px solid var(--rule-soft)}
.arms dt{font-family:var(--f-mono); font-size:15px; color:var(--off)}
.arms dd{margin:0; color:var(--fg-dim); font-size:15px}
.arms dd b{color:var(--fg); font-weight:600}
.checks{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:10px}
.checks li{display:grid; grid-template-columns:1.4rem 1fr; color:var(--fg-dim); font-size:15px}
.checks li::before{content:"—"; color:var(--off); font-family:var(--f-mono)}

/* ── roadmap timeline ─────────────────────────────────────────────────── */
.tl{list-style:none; margin:30px 0 0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--rule)}
.tl li{position:relative; display:grid; grid-template-columns:11rem minmax(0,1fr); gap:2px 22px; padding:0 0 22px 30px}
.tl li::before{content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--micro); background:var(--bg)}
.tl li.done::before{background:var(--off); border-color:var(--off)}
.tl li.now::before{border-color:var(--amp); background:var(--amp-wash); box-shadow:0 0 0 4px var(--amp-wash)}
.tl .when{font-family:var(--f-mono); font-size:12.5px; color:var(--micro); padding-top:1px}
.tl li.done .when{color:var(--off)} .tl li.now .when{color:var(--amp)}
.tl h3{font-family:var(--f-sans); font-size:16.5px; font-weight:600}
.tl p{font-size:15px; color:var(--fg-dim); margin-top:2px; max-width:62ch}
@media (max-width:640px){.tl li{grid-template-columns:1fr}}

/* ── notebook ─────────────────────────────────────────────────────────── */
.books{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; margin-top:28px; align-items:start}
@media (max-width:860px){.books{grid-template-columns:1fr}}
.book{border:1px solid var(--rule); border-radius:4px; background:var(--bg-2)}
.book > header{display:flex; align-items:baseline; gap:10px; padding:11px 16px; border-bottom:1px solid var(--rule)}
.book > header h3{font-family:var(--f-sans); font-size:15px; font-weight:600}
.book > header span{margin-left:auto; font-family:var(--f-mono); font-size:12.5px; color:var(--micro)}
.log{list-style:none; margin:0; padding:0}
.log li{border-bottom:1px solid var(--rule-soft)}
.log li:last-child{border-bottom:0}
.log a{display:grid; grid-template-columns:6.4rem minmax(0,1fr); gap:2px 14px; padding:12px 16px; text-decoration:none}
.log a:hover{background:var(--bg-3); color:inherit}
.log time{font-family:var(--f-mono); font-size:12.5px; color:var(--micro); padding-top:2px}
.log b{font-weight:500}
.log a:hover b{color:var(--off)}
.log small{display:block; font-size:13.5px; color:var(--fg-dim); margin-top:2px}
.log .tag{margin-left:6px; vertical-align:1px}
@media (max-width:520px){.log a{grid-template-columns:1fr}}
.empty{padding:22px 16px; color:var(--fg-dim); font-size:15px}
.empty p + p{margin-top:10px}
.empty .big{font-family:var(--f-serif); font-size:24px; color:var(--fg)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule); padding-block:34px 44px; font-size:13.5px; color:var(--fg-dim)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:flex-start}
.foot .name{font-family:var(--f-serif); font-size:17px; color:var(--fg); font-weight:600}
.foot p + p{margin-top:4px}
.foot nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.foot nav a{text-decoration:none} .foot nav a:hover{text-decoration:underline}
@media (max-width:640px){.foot nav{margin-left:0}}

/* ── legal pages ──────────────────────────────────────────────────────── */
.legal{margin:26px 0 0; max-width:70ch; border-top:2px solid var(--fg)}
.legal > div{display:grid; grid-template-columns:12rem minmax(0,1fr); gap:0 24px; padding:15px 0; border-bottom:1px solid var(--rule-soft)}
.legal dt{font-size:13.5px; color:var(--micro); padding-top:2px}
.legal dd{margin:0; line-height:1.65}
.legal dd .sub{display:block; color:var(--fg-dim); font-size:15px; margin-top:2px}
@media (max-width:640px){.legal > div{grid-template-columns:1fr; gap:4px}}
.prose > h3{margin:30px 0 8px}
.prose ul{color:var(--fg-dim); padding-left:1.2em; margin:12px 0 0}
.prose ul li + li{margin-top:5px}
.todo{color:var(--amp); background:var(--amp-wash); padding:0 4px; border-radius:2px}

/* ── open questions ───────────────────────────────────────────────────── */
.open{list-style:none; margin:30px 0 0; padding:0; border-top:2px solid var(--fg)}
.open > li{display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:0 16px; padding:18px 0; border-bottom:1px solid var(--rule-soft)}
.open .k{font-family:var(--f-mono); font-size:13.5px; color:var(--off); padding-top:2px}
.open h3{font-family:var(--f-sans); font-size:16.5px; font-weight:600; line-height:1.4}
.open dl{margin:10px 0 0; display:grid; gap:6px}
.open dl > div{display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:0 16px}
.open dt{font-family:var(--f-mono); font-size:11.5px; color:var(--micro); padding-top:3px}
.open dd{margin:0; font-size:15px; color:var(--fg-dim)}
@media (max-width:640px){
  .open > li{grid-template-columns:1fr; gap:4px}
  .open dl > div{grid-template-columns:1fr; gap:0}
}