@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-600-800-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-normal-latin.woff2") format("woff2");
}

/* Two inks carry the whole idea: highlighter yellow marks the people, ultramarine the agents. */
:root {
  --paper: #eef1f4;
  --paper-raised: #f7f8fa;
  --grid: rgba(22, 32, 43, 0.055);
  --ink: #16202b;
  --muted: #566374;
  --rule: #cdd4dd;
  --agent: #2f41c9;
  --agent-soft: rgba(47, 65, 201, 0.09);
  --human: #f2d64b;
  --human-ink: #16202b;
  --human-tick: #c9a227;
  --del: #647080;

  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 64ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f141b;
    --paper-raised: #151c25;
    --grid: rgba(230, 234, 240, 0.045);
    --ink: #e6eaf0;
    --muted: #9aa6b5;
    --rule: #2a3440;
    --agent: #9aa7ff;
    --agent-soft: rgba(154, 167, 255, 0.1);
    --human: #e3c843;
    --human-ink: #0f141b;
  --human-tick: #e3c843;
    --del: #7c8795;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f141b;
  --paper-raised: #151c25;
  --grid: rgba(230, 234, 240, 0.045);
  --ink: #e6eaf0;
  --muted: #9aa6b5;
  --rule: #2a3440;
  --agent: #9aa7ff;
  --agent-soft: rgba(154, 167, 255, 0.1);
  --human: #e3c843;
  --human-ink: #0f141b;
  --human-tick: #e3c843;
  --del: #7c8795;
  color-scheme: dark;
}
/* Heatmap scale: blue-red diverging with a neutral grey midpoint. Specific to this chart. */
:root{--s0:#8e2322;--s0t:#fff;--s1:#d8413f;--s1t:#fff;--s2:#f4bcb6;--s2t:#16202b;--s3:#e4e6e9;--s3t:#16202b;--s4:#9ec5f4;--s4t:#16202b;--s5:#1c5cab;--s5t:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s0:#e66767;--s0t:#0f141b;--s1:#8f2d2c;--s1t:#fff;--s2:#4d2826;--s2t:#e6eaf0;--s3:#2c3440;--s3t:#e6eaf0;--s4:#184f95;--s4t:#fff;--s5:#86b6ef;--s5t:#0d1b2e}}
:root[data-theme="dark"]{--s0:#e66767;--s0t:#0f141b;--s1:#8f2d2c;--s1t:#fff;--s2:#4d2826;--s2t:#e6eaf0;--s3:#2c3440;--s3t:#e6eaf0;--s4:#184f95;--s4t:#fff;--s5:#86b6ef;--s5t:#0d1b2e}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--body);font-size:1.1875rem;line-height:1.55}
/* A wide workspace so all eleven columns fit on a laptop; prose keeps its reading measure. */
main{max-width:92rem;margin:0 auto;padding:0 clamp(16px,3vw,40px) 56px}
a{color:var(--agent)}
a:focus-visible,summary:focus-visible,.heat td:focus-visible{outline:2px solid var(--agent);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mast{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule);margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;font:800 20px var(--display);color:var(--ink);text-decoration:none}
.brand img{width:34px;height:auto}
.brand .slash{color:var(--agent)}
.brand .ver{font:500 13px var(--mono);background:var(--human);color:var(--human-ink);padding:1px 5px}
.date{font:400 13px var(--mono);color:var(--muted)}
h1{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.q{font-size:19px;line-height:1.45;color:var(--muted);margin:4px 0 16px;max-width:var(--measure)}
.bet{max-width:80ch;font-size:18px;line-height:1.45;margin:8px 0 18px;border-left:4px solid var(--human);padding:2px 0 2px 14px}
.takeaways{margin:0 0 20px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.takeaways li{font-size:15.5px;line-height:1.4;background:var(--paper-raised);border:1px solid var(--rule);border-top:4px solid var(--agent);box-shadow:4px 4px 0 var(--rule);padding:10px 14px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 13px var(--mono);margin:0 0 10px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:16px;display:inline-block;background:var(--c);border:1px solid var(--rule)}
.legend .aside{color:var(--muted);margin-left:auto}
.scroll{overflow-x:auto;background:var(--paper-raised);border:1px solid var(--rule);box-shadow:4px 4px 0 var(--rule)}
.heat{border-collapse:separate;border-spacing:2px;width:100%;min-width:1240px;table-layout:fixed;font-family:var(--display)}
.heat th{font-size:12.5px;font-weight:700;text-align:center;vertical-align:bottom;padding:8px 4px;line-height:1.2}
.heat thead th.corner{text-align:left;width:300px;font:500 12px var(--mono);color:var(--muted)}
.heat th.fieldgap{background:var(--human);color:var(--human-ink)}
.flag{display:block;font:500 10px var(--mono);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.heat th[scope=row]{text-align:left;vertical-align:middle;padding:6px 10px;position:sticky;left:0;background:var(--paper-raised);z-index:1}
.heat th[scope=row] strong{font-size:15px;font-weight:800;display:block}
.heat th[scope=row] small{display:block;font:400 12.5px/1.25 var(--body);color:var(--muted);margin-top:2px}
.badge{display:inline-block;font:500 10.5px var(--mono);background:var(--human);color:var(--human-ink);padding:1px 5px;margin-top:3px}
tr.self th[scope=row]{box-shadow:inset 4px 0 var(--agent)}
.heat td{height:52px;text-align:center;vertical-align:middle;padding:4px 3px;cursor:default}
.heat td b{display:block;font-size:19px;font-weight:800;line-height:1.1}
.heat td span{display:block;font-size:11.5px;font-weight:600;line-height:1.2;margin-top:2px}
.heat td:hover{outline:2px solid var(--ink);outline-offset:1px}
.heat td.low{outline:1.5px dashed currentColor;outline-offset:-5px}
.heat td.low:hover{outline:2px solid var(--ink);outline-offset:1px}
.s0{background:var(--s0);color:var(--s0t);--c:var(--s0)}.s1{background:var(--s1);color:var(--s1t);--c:var(--s1)}
.s2{background:var(--s2);color:var(--s2t);--c:var(--s2)}.s3{background:var(--s3);color:var(--s3t);--c:var(--s3)}
.s4{background:var(--s4);color:var(--s4t);--c:var(--s4)}.s5{background:var(--s5);color:var(--s5t);--c:var(--s5)}
/* An open cell: the lab's own claim, still being demonstrated. Yellow is the human colour. */
.pending{background:repeating-linear-gradient(135deg,var(--human) 0 7px,color-mix(in srgb,var(--human) 55%,var(--paper-raised)) 7px 14px);color:var(--human-ink);--c:var(--human)}
.heat td{position:relative}.moved{position:absolute;top:3px;right:4px;font-style:normal;font-size:10px;line-height:1}
.lead{max-width:80ch;font-size:17px}
.moves{border-collapse:collapse;width:100%;min-width:640px;font:14px var(--display)}.moves th,.moves td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule)}.moves th{font:500 12px var(--mono);color:var(--muted)}
#detail{background:var(--paper-raised);border:1px solid var(--rule);border-left:4px solid var(--agent);box-shadow:4px 4px 0 var(--rule);padding:14px 18px;margin-top:18px;min-height:72px}
#detail h2{font-size:18px;margin:0 0 4px}
#detail p{margin:0;max-width:var(--measure);font-size:17px}
#detail .meta{font:400 12px var(--mono);color:var(--muted);margin-top:6px}
.src{margin:8px 0 0;padding-left:18px;font-size:15px}.src small{font:400 11px var(--mono);color:var(--muted)}
h2.sec{font-size:24px;font-weight:800;margin:56px 0 4px}
.sub{color:var(--muted);margin:0 0 14px;max-width:var(--measure)}
h3{font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:26px 0 10px}
.watch{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.watch article{background:var(--paper-raised);border:1px solid var(--rule);box-shadow:4px 4px 0 var(--rule);padding:18px 20px}
.watch h4{margin:0 0 6px;font-size:20px;font-weight:800}
.watch p{margin:6px 0;font-size:16px;line-height:1.45}
.watch p b{font-family:var(--display);font-size:14px}
details{background:var(--paper-raised);border:1px solid var(--rule);padding:10px 16px;margin:8px 0}
summary{cursor:pointer;font:700 16px var(--display)}
details ul{margin:10px 0 4px;padding-left:18px;max-width:80ch}details li{margin:6px 0;font-size:16px}
details li b{font-family:var(--display);font-size:14px}
.method p{max-width:var(--measure);font-size:17px}
code{font:400 .85em var(--mono)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:700px){body{font-size:17px}.q{font-size:18px}.legend .aside{margin-left:0}.heat{min-width:1000px}.heat thead th.corner{width:120px}.heat th[scope=row] small{display:none}.heat th[scope=row] strong{font-size:13px}}