/* h2o.ai/benchmarks landing page, light and dark. Brand: Summer Yellow #FFDD00 for fills (the header logo keeps its
   own Sunshine Yellow #FFE600); DM Sans (headings) / Inter (body) / DM Mono (labels and numbers).
   Contrast: text is at least 4.5:1 in both themes (secondary #4A4945 is 9:1 on white; the dark theme's secondary
   and muted whites are 12:1 and 10:1 on black). Grey bars #8A8A8A are 3.5:1 on white and 6:1 on black. Yellow
   is never text on white: in light it is a fill or sits on black, in dark it is text on black. */

@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---- tokens: light is the default; dark follows the system unless the toggle chose light, or the toggle chose dark */
:root {
  color-scheme: light;
  --yellow: #FFDD00;
  --bg: #FFFFFF;
  --bg-alt: #F9F9F9;
  --text: #000000;
  --text-2: #4A4945;
  --muted: #666666;
  --line: #EBEBEB;
  --strong: #000000;
  --eyebrow: #4A4945;
  --rank: #000000;
  --headline-mark: inset 0 -0.3em 0 #FFDD00;
  --name-mark: inset 0 -0.5em 0 #FFDD00;
  --grey: #8A8A8A;
  --h2o-bg: #FFFCE5;
  --h2o-ring: inset 0 0 0 1.5px #000000;
  --row-hover: #FFFCE5;
  --control: #D6D6D6;
  --pill-bg: #000000;
  --pill-text: #FFFFFF;
  --focus: #000000;
  --focus-halo: 0 0 0 5px rgba(255, 221, 0, .55);
  --bar-bg: rgba(255, 255, 255, .92);
  --tile-bg: #FFFFFF;
  --tile-border: #EBEBEB;
  --tile-top: 3px solid #FFDD00;
  --tile-shadow: 0 1px 3px rgba(12, 13, 15, .08), 0 1px 2px rgba(12, 13, 15, .04);
  --tile-hover: #000000;
  --tile-hover-shadow: 0 12px 32px rgba(12, 13, 15, .12);
  --link-bg: #FFFFFF;
  --link-hover: #000000;
  --a-hover: #4A4945;
  --try-bg: #000000;
  --try-text: #FFFFFF;
  --try-eyebrow: #FFDD00;
  --try-focus: #FFDD00;
  --board-bg: #000000;
  --board-text: #FFFFFF;
  --board-muted: rgba(255, 255, 255, .75);
  --board-top: rgba(255, 255, 255, .3);
  --board-line: rgba(255, 255, 255, .14);
  --board-hover: rgba(255, 255, 255, .06);
  --board-border: transparent;
  --when-light: inline;
  --when-dark: none;
  --font-display: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --gutter: 24px;
  --bar-height: 61px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --bg-alt: #0B0B0B;
    --text: #FFFFFF;
    --text-2: rgba(255, 255, 255, .78);
    --muted: rgba(255, 255, 255, .70);
    --line: rgba(255, 255, 255, .14);
    --strong: #FFFFFF;
    --eyebrow: #FFDD00;
    --rank: #FFDD00;
    --headline-mark: none;
    --name-mark: none;
    --h2o-bg: rgba(255, 221, 0, .12);
    --h2o-ring: none;
    --row-hover: rgba(255, 255, 255, .06);
    --control: rgba(255, 255, 255, .3);
    --pill-bg: #FFDD00;
    --pill-text: #000000;
    --focus: #FFDD00;
    --focus-halo: none;
    --bar-bg: rgba(0, 0, 0, .88);
    --tile-bg: transparent;
    --tile-border: rgba(255, 255, 255, .18);
    --tile-top: 1px solid rgba(255, 255, 255, .18);
    --tile-shadow: none;
    --tile-hover: #FFDD00;
    --tile-hover-shadow: none;
    --link-bg: transparent;
    --link-hover: #FFDD00;
    --a-hover: #FFDD00;
    --try-bg: #FFFFFF;
    --try-text: #000000;
    --try-eyebrow: #4A4945;
    --try-focus: #000000;
    --board-border: rgba(255, 255, 255, .18);
    --when-light: none;
    --when-dark: inline;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-alt: #0B0B0B;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .78);
  --muted: rgba(255, 255, 255, .70);
  --line: rgba(255, 255, 255, .14);
  --strong: #FFFFFF;
  --eyebrow: #FFDD00;
  --rank: #FFDD00;
  --headline-mark: none;
  --name-mark: none;
  --h2o-bg: rgba(255, 221, 0, .12);
  --h2o-ring: none;
  --row-hover: rgba(255, 255, 255, .06);
  --control: rgba(255, 255, 255, .3);
  --pill-bg: #FFDD00;
  --pill-text: #000000;
  --focus: #FFDD00;
  --focus-halo: none;
  --bar-bg: rgba(0, 0, 0, .88);
  --tile-bg: transparent;
  --tile-border: rgba(255, 255, 255, .18);
  --tile-top: 1px solid rgba(255, 255, 255, .18);
  --tile-shadow: none;
  --tile-hover: #FFDD00;
  --tile-hover-shadow: none;
  --link-bg: transparent;
  --link-hover: #FFDD00;
  --a-hover: #FFDD00;
  --try-bg: #FFFFFF;
  --try-text: #000000;
  --try-eyebrow: #4A4945;
  --try-focus: #000000;
  --board-border: rgba(255, 255, 255, .18);
  --when-light: none;
  --when-dark: inline;
}

/* ---- base ------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-height) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-body); transition: background-color 240ms ease, color 240ms ease; }
h1, h2, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--a-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--focus-halo); }
[hidden] { display: none !important; }
.no-js .js-only { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; }
.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: 16px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--yellow); color: #000000; font-weight: 600; text-decoration: none; border-radius: 4px; }
.skip:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow::before { content: ""; flex: none; width: 24px; height: 3px; background: var(--yellow); }

/* pills: the section filter and the JevBench sort */
[role="radio"] { min-height: 36px; padding: 0 14px; border: 1px solid var(--control); border-radius: 999px; background: transparent; color: var(--text); font: 400 13px/1 var(--font-body); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
[role="radio"]:hover { border-color: var(--text); }
[role="radio"][aria-checked="true"] { background: var(--pill-bg); border-color: var(--pill-bg); color: var(--pill-text); }

/* ---- header: the logo left, the GitHub mark and the theme toggle right -------------------------------------------------------- */
.site-header { padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); }
.header-bar { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 12px; font: 600 20px/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.brand a { display: flex; flex: none; } /* the logo's link, exactly its size, so the header keeps its own */
.brand svg { flex: none; width: 40px; height: 40px; }
.repo-link { margin-left: auto; display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 999px; color: var(--text); }
.repo-link:hover { color: var(--text); background: var(--line); }
.repo-link svg { width: 22px; height: 22px; }
.repo-link + .theme-toggle { margin-left: -16px; } /* 8 px apart: the mark belongs with the toggle */
.theme-toggle { margin-left: auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--control); border-radius: 999px; background: transparent; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.theme-toggle:hover { border-color: var(--text); }
.when-light { display: var(--when-light); }
.when-dark { display: var(--when-dark); }

/* ---- hero: the top ranks across the page, the statement centred below them --------------------------------- */
.hero { padding: 72px var(--gutter) 88px; }
.hero-stack { display: flex; flex-direction: column; gap: 72px; }
.statement { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; animation: fade-in 420ms ease 520ms backwards, statement-rise 520ms var(--ease) 520ms backwards; }
.hero .eyebrow { font-size: 14px; }
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; flex: none; width: 28px; height: 3px; background: var(--yellow); }
/* R7 E's 72 and 44 px lines scale down together: at 11vw the first stays on one line down to about 300 px wide */
h1 { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 clamp(30px, 11vw, 72px)/1 var(--font-display); letter-spacing: -.035em; }
h1 .mark-line { font-size: calc(44em / 72); line-height: 1.15; letter-spacing: -.02em; }
h1 .mark { color: var(--rank); box-shadow: var(--headline-mark); }
.headline-bar { width: 64px; height: 6px; background: var(--yellow); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 22px; border-radius: 4px; font: 600 14px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.btn-yellow, .btn-yellow:hover { background: var(--yellow); color: #000000; }
.btn-outline { border: 1px solid var(--text); color: var(--text); }
.btn-outline:hover { color: var(--text); background: var(--row-hover); }

.ranks { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ranks-label { font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.ranks-label time { white-space: nowrap; } /* where the label wraps, as on phones, the date stays whole */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { --tile-from: translateY(10px); display: flex; animation: fade-in 320ms ease backwards, tile-in 420ms var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
/* the whole tile is one link to its section (page.js shows the section first if the filter hides it) */
.tile > a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--tile-bg); border: 1px solid var(--tile-border); border-top: var(--tile-top); border-radius: 12px; box-shadow: var(--tile-shadow); color: var(--text); text-decoration: none; transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease; }
.tile > a:hover { border-color: var(--tile-hover); box-shadow: var(--tile-hover-shadow); color: var(--text); transform: translateY(-2px); }
.tile > a:focus-visible { box-shadow: var(--focus-halo); } /* the global ring's halo, over the tile's own shadow */
.tile-kind { font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.tile-rank { font: 700 48px/1 var(--font-display); letter-spacing: -.03em; color: var(--rank); }
.tile-of { font: 500 14px/1 var(--font-display); letter-spacing: 0; color: var(--text-2); }
.tile-board { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tile-who { font: 700 15px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--rank); }
.tile-who > span { box-shadow: var(--name-mark); } /* inline, so the stripe hugs the name */
@keyframes fade-in { from { opacity: 0; } }
@keyframes tile-in { from { transform: var(--tile-from); } } /* the tiles rise; the board's rows slide in */
@keyframes statement-rise { from { transform: translateY(12px); } }

/* Seven tiles in one of four shapes, best rank first and never a lone tile (#85). 3 + 2 + 2 below 804 px: six
   columns, each tile two wide, so the rows of two start at column 2, centred. 4 + 3 from 804 px, where four 180 px
   tiles fit (756 px of content): eight columns, the fifth tile starting at column 2 centres the last three. 7 x 1 from
   1280 px, where the wrap leaves seven tiles 166 px; their sides go to 14 px so that "H2O-Lightning-4B", which breaks
   only at its hyphens, keeps one line. */
.tile { grid-column: span 2; }
.tile:nth-child(4), .tile:nth-child(6) { grid-column: 2 / span 2; }
@media (min-width: 804px) {
  .tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tile:nth-child(4), .tile:nth-child(6) { grid-column: span 2; }
  .tile:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1280px) {
  .tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tile, .tile:nth-child(n) { grid-column: auto; } /* one column each; :nth-child(n) outranks the rules above */
  .tile > a { padding-inline: 14px; }
}
/* At 720 px and below the same list is Round 3 Split C's board: black in both themes (with a border in dark, on the
   black page), one row per rank, each row the link to its section. The kind sits above the benchmark: in a column of
   its own on the right it took 74 px, and the names broke over three lines at 360 to 390 px. */
@media (max-width: 720px) {
  .ranks { gap: 16px; padding: 28px; border: 1px solid var(--board-border); border-radius: 12px; background: var(--board-bg); color: var(--board-text); }
  .ranks-label { color: var(--yellow); }
  .tiles { display: block; border-top: 1px solid var(--board-top); }
  .tile { --tile-from: translateX(12px); animation-duration: 300ms, 420ms; animation-delay: calc(var(--i) * 80ms); } /* the same animations, so crossing 720 px doesn't replay them */
  .tile > a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 14px 0; border: 0; border-bottom: 1px solid var(--board-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--board-text); }
  .tile > a:hover { border-color: var(--board-line); background: var(--board-hover); box-shadow: none; color: var(--board-text); transform: none; }
  .tile > a:focus-visible { outline-color: var(--yellow); box-shadow: none; } /* yellow on black in both themes */
  .tile-rank { grid-area: 1 / 1 / 4; font-size: 38px; color: var(--yellow); }
  .tile-of { display: block; margin-top: 2px; font-size: 12px; color: var(--board-muted); }
  .tile-kind { grid-area: 1 / 2; color: var(--board-muted); }
  .tile-board { grid-area: 2 / 2; font-size: 16px; }
  .tile-who { grid-area: 3 / 2; color: var(--yellow); }
  .tile-who > span { box-shadow: none; }
}

/* ---- sticky section bar: filter left, jump links right ---------------------------------------------------- */
.section-bar { position: sticky; top: 0; z-index: 20; padding: 0 var(--gutter); background: var(--bar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-bar-inner { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.jumps { display: flex; gap: 16px; margin-left: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; font-size: 14px; white-space: nowrap; }
.jumps a { display: inline-block; padding: 6px 0; text-decoration: none; }
.jumps a:hover { text-decoration: underline; }

/* ---- benchmark sections ----------------------------------------------------------------------------------- */
.bench { padding: 80px var(--gutter); background: var(--bg); border-top: 1px solid var(--line); }
.bench.alt { background: var(--bg-alt); }
.bench-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
.bench-split .text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bench-split .charts { flex: 1 1 540px; }
.bench-wide { display: flex; flex-direction: column; gap: 40px; }
.text-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 64px; }
.story { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.facts { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.charts { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.big-num { font: 700 clamp(48px, 9vw, 64px)/0.95 var(--font-display); letter-spacing: -.035em; color: var(--rank); }
.big-phrase { font: 500 18px/1.3 var(--font-display); color: var(--text-2); }
h2 { font: 600 clamp(24px, 3.2vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em; }
.description { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.stats { display: flex; flex-wrap: wrap; gap: 20px 32px; padding: 16px 0; border-top: 1px solid var(--strong); border-bottom: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.stats dt { max-width: 12em; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.stats dd { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--control); border-radius: 4px; background: var(--link-bg); font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color 160ms ease; }
.links a:hover { border-color: var(--link-hover); color: var(--text); }
.try { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 12px; background: var(--try-bg); color: var(--try-text); }
.try-eyebrow { font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--try-eyebrow); }
.try-text { font: 600 22px/1.25 var(--font-display); }
.try .btn { align-self: flex-start; min-height: 44px; padding: 0 20px; }
.try :focus-visible { outline-color: var(--try-focus); box-shadow: none; }

/* ---- ranked bars ------------------------------------------------------------------------------------------- */
.chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.chart-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.chart-dir { font: 400 11px/1.4 var(--font-mono); color: var(--text-2); }
.bars { border-top: 1px solid var(--strong); }
.bars .row { display: grid; grid-template-columns: 36px minmax(0, 210px) minmax(0, 1fr); gap: 10px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); transition: background-color 160ms ease; }
.bars .row:hover { background: var(--row-hover); }
.bars .row.h2o { background: var(--h2o-bg); }
.bars .pos { padding-left: 6px; font: 400 12px/1 var(--font-mono); }
.bars .nm { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bars .h2o .pos, .bars .h2o .nm, .bars .h2o .val { font-weight: 600; }
.val-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bars .bar { flex: none; width: calc((100% - 64px) * var(--w)); height: 16px; background: var(--grey); }
.bars .h2o .bar { background: var(--yellow); box-shadow: var(--h2o-ring); }
.bars .val { font: 400 12px/1 var(--font-mono); white-space: nowrap; }
.bars .gap { padding: 0 6px; line-height: 22px; color: var(--muted); }
.note { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ---- the FutureX table: # Model Framework Organization Score (#95) ---------------------------------------------------
   The table is one grid and its row groups and rows are subgrids of it, so the three text columns are as wide as their
   longest value (and wrap, anywhere, only where the chart is too narrow for that), and Score, the last column, takes what
   they leave: the bar beside its number is as long as the names allow. A name is never cut: nothing here sets an ellipsis
   or a height on text. Rows are grid rows, so every part of the markup carries its role. The chart answers to its own
   width, not the window's: it is 668 px beside the text at 1440 and 288 to 983 px elsewhere, so a container query stacks
   the rows at 520 px and below. */
.ft-chart { container: ft / inline-size; }
.ft { display: grid; grid-template-columns: 32px auto auto auto minmax(100px, 1fr); column-gap: 10px; width: 100%; font: 400 13px/1.35 var(--font-body); }
.ft-head, .ft-body, .ft-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.ft-cell { display: block; min-width: 0; padding: 0; font-weight: inherit; text-align: left; overflow-wrap: anywhere; }
.ft-head .ft-row { align-items: end; padding: 0 8px 8px 0; border-bottom: 1px solid var(--strong); }
.ft-head .ft-cell { font: 400 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); overflow-wrap: normal; }
.ft-body .ft-row { position: relative; align-items: center; min-height: 40px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); transition: background-color 160ms ease; }
.ft-body .ft-row:hover { background: var(--row-hover); }
.ft-body .ft-row.h2o { background: var(--h2o-bg); }
.ft-body .ft-row.ft-gap { display: block; min-height: 0; padding: 0 6px; border: 0; background: none; line-height: 22px; color: var(--muted); }
.ft .c-rank { padding-left: 6px; font: 400 12px/1.2 var(--font-mono); } /* a rank sits 6 px inside its chart's edge, as .bars .pos does */
.ft-head .c-rank { font: 400 10px/1.3 var(--font-mono); }
.ft .c-org { color: var(--text-2); }
.ft .c-score { display: flex; align-items: center; gap: 8px; }
.ft .bar { flex: none; width: calc((100% - 46px) * var(--w)); height: 16px; background: var(--grey); } /* 46 px: a score's number and its gap */
.ft .val { font: 400 12px/1 var(--font-mono); white-space: nowrap; }
.ft .ft-row.h2o .ft-cell, .ft .ft-row.h2o .val { font-weight: 600; }
.ft .ft-row.h2o .c-org { color: var(--text); }
.ft .ft-row.h2o .bar { background: var(--yellow); box-shadow: var(--h2o-ring); }
/* a narrow chart: a row stacks, the model and its score on the first line and the framework and the organization under
   them, the rank at the left and the bar a thin line along the foot; the header stays for screen readers only */
@container ft (max-width: 520px) {
  .ft, .ft-head, .ft-body { display: block; }
  .ft-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ft-body .ft-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 10px 8px 20px 40px; }
  .ft .c-rank { position: absolute; left: 0; top: 10px; width: 32px; padding-left: 4px; }
  .ft .c-model { order: 1; flex: 1 1 0; min-width: 0; font-size: 14px; font-weight: 500; }
  .ft .c-score { order: 2; display: block; flex: none; }
  .ft-body .ft-row:not(.ft-gap)::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .ft .c-fw { order: 4; flex: 0 1 auto; max-width: 100%; }
  .ft .c-org { order: 5; flex: 0 1 auto; max-width: 100%; font-size: 12px; }
  .ft .bar { position: absolute; z-index: 2; left: 40px; bottom: 7px; width: calc((100% - 48px) * var(--w)); height: 6px; }
}

/* ---- JevBench side by side --------------------------------------------------------------------------------- */
.jev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.jev-titles { display: flex; flex-direction: column; gap: 4px; }
.jev-title { font: 600 20px/1.25 var(--font-display); }
.jev-caption { font: 400 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.sort { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.sort-label { margin-right: 4px; font: 400 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills [role="radio"] { min-height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; }
.jev-scroll { overflow-x: auto; }
.jev-inner { min-width: 680px; }
.jev-cols, .jev-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 200px minmax(0, 1fr) 156px; gap: 14px; }
.jev-cols { align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--strong); font: 400 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.jev-cols .col { transition: color 160ms ease; }
.jev-cols .on { color: var(--text); }
.col-composite { text-align: right; }
.col-model { text-align: center; }
.col-cost { justify-self: end; white-space: nowrap; padding-right: 6px; } /* its text ends 6 px inside the chart's edge, as the Cost value does; a few px wider than the 150 px that leaves, it spills into the gap */
.col-rank, .cell.rank { padding-left: 6px; } /* a rank sits 6 px inside its chart's edge, as .bars .pos does */
.jev-rows { position: relative; height: calc(var(--rows) * 52px); }
.jev-row { position: absolute; top: calc(var(--pos) * 52px); left: 0; right: 0; height: 52px; align-items: center; border-bottom: 1px solid var(--line); transition: top 600ms var(--ease), opacity 350ms ease 250ms, background-color 160ms ease; }
.jev-row:hover { background: var(--row-hover); }
.jev-row.h2o { background: var(--h2o-bg); }
.cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.comp { justify-content: flex-end; }
.cell .bar { flex: none; height: 18px; background: var(--grey); }
.comp .bar { width: calc((100% - 56px) * var(--f)); }
.lat .bar { width: calc((100% - 72px) * var(--f)); }
.jev-row.h2o .bar { background: var(--yellow); box-shadow: var(--h2o-ring); }
.jev-row.ref .bar { background: repeating-linear-gradient(135deg, var(--grey) 0 3px, transparent 3px 7px); }
.cell .val { font: 400 12px/1 var(--font-mono); white-space: nowrap; }
.model { flex-direction: column; justify-content: center; gap: 1px; text-align: center; }
.model .nm { max-width: 100%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.model .sub { font: 400 10px/1.3 var(--font-mono); color: var(--text-2); white-space: nowrap; }
.jev-row.h2o .nm, .jev-row.h2o .val { font-weight: 600; }
.cost { position: relative; display: block; height: 20px; }
.cost .track { position: absolute; top: 9px; left: 0; right: 58px; height: 2px; background: var(--line); } /* the 52 px the value needs, and the 6 px it sits in from the edge */
.cost .dot { position: absolute; top: -5px; left: calc(100% * var(--f) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--grey); }
.jev-row.h2o .dot { background: var(--yellow); box-shadow: 0 0 0 2px var(--text); }
.cost .val { position: absolute; top: 4px; right: 6px; } /* 6 px inside the chart's right edge (a padding on the cell would not move it) */

/* Two row sets. The Capability sort shows the board's Capability top ten and the reference, the others the Composite top
   ten and the reference. A row in both sets carries the values and mark lengths of both, and the chart's data-sort picks:
   .when-capability shows only under Capability, .when-composite (and the Composite cell's Composite value) everywhere else; --w
   is a mark's length in the Composite set and --w-capability in the Capability set, each on its own scale. A row outside
   the set that is showing keeps its own length while it fades out, and page.js hides it once it has gone. */
.jev-chart:not([data-sort="capability"]) .when-capability,
.jev-chart[data-sort="capability"] .when-composite,
.jev-chart[data-sort="capability"] .comp .val:not(.when-capability) { display: none; }
.cell .bar, .cost .dot { --f: var(--w, var(--w-capability)); }
.jev-chart[data-sort="capability"] .cell .bar, .jev-chart[data-sort="capability"] .cost .dot { --f: var(--w-capability, var(--w)); }
.col-composite .when-capability { letter-spacing: .075em; } /* a character longer than the Composite header: this keeps it on one line wherever that one fits, so the rows don't drop a line under Capability */
.jev-row.is-out { opacity: 0; pointer-events: none; transition: top 600ms var(--ease), opacity 200ms ease, background-color 160ms ease; }

/* ---- motion: bars grow once, the first time a chart is in view (assets/page.js adds .js-motion and .is-drawn) */
.bars .bar, .cell .bar, .ft .bar { transition: width 600ms var(--ease); transition-delay: calc(var(--i, var(--pos, 0)) * 35ms + var(--chart-delay, 0ms)); }
.cost .dot { transition: left 600ms var(--ease); transition-delay: calc(var(--pos, 0) * 35ms); }
.charts .chart + .chart { --chart-delay: 120ms; }
@media screen {
  .js-motion [data-chart]:not(.is-drawn) .bar { width: 0; }
  .js-motion [data-chart]:not(.is-drawn) .dot { left: -6px; }
}
[data-chart].is-resetting .bar, [data-chart].is-resetting .dot { transition: none; }
.jev-chart.is-sorting .bar, .jev-chart.is-sorting .dot { transition-delay: 0ms; }

/* ---- footer ----------------------------------------------------------------------------------------------- */
.site-footer { padding: 40px var(--gutter); border-top: 1px solid var(--line); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 13px; color: var(--text-2); }
.footer-bar a { margin-left: auto; }

/* ---- small screens ---------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --gutter: 16px; --bar-height: 104px; }
  .brand { gap: 10px; font-size: 16px; }
  .brand svg { width: 36px; height: 36px; }
  /* the GitHub mark and the toggle draw in so the dark theme's "Light mode" still fits the logo's row at 360 px */
  .header-bar { column-gap: 8px; }
  .repo-link { width: 28px; height: 28px; }
  .repo-link svg { width: 20px; height: 20px; }
  .repo-link + .theme-toggle { margin-left: -4px; }
  .theme-toggle { padding: 0 8px; }
  .hero { padding-top: 48px; padding-bottom: 56px; }
  .bench { padding-top: 56px; padding-bottom: 56px; }
  .bars .row { grid-template-columns: 30px minmax(0, 132px) minmax(0, 1fr); gap: 8px; }
  .jumps { flex: 1 1 100%; margin-left: 0; }
  .footer-bar a { margin-left: 0; }
}

/* ---- reduced motion: the final state, no transitions -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile > a:hover { transform: none; }
}

@media print {
  .section-bar, .theme-toggle, .skip, .sort { display: none !important; }
  .bench, .tile, .bars .row.h2o, .ft-row.h2o, .jev-row.h2o, .try { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}