/* SO-Arena project page.
   Type: Instrument Serif (display), Inter (text), JetBrains Mono (labels and figures); all SIL Open Font License.
   Colour: ink on white with hairlines; two accents from the paper's ring, wine for capability and blue for
   reliability; the paper's size colours in charts only. */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff; --soft: #f7f7f4; --soft-2: #f1f0eb;
  --ink: #0f1216; --ink-2: #2d3238; --muted: #5d646c; --faint: #737a81;
  --line: #e7e6e0; --line-2: #d8d7cf;
  --cap: #a83a52; --cap-soft: #f7eaed; --cap-mid: #e6bfc8;
  --rel: #2c6aa8; --rel-soft: #e9f0f8; --rel-mid: #bcd2ea;
  --s2: #b0652d; --api: #c08a2c; --lat: #8b9299; --good: #2f7d57;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1200px; --r: 12px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 18, 22, .04), 0 8px 24px rgba(15, 18, 22, .06);
  --shadow-lg: 0 24px 60px rgba(15, 18, 22, .16);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.6 var(--sans); font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rel); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--rel-mid); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 14px; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--mono); }
.label { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- Navigation ------------------------------------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { height: 60px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.mark { width: 22px; height: 22px; flex: none; display: block; }  /* the logo's ring, inline (assets/img/favicon.svg) */
.nav-links { display: flex; gap: 2px; margin-left: 8px; }
.nav-links a { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 10px; border-radius: 6px; transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--ink); background: var(--soft); }
.nav-links a.on { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ext { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 7px 10px; border-radius: 6px; }
.ext:hover { background: var(--soft); color: var(--ink); }
.ext svg { width: 15px; height: 15px; }
.burger { display: none; width: 38px; height: 38px; border-radius: 8px; }
.burger span { display: block; width: 18px; height: 1.6px; background: var(--ink); margin: 4px auto; }
.sheet-nav { display: none; }

/* ---- Buttons --------------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 550;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn:hover { border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #262b31; border-color: #262b31; }
.btn[aria-disabled="true"] { color: var(--faint); cursor: default; border-style: dashed; }
.btn .tagsoon { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* ---- Hero ------------------------------------------------------------------------------------------------------ */
.hero { padding: 72px 0 0; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 300px at 12% 0%, rgba(168, 58, 82, .07), transparent 70%), radial-gradient(700px 320px at 92% 8%, rgba(44, 106, 168, .07), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: start; }
.hero-logo { margin: 0 0 24px; }
h1 { font: 400 clamp(32px, 3.3vw, 46px)/1.06 var(--display); letter-spacing: -.015em; margin: 0; color: var(--ink); }
h1 em { font-style: italic; color: var(--cap); }
h1 em.r { color: var(--rel); }
.hero-text { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 22px 0 0; max-width: 640px; text-wrap: pretty; }
.hl { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; }
.hl li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.hl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.authors { margin: 26px 0 0; font-size: 14.5px; color: var(--ink); }
.authors sup { color: var(--muted); font-size: 10.5px; margin-left: 1px; }
.authors-note { margin: 4px 0 0; font: 400 11.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.board { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; padding: 3px; background: var(--soft-2); border-radius: 8px; gap: 2px; }
.seg button { height: 28px; padding: 0 11px; border-radius: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); }
.board-list { list-style: none; margin: 0; padding: 6px 0; }
.board-list li { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) 236px 10px; gap: 10px; align-items: center; padding: 7px 16px; }
.board-list .mx { display: grid; grid-template-columns: minmax(0, 1fr) 58px; column-gap: 12px; row-gap: 9px; align-items: center; }
.track { position: relative; display: block; }
.track .meter { display: block; }
.track .ref { position: absolute; top: -3px; bottom: -3px; min-width: 3px; border-radius: 1.5px; background: var(--s2); opacity: .8; }
.board-foot .keys { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.board-foot .keys span { display: inline-flex; align-items: center; gap: 7px; }
.k-ref { width: 4px; height: 12px; border-radius: 1.5px; background: var(--s2); opacity: .8; display: inline-block; }
.k-lat { width: 16px; height: 3px; border-radius: 2px; background: var(--lat); display: inline-block; }
.meter.thin { height: 3px; }
.board-list .v.lat { font-size: 11.5px; color: var(--muted); }
.board-list li:hover { background: var(--soft); }
.board-list .rk { font: 500 12px/1 var(--mono); color: var(--muted); text-align: right; }
.board-list .who { min-width: 0; text-align: left; }
.board-list .who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-list .who span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { height: 6px; border-radius: 3px; background: var(--soft-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c, var(--ink)); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.board[data-anim="0"] .meter i { transform: scaleX(0); }
.board-list .v { font: 500 13.5px/1 var(--mono); text-align: right; color: var(--ink); white-space: nowrap; }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--soft); font-size: 12.5px; color: var(--muted); }
.board-foot a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.board-foot a:hover { color: var(--rel); }


/* ---- Sections -------------------------------------------------------------------------------------------------- */
.sec { padding: 104px 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.sec-head .label { display: block; margin-bottom: 14px; }
h2 { font: 400 clamp(34px, 3.6vw, 48px)/1.04 var(--display); letter-spacing: -.012em; margin: 0; }
h2 em { font-style: italic; }
.sec-lead { margin: 0; font-size: 16px; color: var(--ink-2); max-width: 560px; justify-self: end; }
h3 { font-size: 16px; font-weight: 650; letter-spacing: -.005em; margin: 0; }
.note:empty { display: none; }
.note { font-size: 13px; color: var(--muted); margin: 14px 0 0; line-height: 1.55; }
.note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.note a:hover { text-decoration-color: var(--ink); }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tools-l, .tools-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: #fff; }
.chip:hover { border-color: var(--faint); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.search { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.search svg { width: 14px; height: 14px; color: var(--faint); }
.search input { border: 0; outline: 0; font: inherit; font-size: 13px; width: 150px; background: transparent; color: var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { appearance: none; width: 28px; height: 16px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(12px); }

/* ---- Leaderboard table ----------------------------------------------------------------------------------------- */
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: auto; background: #fff; max-height: none; }
table.lb { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.lb th, .lb td { white-space: nowrap; }
.lb thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 0; }
.lb thead th button, .lb thead th .th { width: 100%; padding: 13px 16px; text-align: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.lb thead th button:hover { color: var(--ink); }
.lb thead th[aria-sort] button { color: var(--ink); }
.lb thead th[aria-sort] button::after { content: "↓"; font-size: 11px; }
.lb thead th[aria-sort="ascending"] button::after { content: "↑"; }
.lb thead th.l, .lb td.l { text-align: left; }
.lb thead th.l button, .lb thead th.l .th { justify-content: flex-start; }
.lb td { padding: 0 16px; height: 58px; border-bottom: 1px solid var(--line); text-align: right; color: var(--ink-2); }
.lb tbody tr:last-child td { border-bottom: 0; }
.lb tbody tr[data-model] { cursor: pointer; transition: background .12s; }
@media (hover: hover) { .lb tbody tr[data-model]:hover td { background: #fafaf8; } }
.lb tr.grp th { text-align: left; padding: 9px 16px 8px; background: var(--soft); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lb tbody:first-of-type tr.grp th { border-top: 0; }
.lb .c-rk { width: 52px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; padding: 0 4px 0 14px; }
.lb .c-m { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 220px; text-align: left; padding-left: 6px; }
.lb thead .c-m { z-index: 3; }
.lb .mcell { display: flex; align-items: center; gap: 12px; }
.lb .mcell b { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.lb .mcell small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.lb .c-score { width: 1%; }
.lb .scell { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.lb .scell .meter { width: 64px; height: 5px; }
.lb .scell span { font: 600 15px/1 var(--sans); color: var(--ink); min-width: 46px; font-variant-numeric: tabular-nums; }
.lb .c-n { width: 1%; font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.lb thead th.c-n, .lb thead th.c-rk { font: 500 11px/1.2 var(--mono); }
.lb tr.ref td, .lb tr.ref .mcell b, .lb tr.ref .scell span { color: var(--muted); }
.lb .c-prof { width: 24%; padding: 0 22px 0 26px; }
.lb .dim { color: var(--faint); }
.lb td.empty { color: var(--muted); padding: 18px 16px; height: auto; }
/* domain profile: one bar per domain, grouped by family */
.dprof { display: flex; align-items: flex-end; gap: 9px; height: 28px; width: 100%; max-width: 300px; }
.pg { display: flex; align-items: flex-end; gap: 2px; height: 100%; flex: var(--n); }
.pb { position: relative; flex: 1; min-width: 5px; height: 100%; border-radius: 2px; background: var(--soft-2); overflow: hidden; }
.pb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: var(--fc); opacity: .85; }
.pb:hover::after { opacity: 1; }
.lb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-top: 14px; }
.lb-foot .note { margin: 0; }
.fam-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.fam-key span { display: inline-flex; align-items: center; gap: 6px; }
.fam-key i { width: 6px; height: 12px; border-radius: 2px; display: inline-block; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 7px; border-radius: 4px; font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.tag.s2 { background: #f6ebe1; color: #8a4d1f; } .tag.api { background: #f5eedf; color: #7a5a18; } .tag.auto { background: #e5f0ee; color: #2e6a64; } .tag.new { background: #e3ecf7; color: #285f9e; }

/* logos */
.lg { --s: 26px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; }
.lg img { width: 82%; height: 82%; object-fit: contain; }
.lg.mono { border: 0; color: #fff; font: 650 calc(var(--s) * .36)/1 var(--sans); letter-spacing: -.02em; }

/* ---- Domain cards (SEAL-style) ----------------------------------------------------------------------------------- */

/* ---- Charts ------------------------------------------------------------------------------------------------------ */
.panel { border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 20px 22px 0; }
.panel-head h3 { font: 400 26px/1.1 var(--display); }
.panel-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); max-width: 640px; }
.insights { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.insights .chart-col { padding: 8px 22px 18px; border-right: 1px solid var(--line); min-width: 0; }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart .grid line { stroke: #efeee9; }
.chart .tick { fill: var(--faint); font: 400 11px var(--mono); }
.chart .axis-t { fill: var(--muted); font: 500 12px var(--sans); }
.chart .lbl { fill: var(--ink-2); font: 500 11.5px var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.chart .lead { stroke: var(--faint); stroke-width: 1; pointer-events: none; }
.chart .pt { cursor: pointer; }
.chart .pt:focus { outline: none; }
.chart .pt:focus-visible .mk, .chart .pt:hover .mk { stroke: var(--ink); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); padding: 4px 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.dia { border-radius: 1px; transform: rotate(45deg) scale(.82); }
.legend i.ring { background: #fff !important; box-shadow: inset 0 0 0 2px var(--c); }
.legend i.ln { width: 16px; height: 2px; border-radius: 1px; }
.legend i.dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--s2); }
.tip { position: fixed; z-index: 90; pointer-events: none; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 12px 32px rgba(15, 18, 22, .14); max-width: 260px; }
.tip b { font-weight: 650; } .tip .s { color: var(--muted); } .tip .m { font-family: var(--mono); font-size: 12px; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }

/* ---- Reliability ------------------------------------------------------------------------------------------------- */
.rel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.defs { padding: 26px 28px; display: grid; gap: 22px; align-content: start; background: #fff; }
.def { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.sym { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: italic 400 26px/1 var(--display); color: #fff; background: var(--rel); }
.def:nth-child(1) .sym { background: #3d7fbf; } .def:nth-child(2) .sym { background: #2c6aa8; } .def:nth-child(3) .sym { background: var(--ink); }
.def h3 { font-size: 15.5px; margin: 1px 0 4px; }
.def p { margin: 0; font-size: 14px; color: var(--ink-2); }
.def code { font: 500 12.5px var(--mono); background: var(--soft-2); padding: 1px 5px; border-radius: 4px; }
.demo { background: var(--soft); border-left: 1px solid var(--line); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scene { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 128px; gap: 16px; align-items: center; }
.scene h4 { margin: 0; font-size: 13.5px; font-weight: 650; }
.scene p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.stage { position: relative; height: 62px; }
.blk { position: absolute; top: 4px; height: 34px; min-width: 34px; padding: 0 8px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff;
  font: 600 14px/1 var(--sans); transition: left .6s cubic-bezier(.5, 0, .2, 1), background .25s, color .25s, opacity .35s, border-color .25s; }
.blk.pick { background: var(--ink); color: #fff; }
.blk.gone { border-style: dashed; border-color: var(--faint); color: var(--faint); background: transparent; }
.blk.hide { opacity: 0; }
.caret { position: absolute; top: 44px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--rel);
  transition: left .6s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
.caret::after { content: "choice"; position: absolute; top: 9px; left: -20px; width: 40px; text-align: center; font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rel); }
.verdict { font-size: 12.5px; font-weight: 600; color: var(--good); display: flex; gap: 6px; align-items: center; min-height: 20px; opacity: 0; transition: opacity .3s; }
.verdict.on { opacity: 1; }
.verdict svg { width: 14px; height: 14px; flex: none; }

/* ---- Findings ---------------------------------------------------------------------------------------------------- */
.gap { padding: 6px 22px 20px; }
.gap-h, .gap-r { display: grid; grid-template-columns: 220px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.gap-h { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.gap-c { padding: 18px 0 6px; display: flex; gap: 10px; align-items: baseline; }
.gap-c h4 { margin: 0; font: 400 20px/1.2 var(--display); }
.gap-c span { font-size: 12.5px; color: var(--muted); }
.gap-r { padding: 5px 0; border-bottom: 1px solid #f2f1ec; }
.gap-r .dn { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.gap-r svg { width: 100%; height: 34px; display: block; overflow: visible; }
.gap-r svg text { font: 400 11px var(--mono); fill: var(--ink-2); }
.cl { display: none; }

/* ---- Benchmark --------------------------------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { padding: 26px 24px; background: #fff; }
.step + .step { border-left: 1px solid var(--line); }
.step .n { font: 500 11.5px/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
.step .big { font: 400 52px/1 var(--display); margin: 18px 0 4px; letter-spacing: -.01em; }
.step .big-cap { font-size: 13px; color: var(--muted); }
.step h3 { margin: 18px 0 6px; font-size: 16px; }
.step p { margin: 0; font-size: 14px; color: var(--ink-2); }
.step .flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; font: 400 12px var(--mono); color: var(--faint); }
.step .flow span { border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; color: var(--ink-2); background: var(--soft); }
.step .flow span.ok { color: var(--good); border-color: #bfdccb; background: #f1f8f4; }
.step .flow span.no { color: var(--cap); border-color: var(--cap-mid); background: var(--cap-soft); }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; font-size: 13.5px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dtable th { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.dtable td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); background: #fff; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable .fam-cell { font-weight: 600; color: var(--ink); width: 170px; }
.dtable .fam-cell i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--fc); margin-right: 8px; }
.dtable .dn { font-weight: 600; color: var(--ink); }
.dtable .num { font-family: var(--mono); font-size: 13px; }
.dtable .src { color: var(--muted); font-size: 12.5px; }
.score-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 20px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }
.score-box p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }
.formula { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-align: center; overflow-x: auto; }
.formula math { font-size: 20px; }
.formula .note { margin-top: 10px; }

/* ---- Evaluate ------------------------------------------------------------------------------------------------------ */
.runs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.run { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.run pre { margin: 0; padding: 14px 16px; background: #14171b; color: #e8e6df; border-radius: 9px; overflow-x: auto; font: 400 12.5px/1.7 var(--mono); }
.run p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ---- Citation, footer ---------------------------------------------------------------------------------------------- */
.bib { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }
.bib pre { margin: 0; padding: 22px 24px; overflow-x: auto; font: 400 13px/1.7 var(--mono); color: var(--ink-2); }
.bib .copy { position: absolute; top: 12px; right: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 7px; background: #fff; font-size: 12.5px; font-weight: 550; }
.bib .copy:hover { border-color: var(--faint); }
.foot { margin-top: 112px; border-top: 1px solid var(--line); padding: 32px 0 48px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot p { margin: 8px 0 0; font-size: 13px; color: var(--muted); max-width: 520px; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot nav a { font-size: 13.5px; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }

/* ---- Drawer ------------------------------------------------------------------------------------------------------- */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: 100%; width: min(620px, 100%); border: 0; border-left: 1px solid var(--line);
  padding: 0; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.drawer[open] { animation: slide .28s cubic-bezier(.2, .7, .2, 1); }
dialog.drawer::backdrop { background: rgba(15, 18, 22, .28); animation: fade .28s; }
@keyframes slide { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dr-head { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dr-close { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); }
.dr-close:hover { border-color: var(--faint); }
.dr-body { padding: 22px 24px 40px; }
.dr-body h2 { font-size: 36px; }
.dr-sub { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.dr-sub a { color: var(--rel); }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 20px 0 24px; }
.kv > div { padding: 14px 16px; }
.kv > div:nth-child(even) { border-left: 1px solid var(--line); }
.kv > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.kv b { display: block; font: 400 30px/1 var(--display); }
.kv span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dr-body h4 { margin: 22px 0 10px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 30px 24px minmax(0, 170px) minmax(0, 1fr) 46px; gap: 9px; align-items: center; padding: 5px 0; font-size: 13px; }
.bars.prof li { grid-template-columns: 10px 110px minmax(0, 1fr) 46px; }
.bars .rk { font: 500 11.5px/1 var(--mono); color: var(--muted); text-align: right; }
.bars .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 550; }
.bars .n:hover { color: var(--rel); }
.bars .bar { height: 8px; border-radius: 4px; background: var(--soft-2); position: relative; }
.bars .bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--bc, var(--ink)); }
.bars .bar > u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .5; }
.bars li.ref .bar > i { background: repeating-linear-gradient(135deg, #d9a77f 0 5px, #ecc9ab 5px 10px); }
.bars li.auto .bar > i { background: var(--cap-mid); }
.bars .v { font: 500 12.5px/1 var(--mono); text-align: right; }
.bars .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--fc); }
.tg { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font: 400 12.5px var(--mono); }
.tg th { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px; }
.tg th:first-child { text-align: left; width: 100px; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
.tg td { text-align: center; padding: 6px 2px; border-radius: 4px; }
.dr-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* ---- Reveal ------------------------------------------------------------------------------------------------------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .meter i, .blk, .caret, dialog.drawer[open], dialog.drawer::backdrop { transition: none; animation: none; }
}

/* ---- Responsive --------------------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .sheet-nav { display: none; border-top: 1px solid var(--line); padding: 8px 0 14px; }
  .sheet-nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .sheet-nav a { font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 12px 4px; color: var(--ink-2); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .insights { grid-template-columns: 1fr; }
  .insights .chart-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .rel { grid-template-columns: 1fr; }
  .demo { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .ext .t { display: none; }
  .hero { padding-top: 44px; }
  .sec { padding-top: 76px; }
  .sec-head { grid-template-columns: 1fr; gap: 14px; }
  .sec-lead { justify-self: start; }
  .steps, .runs { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .scene { grid-template-columns: 1fr; gap: 8px; }
  .score-box { grid-template-columns: 1fr; }
  .gap { padding: 6px 16px 16px; }
  .gap-h { display: none; }
  .gap-r { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
  .gap-r svg { height: 30px; }
  .cl { display: block; font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
  .dtable .src, .dtable .tiers { display: none; }
  .dtable .fam-cell { width: 34%; }
  .dtable td, .dtable th { padding: 11px 10px; }
  .board-list li { grid-template-columns: 22px 24px minmax(0, 1fr) 146px; padding: 7px 12px; gap: 8px; }
  .board-list .mx { grid-template-columns: minmax(0, 1fr) 52px; column-gap: 8px; }
  .lb .c-prof { display: none; }
  .lb td { padding: 0 10px; } .lb .c-m { min-width: 168px; } .lb .scell .meter { display: none; }
  .lb thead th button, .lb thead th .th { padding: 12px 10px; }
  .defs, .demo { padding: 20px; }
}

/* ---- mini charts in the findings cards ---- */
.mini { display: grid; gap: 8px; margin-top: 16px; }
.mr { display: grid; grid-template-columns: 104px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.ml { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt { position: relative; height: 6px; border-radius: 3px; background: var(--soft-2); }
.mt i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: var(--c); }
.mv { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.mt.dots { background: none; height: 14px; }
.mt.dots::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.mt.dots b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); }
.mt.dots i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cap); border: 1px solid #fff; opacity: .9; }
.step .flow + .flow { margin-top: 8px; }

/* ---- key results (hero) ---- */
.kres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 56px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kr { display: block; padding: 22px 22px 20px; color: inherit; transition: background .15s; }
.kr + .kr { border-left: 1px solid var(--line); }
.kr:first-child { padding-left: 0; }
.kr .big { font: 400 40px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.kr .big small { font: 400 20px var(--display); color: var(--muted); }
.kr h3 { margin: 12px 0 4px; font-size: 15px; }
.kr p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.kr .mini { margin-top: 14px; }
.kr .mr { grid-template-columns: 92px minmax(0, 1fr) 40px; }
@media (hover: hover) { .kr:hover { background: var(--soft); } .kr:hover h3 { color: var(--rel); } }
/* ---- board rows: a click cue ---- */
.chev { color: var(--faint); font-size: 18px; line-height: 1; text-align: right; transition: color .15s, transform .15s; }
.board-list li { cursor: pointer; }
.board-list li:hover .chev { color: var(--ink); transform: translateX(2px); }
/* ---- leaderboard: sticky header on the page, sorted column emphasised ---- */
.tbl-wrap { overflow: hidden; overflow: clip; }
.lb thead th { top: 60px; }
.lb thead th button::after { content: "↓"; font-size: 11px; visibility: hidden; }
.lb thead th[aria-sort] button::after { visibility: visible; }
.lb .scell span { font-weight: 500; }
.lb td.sorted, .lb td.sorted .scell span { color: var(--ink); font-weight: 650; }
/* ---- results panel: one full-width chart ---- */
.insights { display: block; }
.insights .chart-col { border-right: 0; }
.chart .gap { padding: 0; }
.chart .gap-ticks { display: block; width: 100%; height: 32px; overflow: visible; }
.gap-ticks text { font: 400 11px var(--mono); fill: var(--muted); letter-spacing: 0; text-transform: none; }
.gap-ticks text.t { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.legend i.ln.dash { height: 2px; border-top: 0; background: repeating-linear-gradient(90deg, var(--ink-2) 0 5px, transparent 5px 9px); }
/* ---- benchmark table ---- */
.dtable .tiers { white-space: nowrap; }
.dtable .tk { font-size: 11px; color: var(--muted); margin-right: 3px; }
/* ---- code blocks with copy buttons ---- */
.run { position: relative; }
.code pre { overflow-x: auto; white-space: pre; }
.copy-code { position: absolute; top: 12px; right: 14px; height: 26px; padding: 0 10px; border-radius: 6px; font: 500 12px var(--sans); color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); }
.copy-code:hover { color: var(--ink); border-color: var(--ink-2); }
/* ---- domain cards: ties share the badge; hover only where there is a pointer ---- */
@media (max-width: 1080px) {
  .kres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr:nth-child(3) { border-left: 0; padding-left: 0; } .kr:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sheet-nav.open { background: #fff; }
  .nav:has(.sheet-nav.open) { background: #fff; }
}
@media (max-width: 1000px) { .lb .c-prof { display: none; } }
@media (max-width: 760px) {
  .kres { grid-template-columns: 1fr; margin-top: 40px; }
  .kr, .kr:first-child, .kr:nth-child(3) { padding: 18px 0; border-left: 0; }
  .kr + .kr { border-top: 1px solid var(--line); }
  .board-list li { grid-template-columns: 22px 24px minmax(0, 1fr) 146px 8px; }
  .gap .gain { display: none; }
  .gap-h { display: none; }
  /* the leaderboard becomes a list of cards: rank, model, score; reliability and latency underneath */
  .tbl-wrap { border-radius: var(--r); }
  .lb, .lb tbody { display: block; }
  .lb thead { display: none; }
  .lb tr.grp, .lb tr.grp th { display: block; }
  .lb tbody tr[data-model] { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--line); }
  .lb tbody tr[data-model] td { display: block; height: auto; padding: 0; border: 0; background: none; }
  .lb td.c-rk { grid-row: 1 / span 2; width: auto; padding: 0; text-align: left; }
  .lb td.c-m { grid-column: 2; grid-row: 1; position: static; min-width: 0; padding: 0; }
  .lb td.c-score { grid-column: 3; grid-row: 1; }
  .lb td.c-n { grid-row: 2; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
  .lb td.c-n[data-l="Reliability"] { grid-column: 2; text-align: left; padding-left: 40px; }
  .lb td.c-n[data-l="Latency"] { grid-column: 3; text-align: right; }
  .lb td.c-n::before { content: attr(data-l) " "; font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .lb tbody tr[data-model] td.c-prof { display: none; }
  .lb td.c-score { width: auto; }
  .lb .mcell > div { min-width: 0; }
  .lb .mcell b, .lb .mcell small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel-head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .panel-head .seg button { white-space: nowrap; flex: none; }
  .gap-c { flex-direction: column; gap: 2px; }
  .gap .gap-r .cl { display: none; }
}

/* ---- board: GPT-6 Luna tick ---- */
.track .ref { width: 3px; }
/* ---- drawer: accuracy across 13 option orders ---- */
.ordr { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px 96px; gap: 8px; align-items: center; margin: 4px 0 6px; }
.ordr .ax { font: 400 11px var(--mono); color: var(--muted); text-align: center; }
.ordr .tr { position: relative; height: 16px; }
.ordr .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.ordr .tr b { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cap-mid); }
.ordr .tr i { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cap); opacity: .7; }
.ordr .tr u { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--ink); transform: rotate(45deg); }
.ordr .v { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.msort { display: none; }
@media (max-width: 760px) { .msort { display: inline-flex; } }

/* ---- chart panels: tabs on their own row, above the title ---- */
.panel-head { flex-direction: column; align-items: stretch; gap: 14px; }
.panel-head .tabrow { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.panel-head .tabrow button { white-space: nowrap; flex: none; }
.rpanel { margin-top: 20px; }
@media (max-width: 760px) {
  .panel-head .tabrow { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
}

/* ---- round 2 polish ---- */
.lb .rcell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lb .rcell .meter { width: 64px; height: 5px; }
.gap-lg { padding: 0 0 6px; }
.mr.one { grid-template-columns: 24px minmax(0, 1fr) 24px; }
.mr.one .ml, .mr.one .mv { font: 400 10.5px var(--mono); color: var(--muted); text-align: center; }
.mt.dots.big { height: 18px; }
.mt.dl { background: none; height: 13px; margin-top: 1px; }
.mt.dl span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; line-height: 1; color: var(--muted); white-space: nowrap; }
.mt.dl .lu { color: var(--ink-2); font-weight: 600; }
.mt.dl .fb { transform: translateX(-4px); }
.mt.dots.big i { width: 9px; height: 9px; margin: -5.5px 0 0 -5.5px; opacity: 1; }
.kr h3::after { content: " →"; color: var(--faint); transition: color .15s; }
.dtable th.src { font: 500 11px/1.2 var(--mono); color: var(--muted); }
.step .flow { font-family: var(--sans); font-size: 12.5px; }
.caret::after { font-size: 10.5px; }
.nav { background: rgba(255, 255, 255, .97); }
@media (max-width: 1000px) { .fam-key { display: none; } }
@media (max-width: 760px) {
  .lb .mcell small { white-space: normal; }
  .search { width: 100%; } .search input { width: 100%; }
  .lb td.c-n .rcell .meter { display: none; }
}

/* ---- animated logo (centred on a fixed O) ---- */
.logo-anim { --move: cubic-bezier(.16, 1, .3, 1); --turn: cubic-bezier(.65, 0, .35, 1); --t: 1s; }
.logo-anim .lg-s, .logo-anim .lg-arena, .logo-anim .lg-cy, .logo-anim .lg-cn, .logo-anim .lg-ring { transform-box: view-box; }
.logo-anim .lg-s, .logo-anim .lg-arena, .logo-anim .lg-cy, .logo-anim .lg-cn { transition: transform var(--t) var(--move); }
.logo-anim .lg-s { transform: translateX(var(--s-dx)); }
.logo-anim .lg-arena { transform: translateX(var(--a-dx)); }
.logo-anim .lg-cy, .logo-anim .lg-cn { transform: scaleX(0); }
.logo-anim .lg-ring { transition: transform calc(var(--t) * 1.15) var(--turn); }
.logo-anim .lg-words { opacity: 0; transition: opacity .2s ease; }
.logo-anim.open .lg-s, .logo-anim.open .lg-arena, .logo-anim.open .lg-cy, .logo-anim.open .lg-cn { transform: none; }
.logo-anim .lg-ring { transform: rotate(-180deg); }
.logo-anim.open .lg-ring { transform: rotate(0deg); }       /* at rest turned half a revolution; open: the paper's orientation */
.logo-anim.open .lg-words { opacity: 1; transition: opacity .5s ease calc(var(--t) * .8); }
.hero-logo { display: flex; justify-content: center; margin: -8px 0 40px; }
.hero-logo svg { display: block; max-width: 100%; height: auto; overflow: visible; cursor: pointer; outline: none; }
.logo-anim:focus-visible { outline: 2px solid var(--rel); outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .logo-anim .lg-s, .logo-anim .lg-arena, .logo-anim .lg-cy, .logo-anim .lg-cn, .logo-anim .lg-ring { transition: none; }
}

/* ---- "System One" in the title: a quiet underline; hover: highlighter sweep, spotlight, popover with a speed race ---- */
.s1 { position: relative; cursor: help; outline: none; border-radius: 4px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; text-decoration-color: rgba(15, 18, 22, .22);
  background: linear-gradient(transparent 58%, #ffe38a 58%, #ffe38a 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size .45s cubic-bezier(.65, 0, .35, 1), text-decoration-color .3s; }
.s1.on, .s1:focus-visible { background-size: 100% 100%; text-decoration-color: transparent; }
.spot { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse var(--rx, 260px) var(--ry, 120px) at var(--x, 50%) var(--y, 30%), transparent 55%, rgba(12, 14, 18, .2) 100%); }
.spot.on { opacity: 1; }
.s1pop { position: absolute; z-index: 62; width: min(360px, calc(100vw - 32px)); padding: 16px 18px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(15, 18, 22, .28), 0 2px 6px rgba(15, 18, 22, .06);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.s1pop[hidden] { display: block !important; visibility: hidden; }
.s1pop.on { opacity: 1; transform: none; visibility: visible; }
.s1pop p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.race { display: grid; gap: 9px; }
.race .ln { display: grid; grid-template-columns: 112px minmax(0, 1fr) 68px; gap: 10px; align-items: center; }
.race .who { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.race .who small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.race .trk { position: relative; height: 6px; border-radius: 3px; background: var(--soft-2); overflow: hidden; }
.race .trk i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 3px; transform-origin: left; transform: scaleX(0); }
.race .r1 .trk i { background: var(--cap); }
.race .r2 .trk i { background: var(--s2); }
.race .t { white-space: nowrap; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.race.go .r1 .trk i { transform: scaleX(1); transition: transform .113s linear .25s; }
.race.go .r2 .trk i { transform: scaleX(1); transition: transform 2.698s linear .25s; }
.race .done { color: var(--ink); }
.race .t.wait::after { content: "\2026"; display: inline-block; width: 1em; text-align: left; overflow: hidden; vertical-align: bottom; animation: dots 1s steps(4) infinite; }
@keyframes dots { from { width: 0; } to { width: 1em; } }
.s1pop .cap { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .s1, .spot, .s1pop { transition: none; }
  .race.go .trk i { transition: none !important; }
}

/* ---- round 3 (product-manager visitor) ---- */
.bars:not(.prof) li { grid-template-columns: 30px 24px minmax(0, 150px) minmax(0, 1fr) 46px 58px; }
.bars .ms { font: 400 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
@media (max-width: 760px) {
  .lb td.c-n.sorted { font-weight: 700; color: var(--ink); }
  .lb td.c-score:not(.sorted) .scell span { font-weight: 500; color: var(--ink-2); }
  .gap-h { display: block; padding: 4px 0 6px; } .gap-h > span { display: none; }
  .bars:not(.prof) li { grid-template-columns: 24px 22px minmax(0, 1fr) 40px 42px 50px; gap: 6px; }
}
.dr-lead { margin: 6px 0 0; font-size: 15px; color: var(--ink); }


/* ---- round 3 designer ---- */
.dr-open { overflow: hidden; }
.nav { background: #fff; }
#msort.off { display: none !important; }
.step .flow span, .step .flow span.ok, .step .flow span.no { border: 0; background: none; padding: 0; }
.step .flow span.ok { color: var(--good); } .step .flow span.no { color: var(--cap); }
@media (max-width: 760px) { .bib pre { padding-top: 44px; } }

/* ---- reliability demo: three scenes with a jumping robot ---- */
.rel2 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); overflow: hidden; }
.scene2 { padding: 22px 24px 20px; display: grid; gap: 14px; justify-items: center; }
.scene2 + .scene2 { border-left: 1px solid var(--line); }
.scene2 .sh { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--ink); justify-self: start; }
.stage2 { position: relative; width: 206px; height: 92px; }
.blk2 { position: absolute; top: 6px; height: 40px; display: grid; place-items: center; border: 1.6px solid var(--ink); border-radius: 9px; background: #fff;
  font: 650 15px/1 var(--sans); color: var(--ink); transition: left .55s cubic-bezier(.65, 0, .35, 1), transform .22s cubic-bezier(.2, 1.4, .4, 1), opacity .35s, background .2s, color .2s; }
.blk2.pick { background: var(--ink); color: #fff; }
.blk2.bump { transform: translateY(-7px); }
.blk2.gone { transform: translateY(26px) scale(.8); opacity: 0; transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .45s; }
.blk2.hide { opacity: 0; transform: translateX(14px); }
.bot { position: absolute; top: 58px; left: -34px; width: 24px; height: 30px; color: var(--ink); transition: left .6s cubic-bezier(.65, 0, .35, 1); }
.bot svg { display: block; width: 24px; height: 30px; }
.bot.jump { animation: jump .42s cubic-bezier(.2, .8, .4, 1); }
@keyframes jump { 0% { transform: translateY(0); } 40% { transform: translateY(-11px); } 100% { transform: translateY(0); } }
.scene2 .verdict { justify-self: center; }
.replay { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line-2); background: #fff; }
.replay:hover { color: var(--ink); }
.replay svg { width: 15px; height: 15px; }
.sym { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: italic 400 15px/1 var(--display); color: #fff; background: var(--ink); flex: none; }
.sym.s { background: #3d7fbf; } .sym.n { background: #2c6aa8; } .sym.r { background: var(--ink); }
.rkey { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 16px 0 0; font-size: 13.5px; color: var(--ink-2); }
.rkey span { display: inline-flex; align-items: center; gap: 8px; }
/* ---- info buttons ---- */
.info { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff;
  font: italic 600 11px/1 Georgia, serif; color: var(--muted); vertical-align: 2px; cursor: help; flex: none; padding: 0; margin-left: 2px; }
.info:hover, .info:focus-visible { color: var(--ink); border-color: var(--ink-2); outline: none; }
@media (max-width: 1080px) { .rel2 { grid-template-columns: 1fr; } .scene2 + .scene2 { border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .blk2, .bot { transition: none; } .bot.jump { animation: none; } }

/* ---- key results: title, chart, short caption; details behind the info button ---- */
.kr { position: relative; }
.krl { display: block; color: inherit; }
.kr > .info { position: absolute; top: 24px; right: 22px; }
.kr .kcap { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
@media (hover: hover) { .krl:hover h3 { color: var(--rel); } }
.blk2.gone { transform: none; opacity: 1; border-style: dashed; border-color: #c4c8cd; color: #c4c8cd; background: transparent; animation: drop .5s ease; }
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.hero-grid { align-items: center; }

/* ---- round 4 ---- */
.s1.on { z-index: 61; }                 /* above the spotlight only while open, so it never covers the sticky nav */
.hero { padding-top: 48px; }
.hero-logo { margin-bottom: 26px; }
.kres { margin-top: 40px; }
.run pre { font-size: 12px; }

/* race: one speed for both bars, so each ends at its time; System One's bar stays a short stub */
.race .r1 .trk i { width: calc(100% * 113 / 2698); min-width: 5px; }
.kr .big .arr { display: inline-block; margin: 0 10px; font: 400 26px/1 var(--sans); color: var(--muted); vertical-align: 6px; }

/* ---- round 5: hero board reorder (FLIP), sliding toggle thumb ---- */
.board-list { position: relative; }
.board-list li.enter { opacity: 0; transform: translateY(8px); }
.board-list li.enter.in { opacity: 1; transform: none; transition: opacity .3s ease .18s, transform .35s cubic-bezier(.2, .8, .2, 1) .18s; }
.board-list li.ghost { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity .2s ease; }
.board-list li.ghost.out { opacity: 0; }
.seg2 { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.seg2 button { position: relative; z-index: 1; transition: color .2s; }
.seg2 button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.seg2::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4px); border-radius: 6px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.seg2[data-on="rel"]::before { transform: translateX(calc(100% + 2px)); }
.arr { display: inline-block; transition: transform .12s ease; }
a:hover > .arr, .krl:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .seg2::before { transition: none; } }

/* ---- round 5: the leaderboard row shows its results as bars across the full width ---- */
.lb .c-m { width: 236px; }
.lb .c-score { width: auto; min-width: 250px; padding-right: 20px; }
.lb .scell { justify-content: flex-start; gap: 14px; }
.lb .scell .bt { flex: 1; min-width: 110px; max-width: 340px; }
.lb .scell .bt .meter { width: 100%; height: 6px; }
.lb .scell .bt .ref { top: -4px; bottom: -4px; width: 2px; opacity: .75; }
.lb .scell .num { min-width: 50px; text-align: right; }
.lb .c-prof { width: 200px; padding: 0 20px 0 10px; }
.lb .c-prof .dprof { height: 26px; max-width: 176px; gap: 7px; }
.lb thead th.c-score, .lb thead th.c-prof { text-align: left; }
.lb thead th.c-score button { justify-content: flex-start; }
.lb .rcell, .lb .lcell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.lb .rcell .meter { width: 84px; height: 5px; }
.lb .lcell .meter { width: 72px; height: 5px; }
.lb .num { display: inline-block; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.lb .lcell .num { min-width: 58px; }
.lb .meter.over { position: relative; }
.lb .meter.over::after { content: ""; position: absolute; top: 0; bottom: 0; right: 14px; width: 3px; background: #fff; transform: skewX(-30deg); }
.lb-keys { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.lb-keys > span, .lb-keys .fk > span { display: inline-flex; align-items: center; gap: 6px; }
.lb-keys .fk { gap: 12px; }
.lb-keys .fk i { width: 8px; height: 8px; border-radius: 2px; }
.lb-keys .k-ref { width: 2px; height: 12px; border-radius: 1px; background: var(--s2); }
@media (max-width: 1000px) { .lb-keys .fk { display: none; } .lb .c-m { width: auto; } }
@media (max-width: 1080px) { .lb .scell .bt { max-width: 220px; } .lb .rcell .meter { width: 60px; } .lb .lcell .meter { width: 52px; } }
@media (max-width: 760px) {
  .lb .scell .bt, .lb td.c-n .lcell .meter { display: none; }
  .lb .c-score { min-width: 0; padding-right: 0; }
  .lb .num { min-width: 0; }
  .lb-keys { display: none; }
}

/* ---- round 5: System One popover: lighter dim, quick shared exit, steady "thinking" ---- */
.s1 { transition: background-size .14s ease-in, text-decoration-color .14s; }
.s1.on { transition: background-size .4s cubic-bezier(.65, 0, .35, 1), text-decoration-color .3s; }
.spot { transition: opacity .12s ease-in;
  background: radial-gradient(ellipse var(--rx, 260px) var(--ry, 120px) at var(--x, 50%) var(--y, 30%), transparent 55%, rgba(12, 14, 18, .11) 100%); }
.spot.on { transition: opacity .2s ease-out; }
.s1pop { transform: translateY(4px); transition: opacity .12s ease-in, transform .12s ease-in; }
.s1pop.on { transition: opacity .18s ease-out, transform .18s ease-out; }
.race .t.wait::after { width: 1em; animation: dots2 1s steps(4) infinite; }
@keyframes dots2 { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- round 5: the logo closes in reverse order: ring words fade first, then the letters fold back ---- */
.logo-anim .lg-words { transition: opacity .1s ease-in; }
.logo-anim:not(.open) .lg-s, .logo-anim:not(.open) .lg-arena, .logo-anim:not(.open) .lg-cy, .logo-anim:not(.open) .lg-cn { transition: transform calc(var(--t) * .8) var(--move) .09s; }
.logo-anim:not(.open) .lg-ring { transition: transform calc(var(--t) * .95) var(--turn) .09s; }
@media (prefers-reduced-motion: reduce) {
  .logo-anim:not(.open) .lg-s, .logo-anim:not(.open) .lg-arena, .logo-anim:not(.open) .lg-cy, .logo-anim:not(.open) .lg-cn, .logo-anim:not(.open) .lg-ring { transition: none; }
}

/* ---- round 5: copy buttons keep their width and confirm with a check; readable selection on dark code ---- */
.copy-code, .bib .copy { min-width: 78px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: color .12s, border-color .12s, background .12s; }
.copy-code svg, .bib .copy svg { width: 13px; height: 13px; }
.copy-code.ok, .bib .copy.ok { color: #2f7d57; border-color: #a9d3bb; }
.code ::selection { background: rgba(255, 255, 255, .28); color: #fff; }
/* quick, quiet hover transitions */
.btn, .chip, .seg button, .nav-links a, .board-foot a, .krl h3 { transition: color .12s, background-color .12s, border-color .12s; }
/* ---- round 5: phone menu: the icon turns into a cross; the menu drops over the page instead of pushing it down ---- */
.burger span { transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s; transform-origin: center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .sheet-nav { display: grid !important; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; padding: 8px 24px 14px; grid-template-columns: 1fr 1fr; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(15, 18, 22, .25);
    opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s; }
  .sheet-nav.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) { .burger span, .sheet-nav { transition: none !important; } }
/* the board's reliability bar and value sit in fixed slots */
.lb td.c-n .rcell .num { min-width: 34px; }
/* ---- round 5: the drawer slides out as it closes; the sticky head names the model once scrolled ---- */
dialog.drawer[open] { animation: slide .26s cubic-bezier(.32, .72, 0, 1); }
dialog.drawer.out { animation: slideout .18s ease-in forwards; }
dialog.drawer.out::backdrop { animation: fadeout .18s ease-in forwards; }
@keyframes slideout { to { transform: translateX(24px); opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.dr-head { background: #fff; }
#dr-kicker.named { font: 650 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.s1pop { top: 0; left: 0; }             /* parked at the top while hidden, so it adds no blank space under the footer */
/* chart labels get a white halo, so lines, whiskers and frontiers never run through the text */
.chart text.lbl, .chart text.tick { paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
@media (max-width: 900px) and (min-width: 761px) {
  .lb .c-score { min-width: 0; padding-right: 10px; } .lb .scell .bt { min-width: 60px; max-width: 120px; }
  .lb .rcell .meter, .lb .lcell .meter { display: none; } .lb .c-m { min-width: 180px; }
}
/* the table's domain bars are the score split by domain: one hue (the score's), families set apart by the gaps */
.lb .c-prof .pb::after { opacity: .8; transition: opacity .12s; }
.lb .c-prof .pb:hover::after { opacity: 1; }
.lb-keys .k-prof { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.lb-keys .k-prof b { width: 3px; border-radius: 1px; background: var(--cap); opacity: .5; }
.lb-keys .k-prof b:nth-child(1) { height: 7px; } .lb-keys .k-prof b:nth-child(2) { height: 11px; } .lb-keys .k-prof b:nth-child(3) { height: 5px; }

/* ---- round 5: phone polish ---- */
.kv i.nw { font-style: normal; white-space: nowrap; }
@media (max-width: 760px) {
  .board-foot { flex-wrap: wrap; row-gap: 6px; }
  .board-foot .keys { flex: 1 1 100%; gap: 6px 14px; }
  .board-foot > a { margin-left: auto; }
  /* leaderboard controls: view and sort on one row, filters on the next, then search */
  .tools-l { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  #lb-view { order: 1; } #msort { order: 2; margin-left: auto; } #filters { order: 3; flex: 1 1 100%; }
  #lb-view button, #msort button { padding: 0 8px; font-size: 12px; }
}
/* scatter hover: the pointed model stays in focus, the rest step back */
.chart .pt, .chart .lbl, .chart .lead { transition: opacity .14s ease; }
.chart svg:has(.pt:hover) .pt:not(:hover) { opacity: .35; }
.chart svg:has(.pt:hover) .lbl, .chart svg:has(.pt:hover) .lead { opacity: .5; }
/* one numeral style for values in rows: the table's sans with tabular figures (display serif stays for headline numbers) */
.board-list .v { font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.board-list .v.lat { font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.board-list .rk { font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
/* ---- the letters unfold on the ring's own curve and duration, so reveal and rotation move together (user) ---- */
.logo-anim .lg-s, .logo-anim .lg-arena, .logo-anim .lg-cy, .logo-anim .lg-cn { transition: transform calc(var(--t) * 1.15) var(--turn); }
.logo-anim:not(.open) .lg-s, .logo-anim:not(.open) .lg-arena, .logo-anim:not(.open) .lg-cy, .logo-anim:not(.open) .lg-cn,
.logo-anim:not(.open) .lg-ring { transition: transform calc(var(--t) * .95) var(--turn) .09s; }
@media (prefers-reduced-motion: reduce) {
  .logo-anim .lg-s, .logo-anim .lg-arena, .logo-anim .lg-cy, .logo-anim .lg-cn, .logo-anim .lg-ring,
  .logo-anim:not(.open) .lg-s, .logo-anim:not(.open) .lg-arena, .logo-anim:not(.open) .lg-cy, .logo-anim:not(.open) .lg-cn, .logo-anim:not(.open) .lg-ring { transition: none; }
}

/* ---- hero: title and board balanced side by side; the key results as a full-width row below (user: 2 x 2 was too packed) ---- */
.hero h1 { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.04; }
.hero .hl { margin-top: 22px; }
.hero-grid { align-items: center; }

/* ---- highlights under the title: each opens a small animated explainer (user) ---- */
.s1 { white-space: nowrap; }
.hl li[data-hl] { cursor: help; padding: 3px 8px; margin: -3px -8px; border-radius: 7px; outline: none; transition: background-color .15s, color .15s; }
.hl li[data-hl]:hover, .hl li[data-hl][aria-expanded="true"], .hl li[data-hl]:focus-visible { background: var(--soft-2); color: var(--ink); }
.hl li[data-hl]:focus-visible { box-shadow: 0 0 0 2px var(--rel); }
.hlpop { position: absolute; top: 0; left: 0; z-index: 62; width: min(340px, calc(100vw - 32px)); padding: 15px 18px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(15, 18, 22, .28), 0 2px 6px rgba(15, 18, 22, .06);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease-in, transform .12s ease-in; }
.hlpop[hidden] { display: block !important; visibility: hidden; }
.hlpop.on { opacity: 1; transform: none; visibility: visible; transition: opacity .18s ease-out, transform .18s ease-out; }
.hlpop .label { display: block; }
.hlpop .viz { margin: 12px 0 12px; padding: 12px 12px 10px; border-radius: 9px; background: var(--soft); }
.hlpop p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.hlpop .more { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hlpop .more:hover { color: var(--rel); }
/* the four pictures (user, 2026-11-12: "learn from Fig. 1's ideas", in the site's own style): two equal panels,
   Other benchmarks (grey) and SO-Arena (white, outlined in the highlight's colour --hc); verdict badges as in the
   reliability demo; ink option blocks; the site robot. Resting state = final frame; .go plays the animation. */
.hlpop { width: min(436px, calc(100vw - 24px)); }
.hlpop .viz { margin: 12px 0 14px; padding: 0; background: none; }
.hv { display: block; width: 100%; height: auto; overflow: visible; }
.hv text { font-family: var(--sans); }
.hv .pn { fill: #f4f4f0; } .hv .pn.so { fill: #fff; stroke: var(--hc); stroke-opacity: .45; stroke-width: 1.2; }
.hv .ph { font: 500 9.5px var(--mono); letter-spacing: .09em; fill: var(--muted); } .hv .ph.so { fill: var(--hc); }
.hv .pc { font-size: 11.5px; fill: var(--muted); } .hv .pc.so { font-weight: 600; fill: var(--ink); }
.hv .tk.pt { stroke-width: 1.8; }
.hv .cd { fill: #fff; stroke: #dddcd4; stroke-width: 1; }
.hv .q { font-size: 11.5px; font-style: italic; fill: var(--ink); }
.hv .lk { font: 500 8.5px var(--mono); letter-spacing: .08em; fill: var(--muted); } .hv .lk.sb { fill: var(--hc); }
.hv .st { fill: #fff; stroke: #b4b9bf; stroke-width: .9; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.hv .st.on { fill: #d4a24e; stroke: #a9792a; }
.hv .tk, .hv .xk { fill: none; stroke: #2f7d57; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv .xk { stroke: #a83a52; }
.hv .tk.sgm { stroke: #fff; stroke-width: 1.5; }
.hv .bd circle { stroke-width: 0; } .hv .bd.ok circle { fill: #e3f1e9; } .hv .bd.q circle { fill: #f7e4e8; }
.hv .bd path { fill: none; stroke: #2f7d57; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv .bd text { font-size: 11px; font-weight: 700; fill: #a83a52; }
.hv .ck { font-size: 10.5px; fill: var(--ink-2); }
.hv .mag { opacity: 0; pointer-events: none; }
.hv .mag circle { fill: rgba(255, 255, 255, .35); stroke: #3c444d; stroke-width: 1.8; } .hv .mag path { stroke: #3c444d; stroke-width: 2.6; stroke-linecap: round; }
.hv .fl0 { fill: none; stroke: #c9c9c1; stroke-width: 2; stroke-linecap: round; }
.hv .fl { fill: none; stroke: var(--hc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hv .bk rect { fill: #fff; stroke: #1b2129; stroke-width: 1.3; } .hv .bk text { font-size: 10px; font-weight: 650; fill: #1b2129; }
.hv .bk.nul text { font-size: 9px; }
.hv .bk.pk rect { fill: #1b2129; } .hv .bk.pk text { fill: #fff; }
.hv .bk.gone rect { fill: none; stroke: #b4b9bf; stroke-dasharray: 2.5 2; } .hv .bk.gone text { fill: #c4c8cd; }
.hv .ar path { fill: none; stroke: #8a9096; stroke-width: 1.3; stroke-linecap: round; } .hv .ar .ah { fill: #8a9096; stroke: none; }
.hv .cb { stroke: #e6e5de; stroke-width: 1; } .hv .dot { fill: #c9ccd0; }
.hv .ln { stroke: #dcdde0; stroke-width: 2.2; stroke-linecap: round; }
.hv .pq { font-size: 12px; font-weight: 700; fill: var(--hc); }
.hv .pgh { fill: var(--hc); opacity: .3; }
.hv .sbx { fill: none; stroke: var(--hc); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 4 3; }
.hv .ch rect { fill: #fff; stroke: #1b2129; stroke-width: 1.1; } .hv .ch text { font-size: 9.5px; font-weight: 600; fill: #1b2129; }
.hv .lp { fill: none; stroke: var(--hc); stroke-width: 1.2; stroke-opacity: .8; } .hv .ah2 { fill: var(--hc); }
.hv .sg { fill: #fff; stroke: #c4c8cd; stroke-width: 1; } .hv .sg.ok { fill: #3f8a63; stroke: #3f8a63; } .hv .sg.bad { stroke: #a83a52; }
.hv .fp { stroke: #8a9096; stroke-width: 1.6; stroke-linecap: round; } .hv .ff { fill: #e1e2e4; stroke: #8a9096; stroke-width: 1; stroke-linejoin: round; }
.hv .syc.s { fill: #3d7fbf; } .hv .syc.n { fill: #2c6aa8; } .hv .sy { font: italic 400 10.5px var(--display); fill: #fff; text-anchor: middle; }
.hv .rb, .hv .a-in, .hv .bk { transform-box: fill-box; transform-origin: 50% 100%; }
.hv .a-pop, .hv .xk { transform-box: fill-box; transform-origin: center; }
.hv .eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
.hlpop.go .hv .a-in { animation: hv-in .35s ease-out var(--d) both; }
.hlpop.go .hv .a-pop { animation: hv-pop .4s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
.hlpop.go .hv .a-draw { stroke-dasharray: 1; animation: hv-draw .3s ease-out var(--d) both; }
.hlpop.go .hv .a-hop { animation: hv-hop .55s cubic-bezier(.3, 0, .3, 1) var(--d); }
.hlpop.go .hv .a-wh { animation: hv-walk .5s cubic-bezier(.2, .8, .2, 1) var(--d) both, hv-hop .55s cubic-bezier(.3, 0, .3, 1) var(--h); }
.hlpop.go .hv .a-hop4 { animation: hv-hop2 .8s ease .45s 4; }
.hlpop.go .hv .st.on { animation: hv-star .3s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
.hlpop.go .hv .mag { animation: hv-mag 1.25s ease-in-out .65s both; }
.hlpop.go .hv .c2 { animation: hv-c2 1.7s linear .9s both; }
.hlpop.go .hv .c1 { animation: hv-c1 1s linear 1.45s both; }
.hlpop.go .hv .c0 { animation: hv-c0 .5s cubic-bezier(.2, .8, .2, 1) 2s both; }
.hlpop.go .hv .ch.f1 rect { animation: hv-fr 1.6s linear .45s 2 forwards; } .hlpop.go .hv .ch.f1 text { animation: hv-ft 1.6s linear .45s 2 forwards; }
.hlpop.go .hv .ch.f2 rect { animation: hv-fr 1.6s linear 1.25s forwards; } .hlpop.go .hv .ch.f2 text { animation: hv-ft 1.6s linear 1.25s forwards; }
.hlpop.go .hv .ch.f3 rect { animation: hv-fr 1.6s linear 2.85s forwards; } .hlpop.go .hv .ch.f3 text { animation: hv-ft 1.6s linear 2.85s forwards; }
.hlpop.go .hv .pgh { animation: hv-pgh .8s ease .45s 4 forwards; }
.hlpop.go .hv .sg.ok { animation: hv-sg .3s ease var(--d) both; }
.hlpop.go .hv .sg.bad { animation: hv-sgb .3s ease var(--d) both; }
.hlpop.go .hv .a-pick rect { animation: hv-pk .25s ease var(--d) both; } .hlpop.go .hv .a-pick text { animation: hv-pkt .25s ease var(--d) both; }
.hlpop.go .hv .a-gone rect { animation: hv-gone .45s ease var(--d) both; } .hlpop.go .hv .a-gone text { animation: hv-gonet .45s ease var(--d) both; }
.hlpop.go .hv .a-sl { animation: hv-sl .4s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.hlpop.go .hv .a-sl rect { animation: hv-pk .25s ease 3.2s both; } .hlpop.go .hv .a-sl text { animation: hv-pkt .25s ease 3.2s both; }
.hlpop.go .hv .a-mv { animation: hv-mv .6s cubic-bezier(.45, 0, .25, 1) 2.6s both, hv-hop .55s cubic-bezier(.3, 0, .3, 1) 3.05s; }
@keyframes hv-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes hv-pop { from { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } }
@keyframes hv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hv-hop { 0%, 100% { transform: none; } 18% { transform: scale(1.08, .9); } 45% { transform: translateY(-7px) scale(.96, 1.05); } 75% { transform: scale(1.04, .96); } }
@keyframes hv-hop2 { 0%, 60%, 100% { transform: none; } 12% { transform: scale(1.06, .92); } 30% { transform: translateY(-5px); } 48% { transform: scale(1.03, .97); } }
@keyframes hv-walk { from { opacity: 0; transform: translateX(-28px); } 40% { opacity: 1; } }
@keyframes hv-star { from { fill: #fff; stroke: #b4b9bf; transform: scale(.5); } }
@keyframes hv-mag { 0% { opacity: 0; transform: translate(232px, 44px); } 12% { opacity: 1; transform: translate(234px, 44px); } 45% { transform: translate(300px, 46px); }
  55% { transform: translate(236px, 59px); } 86% { opacity: 1; transform: translate(290px, 60px); } 100% { opacity: 0; transform: translate(290px, 60px); } }
@keyframes hv-c0 { from { opacity: 0; transform: translateX(-24px); } 40% { opacity: 1; } }
@keyframes hv-c1 { 0% { opacity: 0; transform: translate(-74px, 24px); } 20% { opacity: 1; } 50% { transform: translate(-38px, 24px); } 72% { transform: translate(-20px, -5px); } 100% { transform: none; } }
@keyframes hv-c2 { 0% { opacity: 0; transform: translate(-132px, 48px); } 12% { opacity: 1; } 32% { transform: translate(-96px, 48px); } 44% { transform: translate(-78px, 18px); }
  55% { transform: translate(-58px, 24px); } 72% { transform: translate(-40px, 24px); } 85% { transform: translate(-22px, -5px); } 100% { transform: none; } }
@keyframes hv-fr { 0%, 36% { fill: #1b2129; } 40%, 100% { fill: #fff; } }
@keyframes hv-ft { 0%, 36% { fill: #fff; } 40%, 100% { fill: #1b2129; } }
@keyframes hv-pgh { 0%, 100% { opacity: .3; } 15% { opacity: .9; } 55% { opacity: .3; } }
@keyframes hv-sg { from { fill: #fff; stroke: #c4c8cd; } }
@keyframes hv-sgb { from { stroke: #c4c8cd; } }
@keyframes hv-pk { from { fill: #fff; } } @keyframes hv-pkt { from { fill: #1b2129; } }
@keyframes hv-gone { from { fill: #fff; stroke: #1b2129; stroke-dasharray: none; } }
@keyframes hv-gonet { from { fill: #1b2129; } }
@keyframes hv-sl { from { opacity: 0; transform: translateX(12px); } }
@keyframes hv-mv { from { transform: translateX(-44px); } }
@media (max-width: 520px) { .hlpop { padding: 13px 12px 12px; } }
@media (prefers-reduced-motion: reduce) { .hlpop, .hlpop * { transition: none !important; animation: none !important; } }

/* ---- reliability demo, polished (user): option cards, a friendlier robot, eased motion, automatic replay ---- */
.stage2 { width: 206px; height: 96px; }
.op { position: absolute; top: 6px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1.5px solid #1b2129;
  box-shadow: 0 3px 0 rgba(15, 18, 22, .14); font: italic 500 20px/1 var(--display); color: #1b2129; z-index: 1;
  transition: left .6s cubic-bezier(.65, 0, .35, 1), transform .32s cubic-bezier(.3, 1.45, .5, 1), background-color .22s, color .22s, box-shadow .22s, opacity .3s, border-color .22s; }
.op.nul { font: 650 13px/1 var(--sans); letter-spacing: .01em; }
.op.pick { background: #1b2129; color: #fff; box-shadow: 0 3px 0 rgba(15, 18, 22, .3), 0 0 0 5px rgba(27, 33, 41, .08); }
.op.bump { transform: translateY(-6px); }
.op.lift { transform: translateY(-11px) scale(1.04); box-shadow: 0 10px 16px -6px rgba(15, 18, 22, .3); z-index: 2; }
.op.nul { opacity: 0; transform: translateX(14px); }
.op.nul.show { opacity: 1; transform: none; }
.op.nul.show.bump { transform: translateY(-6px); }
.op.gone { border-style: dashed; border-color: #c4c8cd; background: transparent; color: transparent; box-shadow: none; animation: op-gone .7s ease both; }
@keyframes op-gone { 0% { opacity: 1; transform: none; border-style: solid; border-color: #1b2129; background: #fff; color: #1b2129; }
  45% { opacity: 0; transform: translateY(18px) rotate(6deg); } 55% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
.rbt { position: absolute; top: 56px; left: -30px; width: 28px; height: 38px; transition: left .62s cubic-bezier(.45, 0, .25, 1), opacity .25s; }
.rbt.fade { opacity: 0; }
.rbt-b { display: block; transform-origin: 50% 100%; }
.rbt-b svg { display: block; width: 28px; height: 34px; }
.rbt .shd { position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; border-radius: 50%; background: rgba(15, 18, 22, .16); transform-origin: center; }
.rbt.walk .rbt-b { animation: bob .3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-1.6px); } }
.rbt.jump .rbt-b { animation: hop .62s cubic-bezier(.3, 0, .3, 1); }
.rbt.jump .shd { animation: hop-shd .62s cubic-bezier(.3, 0, .3, 1); }
@keyframes hop { 0% { transform: none; } 14% { transform: scale(1.08, .88); } 37% { transform: translateY(-13px) scale(.96, 1.06); }
  60% { transform: translateY(0) scale(1, 1); } 72% { transform: scale(1.06, .92); } 100% { transform: none; } }
@keyframes hop-shd { 37% { transform: scaleX(.55); opacity: .5; } 60% { transform: none; opacity: 1; } }
.rbt .eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
.scene2 .verdict { opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.scene2 .verdict.on { opacity: 1; transform: none; }
.replay .pl { display: none; }
.replay[aria-pressed="true"] .pl { display: inline; } .replay[aria-pressed="true"] .pz { display: none; }
@media (prefers-reduced-motion: reduce) { .op, .rbt, .scene2 .verdict { transition: none; } .rbt .eyes, .op.gone { animation: none; } }
/* the domain profile tooltip lists all 11 domains */
.prof-tip { display: grid; grid-template-columns: auto auto auto; column-gap: 12px; row-gap: 1px; margin-top: 6px; font-size: 12px; }
.prof-tip .pr { display: contents; }
.prof-tip .pr > span { padding: 1px 0; color: var(--ink-2); }
.prof-tip .pr .m, .prof-tip .pr .s { text-align: right; font-variant-numeric: tabular-nums; }
.prof-tip .pr.on > span { color: var(--ink); font-weight: 650; }
.lb .c-prof .dprof { cursor: pointer; }
/* rows open a profile: a quiet chevron at the end of each row */
.lb tbody tr[data-model] td:last-child { position: relative; padding-right: 34px; }
.lb tbody tr[data-model] td:last-child::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 18px; color: var(--faint); transition: color .12s, transform .12s; }
@media (hover: hover) { .lb tbody tr[data-model]:hover td:last-child::after { color: var(--ink); transform: translate(2px, -52%); } }
@media (max-width: 760px) { .lb tbody tr[data-model] td:last-child { padding-right: 0; } .lb tbody tr[data-model] td:last-child::after { content: none; } }
/* commands wrap instead of being cut off; anchors land below the sticky nav */
.code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* nav jumps: the section's first line lands 28 px under the nav bar (html scroll-padding 72 px + this margin + the
   section's top padding, 104 px or 76 px on phones) */
section[id] { scroll-margin-top: -87px; }
@media (max-width: 760px) { section[id] { scroll-margin-top: -59px; } }
.run pre { font-size: 11.2px; letter-spacing: -.01em; }
.code pre { overflow-wrap: normal; word-break: normal; }
@media (max-width: 760px) { .code pre { overflow-wrap: anywhere; } }
.rkn { display: inline-block; min-width: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow .fl-n { font-size: 11px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
/* System Two reference rows stay quieter than the ranked rows */
.lb tr.ref .meter i, .lb tr.ref .c-prof .pb::after { opacity: .5; }
/* BibTeX wraps on narrow screens */
@media (max-width: 760px) { .bib pre { white-space: pre-wrap; overflow-wrap: anywhere; } }
.lb .showall { margin-left: 6px; font-weight: 600; color: var(--rel); text-decoration: underline; text-underline-offset: 3px; }

/* ---- "click for details": a hint at the foot of model tooltips; a small pill beside the name on table rows ---- */
.tip .tip-cta { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); font: 600 11.5px/1.2 var(--sans); color: var(--rel); }
.tip .tip-cta svg { width: 12px; height: 12px; }
.lb .mcell b::after { content: "Details ›"; display: inline-block; margin-left: 9px; padding: 3px 8px; border-radius: 99px; background: var(--soft-2);
  font: 600 10.5px/1 var(--sans); color: var(--ink-2); vertical-align: 2px; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
@media (hover: hover) { .lb tbody tr[data-model]:hover .mcell b::after { opacity: 1; transform: none; } }
@media (hover: none) { .lb .mcell b::after { content: none; } }
.chart .pt:hover .mk { filter: drop-shadow(0 1px 2px rgba(15, 18, 22, .25)); }

/* ---- at a glance: score against latency and decision reliability side by side (user) ---- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pair .panel-head h3 { font-size: 24px; }
.pair .insights { display: block; }
.pair .insights .chart-col { border: 0; padding-bottom: 16px; }
@media (max-width: 1080px) { .pair { grid-template-columns: 1fr; } }
/* the hover pill takes no layout space (it widened the table at 1024 px) */
.lb .mcell b { position: relative; }
.lb .mcell b::after { position: absolute; left: 100%; top: 50%; margin-top: -9px; white-space: nowrap; vertical-align: 0; }
/* the highlight tags look interactive: the same quiet underline as "System One" */
.hl li[data-hl] { text-decoration: underline dotted rgba(15, 18, 22, .3); text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.hl li[data-hl]:hover, .hl li[data-hl][aria-expanded="true"] { text-decoration-color: transparent; }
@media (max-width: 760px) { .kres .kr:nth-child(n) { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) {
  .tools-r, .tools-r .search { width: 100%; } .tools-r .search input { width: 100%; }
  .hero .cta { gap: 8px; } .hero .cta .btn { padding: 0 13px; }
}
.hlpop .vd.ok { color: #1f6b47; }
@media (max-width: 520px) {
  .hero .cta { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .hero .cta .btn { justify-content: center; } .hero .cta .btn-dark { grid-column: 1 / -1; }
  .board-head .label { white-space: nowrap; font-size: 10px; letter-spacing: .05em; }
}

/* ---- sorting by one domain (user, 2026-11-12). One continuous change: the columns and bars ease together
   (420 ms), then the rows glide to their new order (520 ms, from the script). The rows stay in the page. ---- */
.lb { --ease: cubic-bezier(.2, .8, .2, 1); }
.lb.noanim, .lb.noanim * { transition: none !important; }
/* both columns change width together, so the score bar and the domain bar move as one */
.lb thead th.c-score, .lb thead th.c-prof { transition: width .42s var(--ease); }
.lb thead th.c-score { width: 30%; } .lb thead th.c-prof { width: 17%; }
.lb.dmode thead th.c-score { width: 11%; } .lb.dmode thead th.c-prof { width: 38%; }
.lb thead th.c-prof button::after { content: none !important; }
.lb thead th.c-prof .phd { display: flex; align-items: center; }
.lb thead th.c-prof .dh-btn { width: auto; padding: 13px 8px 13px 10px; gap: 6px; border-radius: 7px; }
.lb thead th.c-prof .dh-btn svg { width: 10px; height: 10px; opacity: .7; transition: transform .15s; }
.lb thead th.c-prof .dh-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lb thead th.c-prof .dh-btn:hover, .lb thead th.c-prof .dh-btn[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.lb thead th.c-prof .dh-btn i { display: none; width: 8px; height: 8px; border-radius: 2px; }
.lb thead th.c-prof .dh-btn.on { color: var(--ink); } .lb thead th.c-prof .dh-btn.on i { display: inline-block; }
.lb thead th.c-prof .dh-btn .ar { font-size: 11px; }
.lb thead th.c-prof .dx { width: auto; padding: 3px 7px; margin-left: 2px; border-radius: 6px; font: 400 15px/1 var(--sans); color: var(--muted); }
.lb thead th.c-prof .dx[hidden] { display: none; }
.lb thead th.c-prof .dx:hover { background: var(--soft-2); color: var(--ink); }
/* the score column narrows: its bar and number shrink with the same easing */
.lb .c-score { min-width: 0; }
.lb .scell .bt { flex: 1 1 0px; min-width: 40px; }
.lb .scell .num { transition: font-size .42s var(--ease), color .3s ease; }
.lb.dmode .scell .num, .lb.dmode td.c-score.sorted .scell .num { font-size: 13px; font-weight: 500; color: var(--muted); }
.lb.dmode .c-score { min-width: 0; }
/* the eleven bars fold away as the one bar grows in their place */
.lb .c-prof .pwrap { position: relative; }
.lb .c-prof .dprof { transform-origin: left bottom; transition: opacity .22s ease .1s, transform .36s var(--ease) .06s; }
.lb.dmode .c-prof .dprof { opacity: 0; transform: scaleY(.2); pointer-events: none; transition: opacity .18s ease, transform .3s var(--ease); }
.lb .dbar { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; gap: 14px; margin-top: -9px; height: 18px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lb.dmode .dbar { opacity: 1; pointer-events: auto; cursor: pointer; transition: opacity .16s ease; }
.lb .dbar .t { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--soft-2); }
.lb .dbar .t i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--dfc, var(--cap)); transition: width .42s var(--ease), background-color .3s ease; }
.lb.dmode .dbar .t i { width: var(--dw); }
.lb .dbar .t .ref { position: absolute; top: -4px; bottom: -4px; left: calc(var(--dlu, 0%) - 1px); width: 2px; border-radius: 1px; background: var(--s2); opacity: 0; transition: left .42s var(--ease), opacity .2s ease; }
.lb.dmode .dbar .t .ref { opacity: .8; }
.lb .dbar .v { flex: none; min-width: 42px; text-align: right; font: 650 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.lb tr.ref .dbar .t i { opacity: .5; } .lb tr.ref .dbar .v { color: var(--muted); font-weight: 500; }
.lb:not(.dmode) .dbar .v { opacity: 0; }
/* the strip above the table: always present, so choosing a domain changes its text, not the page height */
.dsel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 10px; padding: 10px 14px 10px 16px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 13px; color: var(--ink-2); }
.dsel[hidden] { display: none; }
.dsel .fam { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dsel .fam i { width: 8px; height: 8px; border-radius: 2px; }
.dsel b { font: 400 20px/1.1 var(--display); color: var(--ink); }
.dsel .dm { color: var(--muted); } .dsel .lu { font: 500 12.5px var(--mono); color: var(--s2); }
.dsel button { padding: 0; border: 0; background: none; font: 600 13px var(--sans); color: var(--ink); cursor: pointer; }
.dsel .lk:hover { color: var(--rel); } .dsel .x { margin-left: auto; font-weight: 500; color: var(--muted); } .dsel .x:hover { color: var(--ink); }
.dpick { display: none; }
.dpick select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 500 13px var(--sans); color: var(--ink); max-width: 210px; }
@media (max-width: 1000px) {
  .dpick { display: inline-flex; }
  .lb.dmode .c-prof { display: table-cell; } .lb.dmode thead th.c-prof { width: 38%; } .lb.dmode .c-score { display: none; }
  .lb.dmode thead th.c-prof .dh-btn { pointer-events: none; } .lb.dmode thead th.c-prof .dh-btn svg { display: none; }
}
@media (max-width: 760px) {
  .lb.dmode tbody tr[data-model] td.c-prof { display: block; grid-column: 3; grid-row: 1; width: 132px; padding: 0; }
  .lb.dmode .dbar { position: static; margin: 0; gap: 8px; } .lb.dmode .dbar .v { font-size: 14px; min-width: 34px; } .lb.dmode .c-prof .dprof { display: none; }
  .tools-r { display: flex; gap: 8px; flex-wrap: wrap; } .dpick select { max-width: 160px; }
}
/* the domain menu: a vertical list with line icons in the family colours; the rows near the pointer grow, as in the
   macOS Dock (--s from the script) */
.dock { position: absolute; z-index: 64; display: flex; flex-direction: column; width: 196px; padding: 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -14px rgba(15, 18, 22, .28), 0 2px 6px rgba(15, 18, 22, .06); transform: translateY(-4px); opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.dock.on { opacity: 1; transform: none; }
.dock[hidden] { display: flex !important; visibility: hidden; }
.dock .di { --s: 1; display: flex; align-items: center; gap: calc(10px * var(--s)); height: calc(27px * var(--s)); padding: 0 10px; border: 0; border-radius: 8px; background: none;
  font: 500 calc(13px * var(--s))/1 var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; flex: none; }
.dock .di svg { flex: none; width: calc(15px * var(--s)); height: calc(15px * var(--s)); fill: none; stroke: var(--fc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock .di .nm { flex: 1; }
.dock .di:hover, .dock .di:focus-visible { background: var(--soft); color: var(--ink); outline: none; }
.dock .di.cur { color: var(--ink); font-weight: 650; }
.dock .di.cur::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fc); }
.dock.settle .di { transition: height .2s var(--ease, ease), font-size .2s ease, gap .2s ease; } .dock.settle .di svg { transition: width .2s ease, height .2s ease; }
.dock .dg { display: flex; align-items: center; gap: 6px; padding: 9px 10px 3px; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dock .dg i { width: 6px; height: 6px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .dock, .dock .di, .lb *, .lb thead th.c-prof { transition: none !important; } }

/* reliability ranking: a top-three score rank stands out */
.chart .lbl.em { font-weight: 700; fill: var(--ink); }
.tabrow .sym { width: 16px; height: 16px; margin-left: 5px; font-size: 11px; border-radius: 4px; vertical-align: -2px; }
/* size legend: the dots grow with the model, as in the charts */
.legend i.sz { width: var(--d); height: var(--d); vertical-align: middle; }
.legend .lgt { font-weight: 600; color: var(--ink-2); }
@media (max-width: 520px) { .tabrow .sym { display: none; } }
.legend i.band { width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(55, 61, 69, .1), rgba(55, 61, 69, .2)); }

/* ---- section 04 (user, 2026-11-12): one question per tab, a picture of it, then the chart by domain ---- */
.gap.one .gap-h, .gap.one .gap-r { grid-template-columns: 230px minmax(0, 1fr); }
.gap.one .gap-r svg text .sub { fill: var(--muted); }
.qa { margin: 2px 22px 8px; padding: 12px 16px 8px; border-radius: 12px; background: var(--soft); }
.qpic { display: block; width: 100%; max-width: 720px; height: auto; overflow: visible; }
.qpic text { font-family: var(--sans); }
.qpic .qh { font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.qpic .qs { font-size: 10.5px; fill: var(--muted); }
.qpic .qn { font-size: 11.5px; font-weight: 600; fill: var(--ink-2); }
.qpic .qv { font: 500 11px var(--mono); fill: var(--ink); white-space: pre; }
.qpic .lv { fill: none; stroke: var(--s2); stroke-width: 1.3; stroke-dasharray: 3 3; }
.qpic .th circle { fill: #9aa1a9; }
.qpic .arw { fill: none; stroke: #8a9096; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qpic .clk circle { fill: #fff; stroke: #8a9096; stroke-width: 1.4; } .qpic .clk .hand { stroke: #4a535c; stroke-width: 1.5; stroke-linecap: round; }
.qpic .bar, .qpic .rb, .qpic .a-in, .qpic .a-pop, .qpic .big { transform-box: fill-box; transform-origin: 50% 100%; }
.qpic .hbar { transform-box: fill-box; transform-origin: 0 50%; }
.qpic .a-pop { transform-origin: center; }
.qpic .clk .hand { transform-box: view-box; transform-origin: 178px 62px; }
.qa:not(.go) .bar, .qa:not(.go) .hbar, .qa:not(.go) .a-in, .qa:not(.go) .a-pop, .qa:not(.go) .big { opacity: 0; }
.qa.go .bar { animation: qa-rise .65s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.qa.go .hbar { animation: qa-grow .65s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.qa.go .a-in { animation: hv-in .35s ease-out var(--d, 0s) both; }
.qa.go .a-pop { animation: hv-pop .4s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
.qa.go .big { animation: qa-big .7s cubic-bezier(.3, 1.35, .5, 1) var(--d) both; }
.qa.go .th circle { animation: qa-dot 1.2s ease-in-out infinite; } .qa.go .th circle:nth-child(2) { animation-delay: .2s; } .qa.go .th circle:nth-child(3) { animation-delay: .4s; }
.qa.go .clk .hand { animation: qa-spin 1.6s linear infinite; }
.qa .eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
@keyframes qa-rise { from { transform: scaleY(0); } }
@keyframes qa-grow { from { transform: scaleX(0); } }
@keyframes qa-big { from { opacity: 0; transform: scale(.5); } 60% { opacity: 1; } }
@keyframes qa-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes qa-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .qa { margin: 2px 0 8px; padding: 10px; } .gap.one .gap-h { display: none; } .gap.one .gap-r { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qa *, .qa.go * { animation: none !important; opacity: 1 !important; } }
.qpic.n .qh { font-size: 15px; } .qpic.n .qs { font-size: 13px; } .qpic.n .qn { font-size: 14px; } .qpic.n .qv { font-size: 13.5px; }
.gap-r svg text.in { fill: #fff; font-weight: 600; }
@media (max-width: 760px) { .gap-r svg text .sub { display: none; } }
.qpic.n { overflow: hidden; }
/* the leaderboard's view switch: off = one ranked list (default), on = grouped (user, 2026-11-12) */
.sw { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-left: 10px; padding: 0 2px; border: 0; background: none; font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sw-t { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #d6d5ce; transition: background-color .2s ease; }
.sw-k { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 18, 22, .3); transition: transform .22s cubic-bezier(.3, .7, .2, 1); }
.sw:hover .sw-t { background: #c8c7bf; } .sw:hover { color: var(--ink); }
.sw[aria-checked="true"] .sw-t { background: var(--ink); } .sw[aria-checked="true"]:hover .sw-t { background: #2b3138; }
.sw[aria-checked="true"] .sw-k { transform: translateX(14px); }
.sw[aria-checked="true"] .sw-l { color: var(--ink); }
.sw-l { display: inline-block; min-width: 86px; text-align: left; }
.sw:focus-visible { outline: none; } .sw:focus-visible .sw-t { box-shadow: 0 0 0 2px var(--rel); }
.lb.flat tbody tr.ref td { background: #fcfbf8; }
/* the whole word is centred: the drawing shifts between the resting and the open centre with the letters (user) */
.logo-anim .lg-all { transform-box: view-box; transform: translateX(var(--c-rest, 0px)); transition: transform var(--t) var(--move); }
.logo-anim.open .lg-all { transform: translateX(var(--c-open, 0px)); }
/* the unfolding letters: no masks; each fades in as the moving S or "-Arena" passes it (--d from the builder) and
   fades out at once on closing; the centring shift keeps the letters' timing (user) */
.logo-anim .lg-l { opacity: 0; transition: opacity .14s ease; }
.logo-anim.open .lg-l { opacity: 1; transition: opacity .2s ease var(--d, 0ms); }
.logo-anim .lg-all { transition: transform calc(var(--t) * 1.15) var(--turn); }
.logo-anim:not(.open) .lg-all { transition: transform calc(var(--t) * .95) var(--turn) .09s; }
@media (prefers-reduced-motion: reduce) { .logo-anim .lg-l, .logo-anim .lg-all { transition: none !important; } }

/* the Paper link makes four header items: keep the name on one line on the smallest phones */
.brand { white-space: nowrap; }
@media (max-width: 360px) { .ext { padding: 7px 6px; } }