/* /compare: the router comparison page. Uses zap-tokens.css (load it first). No inline styles anywhere. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--z-bg); }
body { margin: 0; background: var(--z-bg); color: var(--z-ink); font: 400 var(--z-t-base)/var(--z-lh) var(--z-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: var(--z-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--z-ink); }
:focus-visible { outline: 2px solid var(--z-focus); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--z-max); margin: 0 auto; padding: 0 var(--z-gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* header */
.nav { border-bottom: 1px solid var(--z-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: baseline; gap: 6px; color: var(--z-ink); text-decoration: none;
  font-family: var(--z-brand, inherit); font-weight: var(--z-brand-wt, 700); font-size: var(--z-brand-size, 18px); letter-spacing: var(--z-brand-track, -0.02em); }
.brand .bolt { color: var(--z-accent-mark, var(--z-accent)); font-size: 15px; }
.brand small { font: 400 calc(12px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); letter-spacing: 0; margin-left: 2px; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { color: var(--z-muted); text-decoration: none; font-size: 14px; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--z-ink); }

/* layer 1: the first screen */
.hero { min-height: calc(100vh - 61px); min-height: calc(100svh - 61px); display: flex; flex-direction: column;
  justify-content: center; padding-top: var(--z-s8); padding-bottom: var(--z-s8); }
.eyebrow { margin: 0 0 var(--z-s5); font: var(--z-label-wt, 500) calc(var(--z-t-eyebrow) * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); letter-spacing: var(--z-track-eyebrow);
  text-transform: var(--z-label-tt, uppercase); color: var(--z-muted); }
h1 { margin: 0 0 var(--z-s4); font-size: var(--z-t-display); line-height: var(--z-lh-tight); letter-spacing: var(--z-display-track, var(--z-track-tight));
  font-family: var(--z-display, inherit); font-weight: var(--z-display-wt, 700); }
.lede { margin: 0; max-width: 60ch; font-size: var(--z-t-lg); color: var(--z-ink-2); }
.hf { margin: var(--z-s8) 0 0; }
.cta { margin: var(--z-s7) 0 0; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 3px; text-decoration: none;
  background: var(--z-accent); color: var(--z-accent-ink); font: var(--z-btn-wt, 500) 15px/1 var(--z-btn-font, var(--z-mono));
  box-shadow: var(--z-btn-glow, 0 0 0 1px rgba(34, 211, 238, 0.25), 0 10px 30px -12px rgba(34, 211, 238, 0.55));
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:hover { background: var(--z-accent-hover); color: var(--z-accent-ink); transform: translateY(-1px);
  box-shadow: var(--z-btn-glow-hover, 0 0 0 1px rgba(94, 230, 247, 0.35), 0 14px 34px -12px rgba(34, 211, 238, 0.7)); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* chart heading */
.ch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 var(--z-s5); }
.cht { margin: 0; font-family: var(--z-title, inherit); font-size: var(--z-title-size, 15px); font-weight: var(--z-title-wt, 700); color: var(--z-ink); }
.chs { margin: 0; font: var(--z-chs-style, normal) 400 calc(12px * var(--z-label-k, 1))/1.4 var(--z-label, var(--z-mono)); color: var(--z-muted); }

/* router names and values */
.rn { font-size: 15px; color: var(--z-ink-2); white-space: nowrap; }
.rn-zap { color: var(--z-ink); font-weight: 700; }
.rn-hum { color: var(--z-muted); font-style: italic; }
.v { font: 400 20px/1 var(--z-num-big, var(--z-num, var(--z-mono))); font-variant-numeric: var(--z-num-big-fv, var(--z-num-fv, tabular-nums)); letter-spacing: var(--z-num-big-track, var(--z-num-track, -0.02em)); text-align: right;
  color: var(--z-ink-2); white-space: nowrap; }
.v-zap { color: var(--z-ink); font-weight: var(--z-num-big-zap-wt, 700); }
.v-hum { color: var(--z-muted); }
.v .of, .v .u { font-size: 13px; font-weight: 400; color: var(--z-muted); letter-spacing: 0; margin-left: 2px; }
.na { font: 400 13px var(--z-font); color: var(--z-muted); letter-spacing: 0; }

/* waffle: one square per board, filled when the router fully connected it */
.wf { display: grid; gap: 14px; }
.wfr { display: grid; grid-template-columns: 148px max-content 88px; align-items: center; column-gap: 24px; }
.sqs { display: grid; grid-template-columns: repeat(25, 20px); gap: 4px; }
.sq { display: block; width: 20px; height: 20px; border-radius: 3px; background: var(--z-track); }
.wfr-zap .sq.on { background: var(--z-zap); }
.wfr-oth .sq.on { background: var(--z-other); }
.wfr-hum .sq.on { background: transparent; box-shadow: inset 0 0 0 1.5px var(--z-ref-line); }
.wf .v { font-size: var(--z-t-figure); }

/* horizontal bars */
.bc { display: grid; gap: 2px; margin: 0 -12px; }
.bcb { display: grid; grid-template-columns: 148px minmax(0, 1fr) 112px; align-items: center; column-gap: 24px; width: 100%;
  margin: 0; padding: 9px 12px; border: 0; border-radius: 6px; background: none; text-align: left; }
button.bcb { cursor: pointer; }
button.bcb:hover { background: var(--z-raise-2); }
.bar { display: block; width: 100%; height: 14px; overflow: visible; }
.bf-zap { fill: var(--z-zap); }
.bf-oth { fill: var(--z-other); }
.bf-hum { fill: none; stroke: var(--z-ref-line); stroke-width: 1.5; }
.bcr-ax { display: grid; grid-template-columns: 148px minmax(0, 1fr) 112px; column-gap: 24px; padding: 4px 12px 0; }
.ax svg { display: block; width: 100%; height: 26px; overflow: visible; }
.axl, .tk { stroke: var(--z-line-2); stroke-width: 1; }
.axsvg text, .lgsvg text { fill: var(--z-muted); font: 400 calc(11px * var(--z-label-k, 1)) var(--z-num, var(--z-mono)); font-variant-numeric: var(--z-num-fv, tabular-nums); }
.hint { margin: var(--z-s3) 0 0; font: 400 calc(12px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); }

/* three small panels (hero option) */
.hf-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-s7); }
.hf-3 .ch { flex-direction: column; gap: 4px; }
.hf-3 .bc { margin: 0; }
.hf-3 .bcb { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 8px 0; }
.hf-3 .bcb .bar { grid-column: 1 / -1; grid-row: 2; height: 10px; }
.hf-3 .bcr-ax { grid-template-columns: minmax(0, 1fr); padding: 4px 0 0; }
.hf-3 .bcr-ax > span { display: none; }
.hf-3 .v { font-size: 17px; }
.hf-3 .rn { font-size: 14px; }

/* the race: one board, four routers, one clock. Final state is the default (no script, reduced motion); compare.js
   adds .armed while the clock runs and .pin to hold the panels while the section scrolls (scroll moves the clock).
   Board colours are per copper layer, the same in every panel. */
.race { margin: 28px 0 0;
  /* copper by layer, the same in every panel: front gold, back blue, inner layers grey; pours are a light tint */
  --rc-sub: #0b0e11; --rc-edge: rgba(255, 255, 255, 0.16);
  --rc-f: #d9b56b; --rc-b: #5f9be0; --rc-i1: #8e98a4; --rc-i2: #6f7a86; --rc-via: #c3cad1;
  --rc-pad: #dfe3e7; --rc-padb: #8d97a3; --rc-rat: rgba(255, 255, 255, 0.4);
  --rc-h: clamp(260px, calc(100svh - 470px), 600px); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .race { --rc-sub: #f3f5f7; --rc-edge: rgba(0, 0, 0, 0.18);
    --rc-f: #a7791f; --rc-b: #2f6fb7; --rc-i1: #7b8794; --rc-i2: #5d6975; --rc-via: #5b646d;
    --rc-pad: #2b3137; --rc-padb: #8a939c; --rc-rat: rgba(0, 0, 0, 0.4); }
}
:root[data-theme="light"] .race { --rc-sub: #f3f5f7; --rc-edge: rgba(0, 0, 0, 0.18);
  --rc-f: #a7791f; --rc-b: #2f6fb7; --rc-i1: #7b8794; --rc-i2: #5d6975; --rc-via: #5b646d;
  --rc-pad: #2b3137; --rc-padb: #8a939c; --rc-rat: rgba(0, 0, 0, 0.4); }
.hero:has(.race) { min-height: 0; padding-top: 28px; padding-bottom: var(--z-s7); }
.hero:has(.race) h1 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 10px; }
.hero:has(.race) .lede { font-size: 17px; }
.rspace { display: none; }
.race.pin .rspace { display: block; height: 240vh; }  /* scroll room for the pinned panels (inside the content box, so sticky can use it) */
.race.pin .rstk { position: sticky; top: 12px; }
.rdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; }
.rcap { flex: 1 1 auto; margin: 0; font: 400 calc(12px * var(--z-label-k, 1))/1.2 var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase);
  letter-spacing: 0.08em; color: var(--z-muted); }
.rlb { font: 400 calc(11px * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); color: var(--z-faint); white-space: nowrap; }
.rlic { margin: 14px 0 0; font: 400 calc(11px * var(--z-label-k, 1))/1.5 var(--z-label, var(--z-mono)); color: var(--z-faint); }
.rlic a { color: var(--z-muted); }
.rclk { display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.rck { min-width: 6ch; text-align: right; font: 500 18px/1 var(--z-num, var(--z-mono)); color: var(--z-ink); font-variant-numeric: var(--z-num-fv, tabular-nums); }
.rsp { font: 400 calc(12px * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.rbtn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--z-line-2);
  border-radius: 50%; background: none; cursor: pointer; font: 400 16px/1 var(--z-font); color: var(--z-muted); }
.rbtn:hover { color: var(--z-ink); border-color: var(--z-muted); }
.nojs .rclk, .race.still .rclk, .race.still .rbtn, .race:not(.armed) .rclk { display: none; }
.rg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.rp { min-width: 0; }
.rpn { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; }
.mcp-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.rcpu { margin: 0 0 8px; font: 400 calc(11px * var(--z-label-k, 1))/1.3 var(--z-label, var(--z-mono)); color: var(--z-faint); }
.rcpus { margin: -6px 0 14px; font: 400 calc(12px * var(--z-label-k, 1))/1.5 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.rnm { font: 500 calc(12px * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: var(--z-track-eyebrow); color: var(--z-ink-2); }
.rp-zap .rnm { color: var(--z-zap); font-weight: 700; }
.rst { font: 400 calc(11px * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); color: var(--z-muted); visibility: hidden; }
.race.run .rp:not(.done) .rst { visibility: visible; animation: rpulse 1.4s ease-in-out infinite; }
@keyframes rpulse { 50% { opacity: 0.35; } }
.rbx { min-width: 0; }
.bdv { display: block; width: 100%; height: auto; max-height: var(--rc-h); overflow: visible; }
.bdv .sub { fill: var(--rc-sub); stroke: var(--rc-edge); stroke-width: 1px; vector-effect: non-scaling-stroke;
  transition: stroke 0.4s ease; }
.bdv .cu { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bdv .l0 { stroke: var(--rc-f); } .bdv .l1 { stroke: var(--rc-i1); opacity: 0.75; } .bdv .l2 { stroke: var(--rc-i2); opacity: 0.75; }
.bdv .l3 { stroke: var(--rc-b); }
.bdv .pz { stroke: none; fill-rule: evenodd; }
.bdv .l0 .pz { fill: var(--rc-f); fill-opacity: 0.07; } .bdv .l3 .pz { fill: var(--rc-b); fill-opacity: 0.08; }
.bdv .l1 .pz { fill: var(--rc-i1); fill-opacity: 0.04; } .bdv .l2 .pz { fill: var(--rc-i2); fill-opacity: 0.04; }
.bdv .pdF { fill: var(--rc-pad); } .bdv .pdB { fill: var(--rc-padb); }
.bdv .via { fill: var(--rc-via); } .bdv .hole { fill: var(--rc-sub); }
.bdv .rats { fill: none; stroke: var(--rc-rat); stroke-width: 1px; stroke-dasharray: 3 3; }
.bdv [data-off] { display: none; }
.bdv .left { fill: none; stroke: var(--z-bad); stroke-width: 1.75px; }
.rn3 { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: end;
  gap: 6px 16px; margin: 12px 0 0; }
.rq dt { margin: 0 0 4px; font: 400 calc(9.5px * var(--z-label-k, 1))/1.15 var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: 0.04em;
  white-space: nowrap; color: var(--z-muted); }
.rq dd { margin: 0; font: 500 24px/1.1 var(--z-num-big, var(--z-num, var(--z-mono))); font-variant-numeric: var(--z-num-big-fv, var(--z-num-fv, tabular-nums)); letter-spacing: -0.02em;
  white-space: nowrap; color: var(--z-ink); transition: font-size 0.35s ease; }
.cta .more { margin-left: 28px; font: 500 14px var(--z-btn-font, var(--z-mono)); color: var(--z-muted); text-decoration: none; }
.cta .more:hover { color: var(--z-ink); }
/* while the clock runs: compare.js hides what has not happened yet (.x) */
.race.armed .bdv [data-off]:not(.x) { display: inline; }
.race.armed .bdv .x { visibility: hidden; }
.race.armed .bdv .pz.x { visibility: visible; opacity: 0; }
.race.armed .bdv .pz { transition: opacity 0.9s linear; }
.race.armed .rp:not(.done) .rv { color: var(--z-ink-2); }
.race.armed .rp:not(.done) .rv-e { color: var(--z-faint); }
.rp-zap .nt { transition: stroke 0.5s ease, fill 0.5s ease; }
.rp-zap .nt.fl { stroke: var(--z-zap); }
.rp-zap .nt.fl .via { fill: var(--z-zap); }
/* the end of the section: the final result, emphasised */
.race.res .rq dd { font-size: 27px; }
.race.res .rp-zap .sub { stroke: var(--z-zap); }
.race.res .rp:not(.rp-zap) .cu, .race.res .rp:not(.rp-zap) .vias { opacity: 0.55; transition: opacity 0.4s ease; }
.race.res .bdv .left { stroke-width: 2.5px; }
@media (prefers-reduced-motion: reduce) { .race.run .rp:not(.done) .rst { animation: none; } }
@media (max-width: 1000px) and (min-width: 901px) {
  .rg { gap: 20px 20px; }
  .rq dd { font-size: 19px; }
  .race.res .rq dd { font-size: 21px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .rg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .race { --rc-h: clamp(220px, calc((100svh - 300px) / 2), 420px); }
}
@media (max-width: 760px) {
  .race { --rc-h: clamp(200px, calc((100svh - 300px) / 2), 420px); }
  .rh { margin-bottom: 10px; }
  .rcap { font-size: 11px; }
  .rg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
  .rn3 { gap: 4px 8px; margin-top: 8px; }
  .rq dt { font-size: 8.5px; letter-spacing: 0.03em; }
  .rq dd { font-size: 16px; }
  .race.res .rq dd { font-size: 18px; }
  .cta .more { display: inline-block; margin: 18px 0 0; }
}

/* layer 2: every measure */
.layer { padding-top: var(--z-s9); padding-bottom: var(--z-s8);
  background: linear-gradient(var(--z-line), var(--z-line)) center top / calc(100% - 2 * var(--z-gutter)) 1px no-repeat; }
h2 { margin: 0 0 var(--z-s5); font-size: var(--z-t-2xl); line-height: 1.15; letter-spacing: var(--z-display-track-2, -0.025em); font-family: var(--z-display, inherit); font-weight: var(--z-display-wt, 700); }
h3 { margin: var(--z-s7) 0 var(--z-s3); font-family: var(--z-title, inherit); font-weight: var(--z-title-wt, 700); font-size: 17px; letter-spacing: -0.01em; }
.ctrl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--z-s4);
  margin: 0 0 var(--z-s7); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.tabs [role=tab] { position: relative; padding: 8px 0; border: 0; background: none; cursor: pointer; font-size: 15px;
  color: var(--z-muted); }
.tabs [role=tab]:hover { color: var(--z-ink); }
.tabs [role=tab][aria-selected=true] { color: var(--z-ink); font-weight: 700; }
.tabs [role=tab][aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--z-accent-mark, var(--z-accent)); border-radius: 2px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--z-line-2); border-radius: 6px; }
.seg [role=tab] { padding: 6px 12px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: 500 calc(13px * var(--z-label-k, 1))/1.2 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.seg [role=tab]:hover { color: var(--z-ink); }
.seg [role=tab][aria-selected=true] { background: var(--z-raise-2); color: var(--z-ink); }
.nojs .ctrl { display: none; }
.pn { min-height: 0; }
.fn { margin: var(--z-s5) 0 0; font: 400 calc(12px * var(--z-label-k, 1))/1.6 var(--z-label, var(--z-mono)); color: var(--z-muted); }

/* board view: a heatmap row per board; each row opens to its numbers and routing images */
.bh { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--z-s3) var(--z-s6);
  margin-bottom: var(--z-s4); }
.bhm { display: none; flex-direction: column; gap: var(--z-s3); }
#cmp[data-m=conn] .bhm-conn, #cmp[data-m=unr] .bhm-unr, #cmp[data-m=sh] .bhm-sh, #cmp[data-m=err] .bhm-err,
#cmp[data-m=time] .bhm-time { display: flex; }
.bhm .ch { margin: 0; }
.lg { display: flex; align-items: flex-start; gap: 12px; font: 400 calc(11px * var(--z-label-k, 1))/1 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.lgl, .lgd { padding-top: 0; }
.lgs { position: relative; display: block; width: 200px; height: 26px; }
.lgb { position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--z-heat-0), var(--z-heat-1));
  background: linear-gradient(in oklab 90deg, var(--z-heat-0), var(--z-heat-1)); }
.lgsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lgsvg .tk { stroke: var(--z-muted); }
.hm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.hmh, .hr > summary { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(5, minmax(72px, 116px)); gap: 2px; }
.hh { min-width: 0; padding: 0 10px 8px; font-size: 13px; color: var(--z-muted); text-align: right; white-space: nowrap; }
.hh-zap { color: var(--z-ink); font-weight: 700; }
.hh-hum { font-style: italic; }
.hh-b { text-align: left; font: 400 calc(11px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: var(--z-track-eyebrow);
  padding-top: 3px; }
.hr > summary { list-style: none; cursor: pointer; border-radius: 4px; }
.hr > summary::-webkit-details-marker { display: none; }
.hr > summary:hover .hb { color: var(--z-ink); }
.hb { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; font-size: 14px; color: var(--z-ink-2); }
.hb::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--z-muted);
  border-bottom: 1.5px solid var(--z-muted); transform: rotate(-45deg); transition: transform .15s ease; }
.hr[open] .hb::before { transform: rotate(45deg); }
.hc { display: flex; min-width: 0; }
.hv { display: none; flex: 1; align-items: center; justify-content: flex-end; padding: 0 10px; border-radius: 3px;
  font: 500 13px/1 var(--z-num, var(--z-mono)); font-variant-numeric: var(--z-num-fv, tabular-nums); }
#cmp[data-m=conn] .hv-conn, #cmp[data-m=unr] .hv-unr, #cmp[data-m=sh] .hv-sh, #cmp[data-m=err] .hv-err,
#cmp[data-m=time] .hv-time { display: flex; }
.hv.na { color: var(--z-faint); background: var(--z-raise); }
/* a run that wrote no routing: the reason in place of a number, in the "worse" colour, on the neutral cell */
.hv.fx { color: var(--z-bad); background: var(--z-raise); font: 500 12px/1.1 var(--z-font); text-align: right; }
.nt .fx, .fxk .fx { color: var(--z-bad); }
.fxk { margin-top: var(--z-s3); }
#cmp[data-r=zap] .hh[data-r=zap], #cmp[data-r=tm] .hh[data-r=tm], #cmp[data-r=ts] .hh[data-r=ts],
#cmp[data-r=fr] .hh[data-r=fr], #cmp[data-r=hu] .hh[data-r=hu] { color: var(--z-ink); text-decoration: underline;
  text-decoration-color: var(--z-accent-mark, var(--z-accent)); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bd { padding: var(--z-s4) 10px var(--z-s7) 26px; }
.nt { border-collapse: collapse; width: auto; min-width: min(560px, 100%); font-size: 14px; margin: 0 0 var(--z-s4); }
.nt th, .nt td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--z-line); text-align: left; font-weight: 400; }
.nt thead th { font: 400 calc(11px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); text-transform: var(--z-label-tt, uppercase); letter-spacing: .08em; }
.num { text-align: right !important; font-family: var(--z-num, var(--z-mono)); font-variant-numeric: var(--z-num-fv, tabular-nums); }
.nt td.num { padding-left: 18px; }
.nt .r-zap td { color: var(--z-ink); font-weight: 700; }
.nt .r-hum td { color: var(--z-muted); }
.bdn { margin: 0 0 var(--z-s3); font: 400 calc(12px * var(--z-label-k, 1))/1.6 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--z-s3); margin: var(--z-s5) 0 var(--z-s3); }
.fig { margin: 0; }
.fig figcaption { margin-top: 6px; font-size: 13px; color: var(--z-ink-2); }
.fig-zap figcaption { color: var(--z-ink); font-weight: 700; }
.fig-hum figcaption { color: var(--z-muted); font-style: italic; }
.imgbox { position: relative; border-radius: 4px; overflow: hidden; background: var(--z-raise-2); aspect-ratio: 4 / 3; }
.imgbox img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.attr { margin: var(--z-s3) 0 0; font-size: 12px; color: var(--z-muted); }

/* layer 4: reference, collapsed */
.ref { padding-top: var(--z-s7); padding-bottom: var(--z-s9); }
.xp { border-top: 1px solid var(--z-line); }
.xp:last-child { border-bottom: 1px solid var(--z-line); }
.xp > summary { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; cursor: pointer;
  list-style: none; font-family: var(--z-display-sm, inherit); font-size: var(--z-display-sm-size, 18px); font-weight: var(--z-display-sm-wt, 700); letter-spacing: -0.01em; }
.xp > summary::-webkit-details-marker { display: none; }
.xp > summary::after { content: "+"; font: 400 20px/1 var(--z-label, var(--z-mono)); color: var(--z-muted); }
.xp[open] > summary::after { content: "\2212"; }
.xpb { padding: 0 0 var(--z-s7); }
.xpb > h3:first-child { margin-top: 0; }
.tsc { overflow-x: auto; margin: 0 0 var(--z-s3); }
.et, .kt { border-collapse: collapse; width: 100%; font-size: 14px; }
.et th, .et td, .kt th, .kt td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--z-line); text-align: left;
  vertical-align: top; font-weight: 400; }
.et thead th, .kt thead th { vertical-align: bottom; font: 400 13px/1.35 var(--z-font); color: var(--z-muted); }
.et tbody th, .kt tbody th { color: var(--z-ink); white-space: nowrap; }
.et td.num { color: var(--z-ink-2); }
.et .r-zap th, .et .r-zap td { color: var(--z-ink); font-weight: 700; }
.et .r-hum th, .et .r-hum td { color: var(--z-muted); }
.et .r-hum th { font-style: italic; }
.et .sep th { padding-top: 20px; font: 400 calc(11px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: .1em; color: var(--z-muted); }
.et .r-var th, .et .r-var td { color: var(--z-ink-2); }
.et .grp th, .et .grp td { border-top: 1px solid var(--z-line-2); }
.et thead th:first-child, .et tbody th { position: sticky; left: 0; z-index: 1; background: var(--z-bg); }
.ths { display: block; font: 400 calc(11px * var(--z-label-k, 1))/1.4 var(--z-label, var(--z-mono)); color: var(--z-muted); font-style: normal; font-weight: 400; }
.kt td { color: var(--z-ink-2); }
.dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 24px; margin: 0; font-size: 15px; }
.dl dt { color: var(--z-ink); font-weight: 700; }
.dl dd { margin: 0; color: var(--z-ink-2); }
pre { margin: 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--z-line); border-radius: 6px;
  background: var(--z-raise); font: 400 13px/1.6 var(--z-mono); color: var(--z-ink-2); }

.foot { border-top: 1px solid var(--z-line); padding: 28px 0 48px; font-size: 13px; color: var(--z-muted); }
.foot a { color: var(--z-muted); white-space: nowrap; }
.eyebrow span { white-space: nowrap; }

/* phone: restack, never shrink */
@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: var(--z-s7); padding-bottom: var(--z-s8); }
  .hf { margin-top: var(--z-s7); }
  .lede { font-size: 17px; }
  .wfr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .sqs { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; }
  .sq { width: auto; height: auto; aspect-ratio: 1; border-radius: 2px; }
  .wf { gap: 18px; }
  .wf .v { font-size: 20px; }
  .bcb, .hf-3 .bcb { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 10px 0; }
  .bcb .bar { grid-column: 1 / -1; grid-row: 2; height: 12px; }
  .bcr-ax, .hf-3 .bcr-ax { grid-template-columns: minmax(0, 1fr); padding: 4px 0 0; }
  .bcr-ax > span { display: none; }
  .hf-3 { grid-template-columns: minmax(0, 1fr); gap: var(--z-s7); }
  .layer { padding-top: var(--z-s8); }
  h2 { font-size: 26px; }
  .tabs { gap: 2px 16px; }
  .tabs [role=tab] { font-size: 14px; }
  .bc { margin: 0; }
  .ctrl { margin-bottom: var(--z-s6); }
  .hmh, .hr > summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hh-b { display: none; }
  .hh { min-width: 0; overflow: hidden; padding: 0 4px 6px; font-size: 10.5px; }
  .hb { grid-column: 1 / -1; padding: 10px 0 4px; }
  .hv { min-height: 30px; padding: 0 8px; font-size: 12px; }
  .hm { gap: 3px; }
  .bd { padding: var(--z-s4) 0 var(--z-s6); min-width: 0; }
  .nt { width: 100%; min-width: 0; font-size: 13px; }
  .nt th, .nt td { padding: 6px 6px 6px 0; }
  .nt td.num { padding-left: 6px; }
  .nt thead th { font-size: 10px; letter-spacing: .04em; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dl dd { margin-bottom: 12px; }
  .nav nav { gap: 18px; }
  .lgs { width: 150px; }
}
.h0 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 0%); color: var(--z-heat-ink-lo); }
.h1 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 3.12%); color: var(--z-heat-ink-lo); }
.h2 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 6.25%); color: var(--z-heat-ink-lo); }
.h3 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 9.38%); color: var(--z-heat-ink-lo); }
.h4 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 12.5%); color: var(--z-heat-ink-lo); }
.h5 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 15.62%); color: var(--z-heat-ink-lo); }
.h6 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 18.75%); color: var(--z-heat-ink-lo); }
.h7 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 21.88%); color: var(--z-heat-ink-lo); }
.h8 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 25%); color: var(--z-heat-ink-lo); }
.h9 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 28.12%); color: var(--z-heat-ink-lo); }
.h10 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 31.25%); color: var(--z-heat-ink-lo); }
.h11 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 34.38%); color: var(--z-heat-ink-lo); }
.h12 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 37.5%); color: var(--z-heat-ink-lo); }
.h13 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 40.62%); color: var(--z-heat-ink-lo); }
.h14 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 43.75%); color: var(--z-heat-ink-lo); }
.h15 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 46.88%); color: var(--z-heat-ink-lo); }
.h16 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 50%); color: var(--z-heat-ink-lo); }
.h17 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 53.12%); color: var(--z-heat-ink-lo); }
.h18 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 56.25%); color: var(--z-heat-ink-lo); }
.h19 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 59.38%); color: var(--z-heat-ink-lo); }
.h20 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 62.5%); color: var(--z-heat-ink-lo); }
.h21 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 65.62%); color: var(--z-heat-ink-lo); }
.h22 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 68.75%); color: var(--z-heat-ink-hi); }
.h23 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 71.88%); color: var(--z-heat-ink-hi); }
.h24 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 75%); color: var(--z-heat-ink-hi); }
.h25 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 78.12%); color: var(--z-heat-ink-hi); }
.h26 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 81.25%); color: var(--z-heat-ink-hi); }
.h27 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 84.38%); color: var(--z-heat-ink-hi); }
.h28 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 87.5%); color: var(--z-heat-ink-hi); }
.h29 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 90.62%); color: var(--z-heat-ink-hi); }
.h30 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 93.75%); color: var(--z-heat-ink-hi); }
.h31 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 96.88%); color: var(--z-heat-ink-hi); }
.h32 { background: color-mix(in oklab, var(--z-heat-0), var(--z-heat-1) 100%); color: var(--z-heat-ink-hi); }
.nojs .js-only { display: none; }
.rv.tc0 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 0%); }
.rv.tc1 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 3.12%); }
.rv.tc2 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 6.25%); }
.rv.tc3 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 9.38%); }
.rv.tc4 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 12.5%); }
.rv.tc5 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 15.62%); }
.rv.tc6 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 18.75%); }
.rv.tc7 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 21.88%); }
.rv.tc8 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 25%); }
.rv.tc9 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 28.12%); }
.rv.tc10 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 31.25%); }
.rv.tc11 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 34.38%); }
.rv.tc12 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 37.5%); }
.rv.tc13 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 40.62%); }
.rv.tc14 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 43.75%); }
.rv.tc15 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 46.88%); }
.rv.tc16 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 50%); }
.rv.tc17 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 53.12%); }
.rv.tc18 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 56.25%); }
.rv.tc19 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 59.38%); }
.rv.tc20 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 62.5%); }
.rv.tc21 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 65.62%); }
.rv.tc22 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 68.75%); }
.rv.tc23 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 71.88%); }
.rv.tc24 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 75%); }
.rv.tc25 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 78.12%); }
.rv.tc26 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 81.25%); }
.rv.tc27 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 84.38%); }
.rv.tc28 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 87.5%); }
.rv.tc29 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 90.62%); }
.rv.tc30 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 93.75%); }
.rv.tc31 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 96.88%); }
.rv.tc32 { color: color-mix(in oklab, var(--z-good), var(--z-bad) 100%); }

/* rules: which of the board's design rules each router can be given */
.rules { padding-top: var(--z-s9); padding-bottom: var(--z-s8);
  background: linear-gradient(var(--z-line), var(--z-line)) center top / calc(100% - 2 * var(--z-gutter)) 1px no-repeat; }
.rgn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; margin: 14px 0 var(--z-s7); }
.rgq { display: flex; flex-direction: column; gap: 8px; }
.rgv { font: 500 56px/1 var(--z-num-big, var(--z-num, var(--z-mono))); font-variant-numeric: var(--z-num-big-fv, var(--z-num-fv, tabular-nums)); letter-spacing: -0.03em; }
.rnm-zap { color: var(--z-zap); font-weight: 700; }
.rgs { margin: 0; font: 400 calc(11px * var(--z-label-k, 1))/1.4 var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: 0.08em;
  color: var(--z-muted); }
.rgn + .rlg, .rgn + .tsc { margin-top: var(--z-s7); }
.rmx { border-collapse: collapse; width: 100%; font-size: 15px; table-layout: fixed; }
.rmx thead td { width: 40%; }
.rmx caption { text-align: left; margin: 0 0 var(--z-s4); }
.rmx th, .rmx td { padding: 12px 10px; border-bottom: 1px solid var(--z-line); font-weight: 400; text-align: left; }
.rmx tbody th { color: var(--z-ink-2); }
.rmx .mxh { font: 500 calc(12px * var(--z-label-k, 1))/1.2 var(--z-label, var(--z-mono)); text-transform: var(--z-label-tt, uppercase); letter-spacing: 0.1em; color: var(--z-ink-2); }
.rmx .mxh-zap { color: var(--z-zap); font-weight: 700; }
.rmx td.mx svg, .rlg svg { display: block; width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.rlg svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.rmx .mo, .rlg .mo { fill: none; stroke-width: 1.5px; }
.mx-zap { color: var(--z-zap); }
.mx-oth { color: var(--z-other); }
.rlg { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 var(--z-s6); font: 400 calc(12px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); }
.rules + .layer { padding-top: var(--z-s8); }
@media (max-width: 760px) {
  .rules { padding-top: var(--z-s8); }
  .rgn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgv { font-size: 40px; }
  .rmx { font-size: 13px; }
  .rmx th, .rmx td { padding: 10px 6px; }
  .rmx thead td { width: 34%; }
  /* phones: the router names break at Trace|Maker, Free|routing, ts|circuit (<wbr> in the markup) */
  .rmx .mxh { font-size: 11px; line-height: 1.25; letter-spacing: 0; }
}

/* Method and other collapsed notes: short bullet facts */
.facts { margin: 0; padding-left: 18px; font-size: 15px; color: var(--z-ink-2); }
.facts li { margin: 0 0 6px; }

/* connect your agent: one button opens the MCP set-up per client */
.hero:has(.race) .cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; margin: 22px 0 0; }
.agent { flex: 0 1 auto; }
.agent > summary { list-style: none; cursor: pointer; }
.agent > summary::-webkit-details-marker { display: none; }
.cta .more { margin-left: 0; align-self: center; }
.agent[open] { flex-basis: 100%; min-width: 0; }
.agent[open] > summary { margin-bottom: 14px; }
.mcp { max-width: 760px; min-width: 0; }
.mcp .seg { margin-bottom: 10px; flex-wrap: wrap; max-width: 100%; }
.mcp-p { margin: 0 0 10px; }
.js .mcp-p:not(.on) { display: none; }
.mcp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px;
  font: 400 calc(11px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); }
.mcp-copy { padding: 4px 10px; border: 1px solid var(--z-line-2); border-radius: 4px; background: none; cursor: pointer;
  font: 500 calc(11px * var(--z-label-k, 1)) var(--z-label, var(--z-mono)); color: var(--z-muted); }
.mcp-copy:hover { color: var(--z-ink); border-color: var(--z-muted); }
.mcp pre { white-space: pre; font-size: 12.5px; max-width: 100%; overflow-x: auto; }  /* long commands scroll inside the box on phones */

/* launch reveal: "Introducing" types in once, then the logo; skipped with reduced motion. The logo's colours are
   tokens with the logo file's own colours as fallbacks, so a token file can recolour it. */
.hero:has(.race) .reveal { margin: 0 0 18px; line-height: 0; }
/* "Introducing" sits on the logo's top edge, in the logo's lean and tilt (build-compare.py places it from the box's
   corners); the svg's viewBox includes it, so the width below covers both */
.logo { display: block; width: clamp(240px, 27vw, 380px); height: auto; overflow: visible; --lg-ink: var(--z-logo-ink, #0d0e11);
  color: var(--z-logo-box, #7ff0fb); fill: var(--lg-ink); }
.logo .intro { font-family: var(--z-display); font-weight: var(--z-display-wt, 800); letter-spacing: 0; fill: var(--z-ink);
  animation: zintro-type 0.9s steps(11, end) 0.15s both; }
@keyframes zintro-type { from { clip-path: inset(-50% 100% -50% 0); } to { clip-path: inset(-50% 0 -50% 0); } }
.logo .lg-mark { animation: zintro-logo 0.55s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
@keyframes zintro-logo { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .logo { --lg-ink: var(--z-logo-ink, #111318); } }
:root[data-theme="light"] .logo { --lg-ink: var(--z-logo-ink, #111318); }
.hero:has(.race) .sub { font-size: var(--z-t-lg); color: var(--z-ink-2); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .logo .intro, .logo .lg-mark { animation: none; } }

/* closing line */
.close { padding-top: var(--z-s9); padding-bottom: var(--z-s9); text-align: left; }
.tag { margin: 0 0 var(--z-s6); font-family: var(--z-display, inherit); font-weight: var(--z-display-wt, 700);
  font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: var(--z-display-track, -0.03em); color: var(--z-ink); }
.tag .tz { color: var(--z-zap); }

/* the Zap! wordmark in a line of type (Yejun 2026-10-14: "sizing is off"), from the shared sprite zap-mark.svg. The
   svg's viewBox is the box straight through its centre (build-compare.py), so: height = 1.2 x the cap height of the text around it, dropped 0.1 cap below
   the baseline = the box is centred on the words' baseline and cap line; the tilted ends overhang. --zw-cap is the
   surrounding font's cap height (Pretendard 0.707 em, Unbounded 0.75 em). Word spaces in the markup give the gaps.
   Box = currentColor, letters = fill, both from the tokens. */
.zw { display: inline-block; height: calc(1.2 * var(--zw-cap, 0.707em)); width: auto; aspect-ratio: 307.2 / 131.0;
  vertical-align: calc(-0.1 * var(--zw-cap, 0.707em)); color: var(--z-logo-box, #7ff0fb); fill: var(--zw-ink, var(--z-logo-ink, #0d0e11));
  overflow: visible; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .zw { fill: var(--zw-ink, var(--z-logo-ink, #111318)); } }
:root[data-theme="light"] .zw { fill: var(--zw-ink, var(--z-logo-ink, #111318)); }
.brand, .tag { --zw-cap: 0.75em; }
/* header lockup: the logo and "by mutual" share a baseline */
.brand { display: inline-block; line-height: 1; white-space: nowrap; }
.brand .bolt { display: none; }
.brand small { margin-left: 0; }
/* race panel label and the rules count label: one line of text, not a flex row */
.rpn { align-items: baseline; }
.rpn .rnm, .rgq .rnm { display: block; line-height: 1.2; }
/* closing line: plain text flow, so the logo sits on the line like a word */
.tag { display: block; }

/* time (Yejun, option A, 2026-10-14): per router, its median and Zap!'s on the boards both fully connected; the router's
   bar above a thin Zap! bar, the line under them names Zap!'s time and the board count */
.bc-time .bcb { row-gap: 6px; }
.bars2 { display: grid; gap: 4px; min-width: 0; }
.bars2 .bar { grid-row: auto; grid-column: auto; height: 12px; }
.bars2 .bz { height: 6px; }
.vz { grid-column: 2 / 4; grid-row: 2; font: 400 13px/1.3 var(--z-font); color: var(--z-muted); }
@media (max-width: 760px) {
  .bc-time .bars2 { grid-column: 1 / -1; grid-row: 2; }
  .bc-time .vz { grid-column: 1 / -1; grid-row: 3; }
}

/* a run over 3,600 s: "timed out" in place of its time, in the exact numbers too */
.et .fx { color: var(--z-bad); white-space: nowrap; }

/* the compute switch ("1 CPU core" | "6 CPU threads"): above the race, and beside the view switch in Every measure */
.cpu-t { margin: 28px 0 0; }
.js .cpu-t ~ .cv .race { margin-top: 16px; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }

/* board details: copper layers in KiCad's colours, human and routers side by side, one layer switch per board */
.lyr { margin: var(--z-s5) 0 0; }
.lys { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.lys [role=tab] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.lsw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lc-f { background: #c83434; } .lc-b { background: #4d7fc4; }
.lc-i1 { background: #7fc87f; } .lc-i2 { background: #ce7d2c; } .lc-i3 { background: #4fcbcb; } .lc-i4 { background: #db628b; }
.lc-i5 { background: #a7a5c6; } .lc-i6 { background: #28ccd9; } .lc-i7 { background: #e8b2a7; } .lc-i8 { background: #f2eda1; }
.lc-i9 { background: #8dcb81; } .lc-i10 { background: #ed7c33; }
.figs-l { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--z-s4); }
.imgbox-l { aspect-ratio: auto; background: #001023; }
.imgbox-l img { height: auto; background: #001023; }
.imgbox img[hidden] { display: none; }