/* Physical-Engineering's Last Exam: a blueline print with redline markup (portal/web/FRONTEND_PLAN.md), in Google's
   own type and colours: Google Sans Flex, Google's neutrals for text and surfaces, its blue as the blueline, its red as
   the redline. Blueline carries structure and links; redline is markup only: callouts, what is new, errors, the first
   rank. */
/* Google Sans Flex, self-hosted (SIL Open Font License 1.1: fonts/OFL-GoogleSansFlex.txt), Latin and Latin Extended
   subsets from Google Fonts, for everything: interface, headings and prose. It varies in weight and optical size (the
   browser picks the size's cut). Inline, not @import-ed, so the browser finds it with the stylesheet. */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/google-sans-flex-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/google-sans-flex-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --print: #F8FAFD;          /* Google's surface */
  --sheet: #FFFFFF;
  --blueline: #0B57D0;       /* Google's blue (Material 3 primary) */
  --on-blueline: #FFFFFF;    /* text on a blue fill */
  --ink: #1F1F1F;            /* Google's text */
  --graphite: #444746;       /* Google's secondary text */
  --hairline: #C4C7C5;       /* Google's outline-variant */
  --outline: #747775;        /* an outlined button's edge */
  --redline: #D93025;        /* Google's red */
  --wash: #F0F4F9;           /* Google's surface container: table heads, the meter's track, code */
  --sans: "Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 12px;                 /* Google's medium corner */
  --measure: 68ch;
  /* the type scale: every size on the site is one of these, apart from the front page's display type (the hero's
     name and subtitle, the scenes' question) and the wordmark */
  --fs-xs: 12px;       /* tags, the chart's labels, the title block's captions, task ids */
  --fs-s: 14px;        /* secondary text: notes, hints, table heads, chips, the footer */
  --fs-m: 16px;        /* body, tables, buttons, form controls, navigation */
  --fs-l: 20px;        /* leads, h3 */
  --fs-xl: 25px;       /* h2 */
  --fs-2xl: 31px;      /* h1 on a phone, the agent instructions' title */
  --fs-3xl: 39px;      /* h1 */
  --fs-prose: 17px;    /* running prose */
  --inset: 14px;
  --shadow: rgb(16 24 60 / 0.35);
  /* the glass: the header's tabs, the buttons, the open menus, the leaderboard's picker. A frosted pane of the page
     (backdrop-filter), lit along its top edge and shaded along its bottom, and a raised lens of it for what is chosen */
  --glass: rgb(255 255 255 / 0.6);
  --glass-tint: rgb(255 255 255 / 0.55);   /* under the pointer, inside a pane */
  --glass-edge: rgb(31 31 31 / 0.1);
  --glass-hi: rgb(255 255 255 / 0.95);
  --glass-lo: rgb(31 31 31 / 0.05);
  --glass-drop: rgb(16 24 60 / 0.13);
  --lens: rgb(255 255 255 / 0.97);
  --menu: rgb(255 255 255 / 0.78);         /* an open menu: more opaque, it carries text over anything */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23444746' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* The dark sheet: the system's setting, or the header's switch. base.html sets data-theme on <html> before the page is
   drawn (without its script the sheet stays light). The dark rules below key on it inside :where(), so each weighs no
   more than the light rule it overrides. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --print: #131314;
  --sheet: #1E1F20;
  --blueline: #A8C7FA;
  --on-blueline: #062E6F;
  --ink: #E3E3E3;
  --graphite: #C4C7C5;
  --hairline: #444746;
  --outline: #8E918F;
  --redline: #F28B82;
  --wash: #282A2C;
  --shadow: rgb(0 0 0 / 0.6);
  --glass: rgb(52 54 57 / 0.5);
  --glass-tint: rgb(255 255 255 / 0.07);
  --glass-edge: rgb(255 255 255 / 0.11);
  --glass-hi: rgb(255 255 255 / 0.16);
  --glass-lo: rgb(0 0 0 / 0.3);
  --glass-drop: rgb(0 0 0 / 0.45);
  --lens: rgb(255 255 255 / 0.14);
  --menu: rgb(40 42 44 / 0.82);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23C4C7C5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }    /* the attribute wins over any display rule below */
html { -webkit-text-size-adjust: 100%; background: var(--print); }
body {
  margin: 0; padding: var(--inset);
  background: var(--print); color: var(--ink);
  font: 400 var(--fs-m)/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--blueline) 22%, transparent); }
/* an empty field's hint and an unchosen select in the outline's grey (4.6:1 on the light sheet, 5.2:1 on the dark), apart
   from the ink of what was typed or chosen; Chromium's own grey is 3.6:1 on the dark sheet */
::placeholder { color: var(--outline); opacity: 1; }
select:invalid { color: var(--outline); }
select:invalid option { color: var(--ink); }
input[type="radio"] { accent-color: var(--blueline); }
/* checkboxes drawn in the sheet's own colours, unchecked as well as checked (the browser's grey box is off the
   palette on the dark sheet) */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 1rem; height: 1rem; margin: 0;
  border: 1.5px solid var(--graphite); border-radius: 2px; background: var(--sheet); display: inline-grid;
  place-content: center; vertical-align: -0.15em; cursor: pointer; }
input[type="checkbox"]:checked { background: var(--blueline); border-color: var(--blueline); }
input[type="checkbox"]:checked::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--sheet);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--blueline); outline-offset: 2px; }
/* with forced colours (Windows high contrast) the system repaints both drawn states alike: the browser's own box */
@media (forced-colors: active) {
  input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
  input[type="checkbox"]::before { content: none; }
}

/* The sheet: one thin frame at the page edge, the title block at its foot, and in the margin outside the frame the
   zone ticks of a drawing sheet, 6 px from the frame out: eight zones across, top and bottom, and one every 12rem down each side (a page is
   as long as its content, so the sides keep a fixed pitch). Painted by the body, in its padding; none on a phone,
   which has no margin. */
.frame {
  container-type: inline-size;              /* the front page's haze spans the sheet (100cqw); nothing here is fixed */
  min-height: calc(100vh - 2 * var(--inset));
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
@media (min-width: 721px) {
  body { --tick: color-mix(in srgb, var(--blueline) 30%, var(--hairline)); --zone: calc((100% - 2 * var(--inset)) / 8);
    background:
      linear-gradient(90deg, var(--tick) 1px, transparent 1px) left var(--inset) top calc(var(--inset) - 6px) / var(--zone) 6px repeat-x,
      linear-gradient(90deg, var(--tick) 1px, transparent 1px) left var(--inset) bottom calc(var(--inset) - 6px) / var(--zone) 6px repeat-x,
      linear-gradient(var(--tick) 1px, transparent 1px) left calc(var(--inset) - 6px) top var(--inset) / 6px 12rem repeat-y,
      linear-gradient(var(--tick) 1px, transparent 1px) right calc(var(--inset) - 6px) top var(--inset) / 6px 12rem repeat-y,
      var(--print); }
}
.frame > main { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 2.4rem 2rem 4rem; }
/* A narrow page keeps the wide column, so the kicker and the competition's sub-tabs sit where they do on the wide
   pages beside it; only its text keeps the narrower measure (zero specificity: a class's own max-width wins). Code
   blocks (pre's own max-width: 100%), tables and the agents' document run the column's width, so a long line is not
   cut off beside empty sheet. */
:where(.frame > main.narrow) > * { max-width: 52rem; }
:where(.frame > main.narrow) > :is(.kicker, .subtabs, .table-card, .doc, .flow, .spec, .steps3) { max-width: none; }

a { color: var(--blueline); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blueline); outline-offset: 2px; }   /* the ring follows each element's own corners */

h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); font-weight: 500; letter-spacing: -0.01em; }      /* Google's display: medium, not heavy */
h2 { font-size: var(--fs-xl); font-weight: 500; margin-top: 2.2em; }
h3 { font-size: var(--fs-l); font-weight: 500; margin-top: 1.6em; }
h2 + h3 { margin-top: 0.4em; }
p { margin: 0 0 1em; }
/* A readable line for running text, about 75 characters. In em, not ch: a figure's width is not a letter's average
   (ch is the width of "0"), so ch would not hold the count. Only running text: the rows of a ruled list (.facts, the task bank's index, .states,
   .checks, .history) keep their full width, so their rules run to the end. */
main p, :is(.prose, .doc, .tight, .howto, .callout, .rules) li { max-width: 34em; }
main p { text-wrap: pretty; }              /* no word left alone on a paragraph's last line */
/* the competition's notes under a section heading, and Submit's checklist, are instructions: body size */
main > h2 + p.small, main > div.small { font-size: var(--fs-m); line-height: 1.5; }
main > div.small { max-width: 34em; }
code, pre { font-family: var(--mono); font-size: 0.88em; }
code { background: color-mix(in srgb, var(--graphite) 10%, transparent); padding: 0.05em 0.3em; border-radius: 2px; }
/* A block too wide for its box scrolls; a shade at the edge it runs past says so (each shade is covered by the sheet
   once that edge is reached: the covers scroll with the text, the shades stay with the box). */
pre { --cue: color-mix(in srgb, var(--blueline) 22%, transparent);
      background: linear-gradient(90deg, var(--sheet) 35%, transparent) left / 1.4rem 100% no-repeat local,
        linear-gradient(270deg, var(--sheet) 35%, transparent) right / 1.4rem 100% no-repeat local,
        linear-gradient(90deg, var(--cue), transparent) left / 0.7rem 100% no-repeat scroll,
        linear-gradient(270deg, var(--cue), transparent) right / 0.7rem 100% no-repeat scroll, var(--sheet);
      border: 1px solid var(--hairline); border-radius: var(--r); padding: 0.9rem 1rem;
      overflow-x: auto; line-height: 1.45; max-width: 100%; }
td code { overflow-wrap: break-word; }     /* never "anywhere": that lets a cell shrink to one character */
.table-card td:first-child code { white-space: nowrap; }   /* an id in the first column scrolls the card, unbroken */
@media (min-width: 721px) { .table-card td:first-child code wbr { display: none; } }   /* the <wbr>s are for a phone */
pre code { background: none; padding: 0; font-size: 1em; }   /* the pre is already set small */
.muted { color: var(--graphite); }
.small { font-size: var(--fs-s); line-height: 1.45; }
.warn, .bad { color: var(--redline); }
.num { text-align: right; }
.nowrap { white-space: nowrap; }
.prose { font-family: var(--sans); font-size: var(--fs-prose); line-height: 1.62; max-width: var(--measure); }
.prose p { margin-bottom: 0.9em; }
main p.prose { max-width: 34em; }          /* a paragraph set as prose keeps the running text's measure */
.prose > p:last-child { margin-bottom: 0; }
/* A page's lead, under its heading: a step below the heading in tone as well as size (Google's secondary text), on a
   line of about seventy characters, with room before what follows. A message's lead is the message: ink. */
.lead { font-size: var(--fs-l); line-height: 1.55; max-width: 44rem; margin-bottom: 1.4rem; color: var(--graphite);
        text-wrap: pretty; }
.lead.callout { color: var(--ink); }
.tight { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }
.tight li { margin: 0.25rem 0; }

/* -- the header ----------------------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--hairline); }
.bar { max-width: 76rem; margin: 0 auto; padding: 0.65rem 2rem; display: flex; align-items: center; gap: 1.6rem;
       flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none;
            font-weight: 500; font-size: 19px; letter-spacing: 0; line-height: 1.05; }
.wordmark svg { flex: none; color: var(--blueline); }
.wordmark .w { display: inline-flex; flex-wrap: wrap; column-gap: 0.28em; }
/* The logo centred on the name's capitals (centring the boxes leaves it below their middle); the tabs' padding
   below keeps their text on the name's baseline despite the 2 px underline. */
.wordmark svg { position: relative; top: -0.1em; }
/* The tabs: a capsule of the glass, the current tab on a raised lens of it; with base.html's script one lens slides to
   the tab under the pointer or the focus, overshooting a little as it lands, and back. No frosting in the header: it
   scrolls with the page, so only the plain sheet is ever behind it, and a blur there is redone at every frame of the
   page's motion (the haze, the scenes) for nothing to see. */
.tabs { position: relative; display: flex; gap: 0.1rem; flex: none; padding: 4px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 10px 28px -14px var(--glass-drop),
    0 1px 2px var(--glass-drop); }
.tabs a { position: relative; z-index: 1; color: var(--graphite); text-decoration: none; font-weight: 500; line-height: 1.25;
  padding: 0.36rem 0.95rem; border: 1px solid transparent; border-radius: 100px;
  transition: color 0.2s ease, background-color 0.2s ease; }
.tabs a:hover { color: var(--ink); background: var(--glass-tint); }
.tabs a[aria-current="page"] { color: var(--blueline); }
.tabs a[aria-current="page"], .tabs .lens { background: var(--lens);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-edge), 0 3px 10px -3px var(--glass-drop), 0 1px 1px var(--glass-drop); }
.tabs .lens { position: absolute; z-index: 0; left: 0; top: 0; width: var(--lens-w, 0); height: var(--lens-h, 0);
  transform: translate(var(--lens-x, 0), var(--lens-y, 0)); border-radius: 100px; pointer-events: none; }
.tabs.lensed .lens { transition: transform 0.5s cubic-bezier(0.3, 1.12, 0.4, 1), width 0.5s cubic-bezier(0.3, 1.12, 0.4, 1),
  opacity 0.2s ease; }
.tabs.lensed a[aria-current="page"], .tabs.lensed a:hover { background: none; box-shadow: none; }
.tabs a:focus-visible { outline-offset: 1px; border-radius: 100px; }
.account { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: var(--fs-s); }
/* base.html has the account twice, after the wordmark and after the tabs: one row shows the second, the two-row
   header (below) the first, so the focus order follows what is on screen */
.account-first { display: none; }
.account .link > .hide-sm { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long login */
.account a { font-weight: 600; text-decoration: none; }
/* signing in: a small pane of the glass beside the tabs */
.account > a[href^="/login"] { padding: 0.42rem 0.95rem; border-radius: 100px; background: var(--glass);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px var(--glass-drop);
  transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.account > a[href^="/login"]:hover { background: color-mix(in srgb, var(--blueline) 7%, var(--lens));
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px -6px var(--glass-drop), 0 1px 2px var(--glass-drop); }
.account a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
/* the theme switch (base.html): a round pane of the glass as tall as "Sign in", with the wordmark's circle half inked;
   the inked half turns over with the sheet. It heads the account where the header is one row; where it is two (below),
   the copy after the tabs ends their row. */
.bar > .theme-switch { display: none; }
.theme-switch { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; border-radius: 50%;
  border-color: var(--glass-edge); color: var(--graphite); -webkit-backdrop-filter: none; backdrop-filter: none; }
.theme-switch:hover { color: var(--ink); }
.theme-switch svg { transition: transform 0.5s cubic-bezier(0.3, 1.12, 0.4, 1); }
[data-theme="dark"] .theme-switch svg { transform: rotate(180deg); }
:root:not([data-theme]) .theme-switch { display: none !important; }   /* without base.html's script: nothing to switch */

/* -- buttons, forms ----------------------------------------------------------------------------- */
/* The buttons: pills. The plain one a pane of the glass, lit along its top edge; the primary one Google's blue with a
   sheen across its top. Under the pointer the pane takes a tint of the blue and both rise a little; pressed, they
   sink. */
.btn, button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 500 var(--fs-m)/1 var(--sans); letter-spacing: 0.005em; padding: 0.56rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent); border-radius: 100px;
  background: var(--glass); color: var(--blueline); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 1px 2px var(--glass-drop);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.btn:hover, button:hover { background: color-mix(in srgb, var(--blueline) 7%, var(--lens));
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 6px 16px -8px var(--glass-drop),
    0 1px 2px var(--glass-drop); }
.btn:active, button:active { transform: translateY(0.5px) scale(0.985); }
.btn.primary, button.primary { color: var(--on-blueline); border-color: transparent;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 60%) var(--blueline);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 1px 2px color-mix(in srgb, var(--blueline) 35%, transparent), 0 4px 12px -5px color-mix(in srgb, var(--blueline) 55%, transparent); }
.btn.primary:hover, button.primary:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 60%) color-mix(in srgb, var(--blueline) 92%, var(--on-blueline));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 2px 4px color-mix(in srgb, var(--blueline) 30%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--blueline) 60%, transparent); }
/* on the dark sheet the blue is pale: a glow of it under the button reads as light from below, so it is shaded instead */
:where([data-theme="dark"]) :is(.btn.primary, button.primary), :where([data-theme="dark"]) :is(.btn.primary, button.primary):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.5),
    0 4px 12px -5px rgb(0 0 0 / 0.7); }
button:disabled, button:disabled:hover { color: var(--graphite); border-color: var(--hairline); background: var(--wash);
  box-shadow: none; transform: none; cursor: not-allowed; }
button.link { border: 0; background: none; padding: 0; color: var(--blueline); font: inherit; font-weight: 600; gap: 0.3em;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
button.link:active { transform: none; }
button.link:hover { text-decoration: underline; background: none; }
.actions, .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
form.inline { display: inline; }
td.actions { display: table-cell; margin: 0; white-space: nowrap; }
td.actions form + form { margin-left: 0.4rem; }
/* one control height where a button stands beside an input (2.625rem, the inputs' own) */
.toolbar :is(button, .btn):not(.link) { min-height: 2.625rem; }
td.actions button { font-size: var(--fs-s); padding: 0.4rem 0.6rem 0.32rem; min-height: 0; }
form[action$="/disqualify"] button { color: var(--redline); border-color: color-mix(in srgb, var(--redline) 45%, transparent); }
/* an admin's reject note (templates/_macros.html, review_decision), the height of the buttons beside it */
.review-reject input[type="text"] { width: 14rem; min-height: 0; padding: 0.32rem 0.5rem; font-size: var(--fs-s);
  margin-right: 0.4rem; vertical-align: middle; }
label { display: block; font-weight: 600; margin: 1rem 0 0.35rem; }
label .hint { display: block; font-weight: 400; color: var(--graphite); font-size: var(--fs-s);
  margin-top: 0.15rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), select, textarea {
  font: 400 var(--fs-m)/1.4 var(--sans); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--outline); border-radius: var(--r); padding: 0.55rem 0.65rem; width: 100%; max-width: 46rem;
  min-height: 2.625rem;                    /* a select's own box comes out a pixel short of the inputs' */
  text-overflow: ellipsis;                 /* a hint longer than a phone's field ends in an ellipsis, not mid-word */
}
/* a field's edge at Material's outline (3:1 and more on both sheets, as a field needs), the ink under the pointer */
:is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), select, textarea):hover {
  border-color: var(--ink); }
textarea { min-height: 9rem; font-family: var(--sans); }
input:focus, select:focus, textarea:focus { border-color: var(--blueline); outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blueline) 25%, transparent); }
/* The menus (selects): the site's own chevron, the edge darkening under the pointer. Where the browser lets a select
   be styled open too (appearance: base-select), its list opens as a pane of the glass, each option a rounded row,
   the chosen one in the blue with a tick, the chevron turning over. */
select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.3rem;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.85rem center;
  background-size: 12px 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 0.6rem; padding-right: 0.85rem; background-image: none; }
  select::picker-icon { content: ""; width: 12px; height: 8px; margin-left: auto; background: var(--chevron) no-repeat center / contain;
    transition: rotate 0.25s ease; }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) { margin-block: 6px; padding: 5px; border: 1px solid var(--glass-edge); border-radius: 16px;
    background: var(--menu); color: var(--ink);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px -16px var(--glass-drop), 0 2px 6px var(--glass-drop);
    -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
    opacity: 1; translate: 0 0;
    transition: opacity 0.16s ease, translate 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete; }
  ::picker(select):not(:popover-open) { opacity: 0; translate: 0 -4px; }
  @starting-style { ::picker(select):popover-open { opacity: 0; translate: 0 -4px; } }
  option { gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; border-radius: 11px; font: 500 var(--fs-m)/1.3 var(--sans);
    color: var(--ink); }
  option:hover, option:focus-visible { background: color-mix(in srgb, var(--blueline) 10%, transparent); outline: none; }
  option:checked { color: var(--blueline); font-weight: 600; }
  option::checkmark { color: var(--blueline); }
}
@media (forced-colors: active) {
  select { appearance: auto; background-image: none; padding-right: 0.65rem; }
}
.toolbar input, .toolbar select { width: auto; }
fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
legend { font-weight: 600; margin-bottom: 0.35rem; padding: 0; }
.choice { display: flex; gap: 0.55rem; align-items: baseline; font-weight: 400; margin: 0.35rem 0; max-width: 34em; }
.choice input { margin: 0; align-self: flex-start; margin-top: 0.2em; }   /* level with the label's first line */
/* the registration form (register.html): the GitHub account it records, read-only; the privacy notice in a ruled box
   before the consent it asks for */
.register input[readonly] { color: var(--graphite); background: var(--wash); cursor: default; }
.register input[readonly]:hover { border-color: var(--outline); }
.privacy { max-width: 46rem; margin: 1.6rem 0 0.4rem; padding: 0.9rem 1.1rem 0.75rem; border: 1px solid var(--hairline);
  border-radius: var(--r); background: color-mix(in srgb, var(--wash) 55%, var(--sheet)); font-size: var(--fs-s); }
.privacy h2 { margin: 0 0 0.5rem; font-size: var(--fs-l); }
.privacy p, .privacy li { max-width: none; }
.privacy ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.privacy li + li { margin-top: 0.3rem; }
.privacy p:last-child { margin-bottom: 0; }
.register .choice.consent { max-width: 46rem; margin-top: 0.9rem; }
.register .agree { max-width: 46rem; margin: 0.6rem 0 0; }      /* the rules and the notice the registration agrees to */
/* the official rules (rules.html): numbered sections, each a heading over its text; the privacy notice after them */
.rules { padding-left: 1.6rem; margin: 1.4rem 0 1.6rem; }
.rules > li { margin-top: 1.5rem; }
.rules > li::marker { color: var(--graphite); font-size: var(--fs-l); font-weight: 500; }
.rules h2 { margin: 0 0 0.45rem; font-size: var(--fs-l); }
.rules ul { margin: 0.4rem 0 0.6rem; padding-left: 1.2rem; }
.rules ul li + li { margin-top: 0.2rem; }
/* a list of problems: the error callout (.callout.err), on the sheet */
.problems { border-left: 3px solid var(--redline); padding: 0.55rem 1rem 0.5rem; margin: 1rem 0; max-width: 46rem;
            background: var(--sheet); }
.problems strong { color: var(--redline); }

/* -- panels, tables ----------------------------------------------------------------------------------- */
.card { background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.1rem 1rem;
        margin: 1rem 0; }
.card > :last-child { margin-bottom: 0; }
.card.muted { background: none; border-style: dashed; }   /* an empty state: a hidden line, as TBD is */
/* The site's one callout: a 3 px rule beside the text, blueline for a note, redline for an error or a refusal */
.callout { border-left: 3px solid var(--blueline); padding: 0.2rem 0 0.2rem 1rem; margin: 1.6rem 0;
  max-width: calc(34em + 1rem + 3px); }                  /* its text at the measure of the text round it */
.callout.err { border-left-color: var(--redline); }
.callout > :last-child { margin-bottom: 0; }
/* A card that scrolls a wide table: a shade at the edge it runs past (as on pre); positioned, so visually hidden text
   in a header cell is clipped with the card instead of widening the page. */
.table-card { position: relative; border: 1px solid var(--hairline); border-radius: var(--r); overflow-x: auto;
  --cue: color-mix(in srgb, var(--blueline) 22%, transparent);
  background: linear-gradient(90deg, var(--sheet) 35%, transparent) left / 1.4rem 100% no-repeat local,
    linear-gradient(270deg, var(--sheet) 35%, transparent) right / 1.4rem 100% no-repeat local,
    linear-gradient(90deg, var(--cue), transparent) left / 0.7rem 100% no-repeat scroll,
    linear-gradient(270deg, var(--cue), transparent) right / 0.7rem 100% no-repeat scroll, var(--sheet); }
:where(main) > .card:not(.muted) { max-width: 44rem; }    /* a form or a note at its text's measure, not the frame's */
/* the left column of the site's 1.4fr / 1fr split (.graded, .lookfor, the leaderboard), for blocks under such a split */
@media (min-width: 961px) {
  .states, :where(main) > .card.col { max-width: calc((100% - 2.4rem) * 7 / 12); }
}
@media (max-width: 960px) {
  :where(main) > .card:not(.muted) { max-width: none; }
}
.table-card + p, .table-card + ul { margin-top: 1rem; }      /* text after a table never butts against its frame */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-m); }
th { text-align: left; font-weight: 600; font-size: var(--fs-s); color: var(--graphite); background: var(--wash);
     padding: 0.55rem 0.8rem 0.45rem; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
td { padding: 0.6rem 0.8rem 0.5rem; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
@media (min-width: 721px) {   /* a framed table's outer cells at the panels' 16 px inset */
  .table-card :is(th, td):first-child:not(.rank) { padding-left: 1rem; }
  .table-card :is(th, td):last-child { padding-right: 1rem; }
}
tbody tr:last-child td { border-bottom: 0; }
/* a rank (or a row's number): centred and ruled off from the row, the first place in redline */
th.rank, td.rank { width: 2.6rem; text-align: center; border-right: 1px solid var(--hairline); }
td.rank { color: var(--graphite); }
tr.first td.rank { color: var(--redline); font-weight: 700; }
/* the signed-in person's own rows: a tint and a blueline bar at the row's start */
tr.mine td { background: color-mix(in srgb, var(--blueline) 13%, transparent); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--blueline); }
tr.stale td { background: color-mix(in srgb, var(--redline) 7%, transparent); }
.scorecell { display: inline-flex; align-items: baseline; gap: 0.6rem; justify-content: flex-end; min-width: 9rem; }
.meter { display: inline-block; align-self: center; width: 6rem; height: 6px; border-radius: 1px; overflow: hidden;
         background: color-mix(in srgb, var(--graphite) 18%, transparent); }   /* the track on any row, yours too */
.meter i { display: block; height: 100%; background: var(--blueline); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.6rem 0 1rem; color: var(--graphite);
         font-size: var(--fs-s); }
.chip b { color: var(--ink); }
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 1; padding: 0.25rem 0.4rem 0.15rem;
       border: 1px solid var(--hairline); border-radius: 2px; color: var(--graphite); vertical-align: 0.1em; }
.tag.bad { border-color: var(--redline); color: var(--redline); }
/* the dot stays beside the word's first line, however the cell wraps it */
.status { display: inline-flex; align-items: flex-start; font-size: var(--fs-s); font-weight: 600; color: var(--graphite); }
td.small.muted, td .nowrap { white-space: nowrap; }       /* dates and times, on one line */
/* A table of many columns scrolls in its card, with the edge shade, rather than breaking its words: below 1024 px when
   it has six columns or more, and on a phone when six or more stay shown (.hide-sm drops the others).
   Short data stays on one line (ids, numbers, dates, statuses, code); text wraps. */
.only-sm, .only-md { display: none; }                     /* shown on a phone only, on a tablet or a phone (below) */
@media (max-width: 1023px) {
  .hide-md { display: none; }                            /* a column a tablet drops (a phone too) */
  .only-md { display: inline; }
  .only-md.model-line { display: block; }                 /* a board's model, under the harness's name */
  .meter { display: none; }                              /* in every table: the number carries the score */
  .scorecell { min-width: 0; }
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-md))) { min-width: 44rem; }
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-md))) :is(td.rank, td.num, td.small, td code, td .status) {
    white-space: nowrap; }
}
@media (max-width: 720px) {
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-md))) { min-width: 0; }
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-md))) :is(td.rank, td.num, td.small, td code, td .status) {
    white-space: normal; }
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-sm, .hide-md))) { min-width: 44rem; }
  .table-card > table:has(> thead > tr > th:nth-child(6 of :not(.hide-sm, .hide-md))) :is(td.rank, td.num, td.small, td code, td .status) {
    white-space: nowrap; }
  .table-card td .status { white-space: nowrap; }      /* a long status scrolls the card, never one word a line */
  /* a table of names (code) and what they mean, of three columns or fewer: fixed columns, the names breaking where
     they must, so the meaning is never cut off past the card's edge */
  .table-card > table:not(:has(> thead > tr > th:nth-child(4))):has(> tbody > tr > td:first-child > code) { table-layout: fixed; }
  .table-card > table:not(:has(> thead > tr > th:nth-child(4))):has(> tbody > tr > td:first-child > code) td:first-child code {
    white-space: normal; overflow-wrap: anywhere; }
  .only-sm { display: block; }
}
/* a task's title wraps from a floor, never one word a line */
.table-card td.title { min-width: 11rem; }
/* a hollow ring while it waits (queued, submitted), a filled dot once work happens: graphite in progress, blueline
   done, redline failed */
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin: 0.42em 0.4rem 0 0;
                  border: 1.5px solid var(--graphite); background: transparent; }
.status.s-scored::before, .status.s-accepted::before { background: var(--blueline); border-color: var(--blueline); }
.status.s-failed::before, .status.s-declined::before, .status.s-changes_requested::before { background: var(--redline);
  border-color: var(--redline); }
.status.s-running::before, .status.s-grading::before, .status.s-building::before, .status.s-smoke::before,
.status.s-validating::before, .status.s-held::before, .status.s-in_review::before, .status.s-checked::before {
  background: var(--graphite); }
/* A submission's outcome, under its name: the state in large type (with the score once there is one), the worker's
   message under it, and after a failure what to do next; the rule beside it in the state's colour */
.outcome { border-left: 3px solid var(--graphite); padding: 0.3rem 0 0.3rem 1rem; margin: 1.2rem 0 1.6rem; max-width: 46rem; }
.outcome.o-scored { border-left-color: var(--blueline); }
.outcome.o-failed { border-left-color: var(--redline); }
.outcome p { margin: 0 0 0.4rem; }
.outcome > :last-child { margin-bottom: 0; }
.outcome-state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1.6rem; }
.outcome-state .status { font-size: var(--fs-l); font-weight: 700; color: var(--ink); }
.outcome-state .status::before { width: 10px; height: 10px; margin-top: 0.48em; margin-right: 0.55rem; }
.outcome-score { color: var(--graphite); font-size: var(--fs-s); }
.outcome-score b { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); margin-right: 0.35rem; }
/* a submission's history: fixed columns, so the statuses line up from one submission's page to the next */
table.events { table-layout: fixed; }
table.events th.when { width: 12rem; }
table.events th.state { width: 15rem; }
table.events td:last-child { overflow-wrap: break-word; }
@media (max-width: 720px) {
  table.events th.when { width: 6.6rem; }
  table.events th.state { width: 8.5rem; }
  table.events td:last-child { hyphens: auto; }
  .table-card :is(th, td) { padding-left: 0.5rem; padding-right: 0.5rem; }   /* the last column in view */
  .table-card :is(th, td).rank { width: 2rem; }
}
pre.log { max-height: 26rem; font-size: var(--fs-xs); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0.3em; }
main > .section-head { margin-top: 3.4rem; }               /* a flex box: its h2's margin cannot collapse */
main > .section-head h2 { margin-top: 0; }

/* -- the benchmark's front page --------------------------------------------------------------------- */
/* the hero: the benchmark's name as the page's title, centred, the 3D stage under it */
.hero { position: relative; isolation: isolate; text-align: center; padding: 1.2rem 0 0.4rem; }
/* The haze: a light field in the Gemini mark's colours behind the name (static/js/haze.js draws it on the canvas at an
   eighth of its size; the browser's smoothing blurs it): a flowing mesh band, light streaks at one slant, and a light
   that follows the pointer. Across the sheet, short of its edges, from just under the header (the script places the
   box clear of the tabs) to the buttons, strongest across the name and gone by the buttons; under each line of text the
   script lets it give way just as far as that line's contrast needs, and the mask softens every edge. A fine film
   grain where the colour is, as on Google's Gemini pages. Behind everything in an isolated hero, so it never moves the
   page; it is gone before the drawing.
   Without the script, a still gradient of the same colours. */
.top { position: relative; z-index: 1; }                  /* the header (its glass) above the hero's layers */
.hero-glow { position: absolute; z-index: -1; top: -1.6rem; bottom: 0; pointer-events: none; overflow: hidden;
  left: 0; width: 100%;                                  /* where container units are missing: the main column */
  left: calc(50% - 50cqw + 2rem); width: calc(100cqw - 4rem);   /* the sheet's width, short of its edges */
  --edges: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 78%, transparent);
  -webkit-mask-image: var(--edges); mask-image: var(--edges); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* the still haze, without the script and until its canvas has a frame: the two cross-fade, so nothing blinks out */
.hero-glow::before { content: ""; position: absolute; inset: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 34% 52% at 64% 40%, rgb(49 134 255 / 0.46), transparent 70%),
    radial-gradient(ellipse 22% 40% at 30% 32%, rgb(247 70 70 / 0.24), transparent 70%),
    radial-gradient(ellipse 22% 44% at 18% 50%, rgb(244 190 26 / 0.26), transparent 70%),
    radial-gradient(ellipse 26% 40% at 38% 60%, rgb(26 184 109 / 0.22), transparent 70%); }
.hero-glow canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0;
  transition: opacity 1.4s ease; }
.hero-glow::after { content: ""; position: absolute; inset: 0; opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 46% 44% at 50% 46%, #000 30%, transparent);   /* grain where the colour is */
  mask-image: radial-gradient(ellipse 46% 44% at 50% 46%, #000 30%, transparent);
  /* white specks on the light sheet, black on the dark: the grain only ever moves the page away from the text's colour */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }
:where([data-theme="dark"]) .hero-glow::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -0.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero-glow.is-live::before { opacity: 0; }
.hero-glow.is-live canvas { opacity: 1; }                /* the one entrance: the haze fades in on load */
@media (prefers-reduced-motion: reduce) {
  .hero-glow canvas, .hero-glow::before { transition: none; }
}
@media (max-width: 720px) {
  .hero-glow { top: -1rem; }                             /* under the header, on a phone */
}
@media print, (forced-colors: active) {
  .hero-glow { display: none; }
}
.hero h1 { font-size: 76px; line-height: 1.02; letter-spacing: -0.015em; margin: 0 auto 0.3em; text-wrap: balance;
           hyphens: manual; }
.hero h1 span { display: inline-block; }                  /* lines break between the two halves of the name */
.hero .subtitle { font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--ink); margin: 0 auto 0.7rem;
                  text-wrap: balance; }
.hero .lead { margin: 0 auto 1.3rem; color: var(--graphite); max-width: 38rem; }
/* the four buttons in one size (the user, 2026-10-16): the leaderboard, then the paper, its code and the dataset in the
   ink, each with its mark (the user, 2026-10-20). One row of four where it fits, the leaderboard a gap apart (an empty
   track); on a phone the leaderboard across the top and the other three in a row under it */
.hero .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 0.6rem;
  width: min(100%, 26.5rem); margin: 1rem auto 0.4rem; }   /* the drawing starts on the first screen */
.hero .actions > span { display: contents; }
.hero .actions > .primary { grid-column: 1 / -1; }
.hero .actions .btn { justify-content: center; white-space: nowrap; padding-left: 0.6rem; padding-right: 0.6rem;
  -webkit-backdrop-filter: none; backdrop-filter: none; }   /* the haze is gone by here: a blur of it is redone every
                                                               frame for no visible change */
@media (min-width: 960px) {
  .hero .actions { width: auto; justify-content: center; grid-template-columns: 12.95rem 0 repeat(3, 12.95rem); }
  .hero .actions > .primary { grid-column: 1; }
  .hero .actions .paper > :first-child { grid-column: 3; }
}
.btn.ink { color: var(--ink); }
.btn.soon { cursor: default; color: var(--graphite); }            /* not a link yet: it stays still under the pointer */
.btn.soon:hover { background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 1px 2px var(--glass-drop); }
.btn.soon:active { transform: none; }
.btn.ink svg { flex: none; width: 1em; height: 1em; margin-left: -0.15em; }   /* as tall as the text: one height for all */
/* Hugging Face's logo fills three quarters of its square: drawn a third larger, so it shows as wide as the marks beside
   it, its empty margin taken back so the gap to the label and the button's height stay the same */
.btn.ink img.mark { flex: none; width: 1.33em; height: 1.33em; margin: -0.17em -0.17em -0.17em -0.32em; }
.visually-hidden, .js .scenes-list { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* the plain list behind the pinned frame: out of the tab order from the first paint (stage.js then makes it inert);
   wherever .js is removed again it comes back by itself */
.js .scenes-list { visibility: hidden; }

/* One scene per domain (FRONTEND_PLAN.md, "Scroll-driven scenes"). Without scripts: the questions as a list. With
   them (static/js/stage.js): a section one step of scroll per domain tall, whose frame (rail, stage, question) stays
   pinned while the steps pass. Once read (every act run through, or the section gone up past the window) it folds to
   one frame (stage.js adds .is-folded and scrolls the page by the height that went, so nothing in view moves):
   scrolling back plays nothing again, the way up is one screen, and the rail plays a step by the clock (the one shown
   again too). Both heights come from here, never from the script. */
.scenes-list { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 46rem; display: grid; gap: 0.9rem; }
.scenes-list li { border-top: 1px solid var(--hairline); padding-top: 0.8rem; }
.scenes-pin { display: none; }
.js .scenes {
  --pin-top: 1rem; --pin-h: calc(100vh - 2rem); --step: 180vh;
  --w: min(88rem, calc(100vw - 2 * var(--inset) - 5rem));
  position: relative; width: var(--w); margin: 0.6rem 0 0 calc((100% - var(--w)) / 2);
  height: calc(var(--pin-h) + var(--steps) * var(--step));
}
.js .scenes.is-folded { height: var(--pin-h); }
.js .scenes-pin {
  position: sticky; top: var(--pin-top); height: var(--pin-h);
  /* the question's column narrows from 1280 px down, so the drawing keeps its room */
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) clamp(19rem, 27vw, 26rem); gap: 2rem; align-items: center;
}
/* borderless and full-bleed: the stage fills the whole frame, under the rail and the question, and stage.js frames the
   drawing in the space between them; its lines fade out at the edges instead of being cut */
.scenes-rail, .scenes-question { position: relative; z-index: 1; }
.scenes-rail { grid-column: 1; grid-row: 1; }
.scenes-question { grid-column: 3; grid-row: 1; }
.scenes-rail ol { list-style: none; margin: 0; padding: 0; }
.scenes-rail li + li { margin-top: 0.15rem; }
.scenes-rail button {
  display: block; width: 100%; text-align: left; border: 0; border-left: 2px solid transparent; border-radius: 0;
  background: none; padding: 0.45rem 0 0.38rem 0.9rem; font: 600 var(--fs-m)/1.25 var(--sans); color: var(--graphite);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.scenes-rail button:active { transform: none; }
/* every name on two lines ("Civil / engineering" too), so the rail reads as an even column */
.scenes-rail button { max-width: calc(0.9rem + 7.3em); }
.scenes-rail button:hover { background: none; color: var(--ink); }
.scenes-rail button[aria-current="step"] { color: var(--ink); border-left-color: var(--blueline); }
/* the active step's mark fills in the redline as the scroll goes through the step (stage.js sets --step, 0..1) */
.scenes-rail button { position: relative; }
.scenes-rail button[aria-current="step"]::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--redline); transform-origin: top; transform: scaleY(var(--step, 0)); }
/* The way past the drawings (benchmark.html), in the middle of the frame's foot (stage.js keeps the drawing above it):
   a capsule of the glass, as the header's tabs, near opaque and unblurred over the drawing that moves behind it, and
   a blueline disc with the arrow down, ringed by how much of the drawings the scroll has gone through (--p, stage.js).
   Under the pointer the arrow drops a little; gone once the scenes have folded. */
.scenes-skip { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.25rem; width: fit-content; margin-inline: auto;
  gap: 0.7rem; padding: 0.38rem 0.42rem 0.38rem 1.1rem; font-size: var(--fs-s); font-weight: 500; color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 92%, transparent); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 10px 28px -14px var(--glass-drop),
    0 1px 2px var(--glass-drop);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.scenes-skip .disc { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--blueline); color: var(--on-blueline); }
.scenes-skip .disc::before { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(var(--blueline) calc(var(--p, 0) * 360deg), color-mix(in srgb, var(--blueline) 20%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.scenes-skip svg { transition: transform 0.25s ease; }
.scenes-skip:hover svg, .scenes-skip:focus-visible svg { transform: translateY(2px); }
/* folded, it fades out and drops a little (the user, 2026-10-22: smoother than going at once), then is hidden, so it is
   no longer a Tab stop; the button's own hover transitions kept */
.scenes-skip { transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.12s ease,
  opacity 0.45s ease, translate 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; }
.scenes.is-folded .scenes-skip { opacity: 0; translate: 0 0.6rem; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s ease, translate 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.45s; }
.scenes .stage { position: relative; grid-column: 1 / -1; grid-row: 1; align-self: stretch; width: 100%;
  height: 100%; overflow: clip; }          /* stage.js keeps the canvas inside; this keeps the page from ever scrolling sideways */
.stage:empty::after {          /* until the drawing loads: the sheet, with its scale bar */
  content: ""; position: absolute; left: 1.2rem; bottom: 1.1rem; width: 6rem; height: 6px;
  background: linear-gradient(90deg, var(--blueline) 0 25%, transparent 25% 50%, var(--blueline) 50% 75%, transparent 75%);
  border: 1px solid var(--blueline);
}
/* stage.js sizes both to the drawing's safe area (the canvas with a margin round it) and fades their lines out at
   their edges instead of cutting them: the canvas draws its own fade, the still has a mask */
.stage-canvas, .stage-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-fallback { --fade: 1.5rem;
  --edges: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-image: var(--edges); mask-image: var(--edges); -webkit-mask-composite: source-in; mask-composite: intersect; }
.stage-canvas { touch-action: pan-y pinch-zoom; cursor: grab; outline: none; }
.stage-canvas:active { cursor: grabbing; }
.stage-canvas:focus-visible { outline: 2px solid var(--blueline); outline-offset: -2px; }   /* above the frame's pixels */
.scenes-leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* the live plot: its frame, its dot and its value, each a layer of its own, moved by transforms (scenes.js) */
.scenes-plot, .scenes-plot-dot, .scenes-plot-value { position: absolute; left: 0; top: 0; overflow: visible;
  pointer-events: none; will-change: transform; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.scenes-plot-dot .ring { transform-box: fill-box; transform-origin: center; animation: plot-ping 1.8s ease-out infinite; }
@keyframes plot-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.4); opacity: 0; } }
.scenes-question .q { font: 500 clamp(30px, 2.8vw, 40px)/1.15em var(--sans); letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 1.1rem; max-width: 22ch; text-wrap: balance; }
.scenes-question .task { font-size: var(--fs-m); font-weight: 600; }
/* the question appears line by line once the leader has reached it (stage.js sets each word's --line) */
.js .scenes-question .q .w { display: inline-block; opacity: 0; transform: translateY(0.3em);
  transition: opacity 0.28s ease, transform 0.28s ease; transition-delay: calc(var(--line, 0) * 90ms); }
.js .scenes-question .task { opacity: 0; transition: opacity 0.3s ease 0.3s; }
.js .scenes-question.is-in .q .w { opacity: 1; transform: none; }
.js .scenes-question.is-in .task { opacity: 1; }
.js .scenes-question .q::before { opacity: 0; transition: opacity 0.28s ease; }   /* the phone's marker, with the words */
.js .scenes-question.is-in .q::before { opacity: 1; }
/* the question waits for its reveal from the first paint (the server's copy would show, then go when the script
   takes it over, then come back) */
.js .scenes-question:not(.is-in) .q { opacity: 0; }
/* a reader who tabs to the question's link before it has appeared sees it at once */
.js .scenes-question:focus-within .q, .js .scenes-question:focus-within .q .w, .js .scenes-question:focus-within .task,
.js .scenes-question:focus-within .q::before { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .scenes-question .q .w, .js .scenes-question .task, .js .scenes-question .q::before { transition: none; }
}
@media (max-width: 1199px) {   /* the rail becomes a strip over the stage and the question */
  .js .scenes-pin { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch; gap: 0.9rem 2rem; }
  .scenes-rail { grid-column: 1 / -1; grid-row: 1; }
  .scenes .stage { grid-row: 2; }
  .scenes-question { grid-column: 2; grid-row: 2; align-self: center; }
  /* more names past an edge: that edge fades (stage.js sets .scrolled and .at-end) */
  .scenes-rail ol { --fade-l: #000; --fade-r: transparent; display: flex; gap: 0.6rem; margin-inline: -0.3rem;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, var(--fade-l), #000 2.5rem, #000 calc(100% - 2.5rem), var(--fade-r));
    mask-image: linear-gradient(90deg, var(--fade-l), #000 2.5rem, #000 calc(100% - 2.5rem), var(--fade-r)); }
  .scenes-rail ol.scrolled { --fade-l: transparent; }
  .scenes-rail ol.at-end { --fade-r: #000; }
  .scenes-rail li + li { margin-top: 0; }
  .scenes-rail button { width: auto; max-width: none; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent;
    padding: 0.35rem 0.3rem 0.3rem; font-size: var(--fs-m); }
  .scenes-rail button[aria-current="step"] { border-bottom-color: var(--blueline); }
  .scenes-rail button[aria-current="step"]::after { left: 0; right: 0; top: auto; bottom: -2px; width: auto; height: 2px;
    transform-origin: left; transform: scaleX(var(--step, 0)); }
  .scenes-rail button:focus-visible { outline-offset: -2px; }   /* inside the strip, which clips what lies outside */
  .scenes-question .q { font-size: 30px; line-height: 36px; }
}
/* Stacked: the strip, the question, the stage under it (the plot at its foot). Phones, and portrait tablets, where a
   question column beside the stage would leave the drawing a postage stamp in a tall empty frame (stage.js's STACKED
   is the same query, and test_site_assets.py keeps the two equal). */
@media (max-width: 720px), (max-width: 1199px) and (max-aspect-ratio: 4/5) {
  .js .scenes { --pin-top: 0px; --pin-h: 100vh; --step: 160vh; --stage-h: 58vh; margin-top: 0.4rem; }
  /* the question's row is as tall as the tallest question (stage.js sets --q-h) and each question sits on its foot, so
     one running to a third line never moves the stage */
  .js .scenes-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--q-h, auto) var(--stage-h);
    align-content: start; gap: 0.8rem; padding-top: max(0.6rem, calc((var(--pin-h) - var(--stage-h) - 13rem) / 2)); }
  .scenes .stage { grid-column: 1; grid-row: 3; }
  .scenes-rail { grid-column: 1; grid-row: 1; }
  .scenes-question { grid-column: 1; grid-row: 2; align-self: end; }
  .scenes-question .q { max-width: 30ch; margin-bottom: 0.6rem; }
  .scenes-skip { bottom: max(1rem, env(safe-area-inset-bottom)); }
  /* the leader ends at this marker on the drawing; the question carries the same one */
  .scenes-question .q::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.4em;
    border: 2px solid var(--redline); border-radius: 50%; vertical-align: -0.02em; }
}
@media (max-width: 720px) {    /* phone: the stage at about half the screen */
  .js .scenes { --w: 100%; --stage-h: 52vh; }
  .scenes-question .q { font-size: 24px; line-height: 30px; max-width: none; }
}
/* a short window (a landscape phone, a short laptop window): a smaller question, so the plot under it has room */
@media (max-height: 600px) and (min-width: 721px) {
  .scenes-question .q { font-size: 24px; line-height: 30px; margin-bottom: 0.6rem; }
}
/* The small viewport units where the browser has them (the pinned frame then ignores a phone's sliding toolbar);
   without them a custom property holding svh would be invalid and the section would collapse. */
@supports (height: 1svh) {
  .js .scenes { --pin-h: calc(100svh - 2rem); --step: 180svh; }
  @media (max-width: 720px), (max-width: 1199px) and (max-aspect-ratio: 4/5) {
    .js .scenes { --pin-h: 100svh; --step: 160svh; --stage-h: 58svh; }
  }
  @media (max-width: 720px) {
    .js .scenes { --stage-h: 52svh; }
  }
}
@media (prefers-reduced-motion: reduce) {   /* each step a still: the scroll it takes, halved */
  .js .scenes { --step: 90vh; }
  @supports (height: 1svh) { .js .scenes { --step: 90svh; } }
}
/* The citation at the end of the front page: the BibTeX block with a copy symbol in its top-right corner, over the
   block (which scrolls under it on a phone), on a pane of the page so no line shows through; a check once copied. */
.cite-block { position: relative; margin: 0.4rem 0 0; }
.cite-block pre { margin: 0; }
.cite-copy { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 1; width: 2rem; height: 2rem; padding: 0;
  justify-content: center; border-radius: 0.6rem; color: var(--ink); background: var(--sheet); }
.cite-copy .i-done, .cite-copy.is-done .i-copy { display: none; }
.cite-copy.is-done .i-done { display: block; color: var(--blueline); }
/* The banner (_banner.html): the front page's one bold line after the scenes, set large in the page's own ink
   on the page itself, with light gathered round the words in the hero haze's colours (static/js/banner.js draws it on
   a canvas reaching a little past the line on every side). Without the script, or before it draws: a still glow. The
   words wait, blurred, only once the script has the light ready, and gather as the banner comes into view. */
.sourced { position: relative; isolation: isolate; margin-top: 3.2rem; padding: clamp(2.2rem, 5vw, 3.8rem) 1rem;
  text-align: center; }
/* after the scenes, whose pinned frame ends in open sheet below its drawing (the frame is a window tall, the drawing
   centred in it, the skip button at its foot): the banner starts at the frame's edge, a clear gap under the button
   (the user, 2026-10-22: it felt tight when the banner reached up into the frame), and the drawing and the line are
   still not a screen apart */
.js .scenes ~ .sourced { margin-top: 0; padding-top: clamp(1.6rem, 3.4vw, 2.6rem); }
.sourced-field { position: absolute; inset: -3rem -2rem; z-index: -1; pointer-events: none; }   /* room for the grid */
@media (max-width: 720px) { .sourced-field { inset: -2rem 0; } }          /* inside the frame on a phone */
.sourced-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0;
  transition: opacity 0.6s ease; }
.sourced.is-live .sourced-field canvas { opacity: 1; }
.sourced-title { margin: 0 auto; max-width: none; color: var(--ink); font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -0.015em;   /* the hero's display setting */
  text-shadow: 0 0 24px color-mix(in srgb, var(--blueline) 28%, transparent),
    0 0 64px color-mix(in srgb, #8189DB 22%, transparent); }   /* the still's glow: blue, violet */
.sourced.is-live .sourced-title { text-shadow: none; }
.sourced-title span { display: block; }
.sourced.is-waiting .sourced-title { opacity: 0; filter: blur(10px); transform: translateY(6px); }
.sourced.is-shown .sourced-title { opacity: 1; filter: none; transform: none;
  transition: opacity 1.1s ease, filter 1.3s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .sourced.is-waiting .sourced-title { opacity: 1; filter: none; transform: none; }
}
/* one line, within the page's column (the user, 2026-10-19: one line, then smaller): two steps of the type scale
   under the hero's name (39 x 1.25 = 49px, the hero 76px), about four fifths of the column wide, and the same share
   of a narrower one; on a phone two lines, no larger than a phone's h1 */
@media (min-width: 721px) {
  .sourced-title { font-size: min(3.9cqw, calc(var(--fs-3xl) * 1.25)); white-space: nowrap; }
  .sourced-title span { display: inline; }
}
@media (max-width: 720px) {
  .sourced-title { font-size: min(7vw, var(--fs-2xl)); }      /* its two halves, a line each */
}
/* Who is behind the benchmark (_people.html): the academic partners in one row of six, standing still, a small round
   portrait over each name and university (the user, 2026-10-19); two rows of three on narrow screens. */
.partners-band { margin-top: 3.2rem; }
.partners-band h2 { margin-top: 0; }
.partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.4rem 1.2rem; margin: 1.4rem 0 0;
  padding: 0; list-style: none; }
.partners a { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: inherit; text-align: center;
  text-decoration: none; }
.partners a:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.partners img { display: block; flex: none; width: 72px; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; background: var(--sheet); }
.partners .name { display: block; font-size: var(--fs-s); font-weight: 700; }
.partners .place { display: block; color: var(--graphite); font-size: var(--fs-xs); line-height: 1.35; margin-top: 0.1rem; }
@media (max-width: 900px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* two rows of three */
.lb-preview { margin-top: 3rem; }
/* one rhythm between a page's sections: a section's own heading row carries no extra space above it */
main > section > .section-head:first-child h2 { margin-top: 0; }
main > section:has(> .section-head:first-child), .lb-takeaways, .lanes { margin-top: 3.2rem; }
/* The leaderboard, after vals.ai's benchmark pages: an intro with a summary line, then framed cards (the chart, the
   table) with a header row, a key or filter row and a footer, numbers in tabular figures. The interface around the
   charts is in sentence case; only the lettering inside a chart (its axes, its zones) is in capitals, as on a drawing.
   Our palette: the newer model in blueline, the older in graphite, what the model upgrade adds in redline. */
/* the page's intro: the heading and the summary, beside them the board's particulars as a title block (the footer's
   cells: a caption over its value) */
/* the front page's summary: its key terms marked as with a highlighter, in the blueline's tint */
.lb-summary mark { --mark: 24%; color: inherit; font-weight: 600; padding: 0 0.08em; white-space: nowrap;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--blueline) var(--mark), transparent) 0); }
:where([data-theme="dark"]) .lb-summary mark { --mark: 36%; }   /* the pale blueline needs more on the dark sheet */
.lb-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.4rem 3rem; align-items: start; }
.lb-intro h1 { margin: 0 0 0.6rem; }
.lb-intro > h1 { grid-column: 1 / -1; margin-bottom: -0.8rem; }   /* the leaderboard's: across both columns, one line */
@media (min-width: 721px) {   /* one line down to a tablet: the size follows the intro's width, up to the usual h1 */
  .lb-page > .lb-intro { container-type: inline-size; }
  .lb-intro > h1 { font-size: min(var(--fs-3xl), 4.6cqi); }
}
.lb-intro .lb-summary { font-size: var(--fs-l); line-height: 1.55; max-width: 44rem; color: var(--graphite); }
.lb-intro .lb-summary b { color: var(--ink); }
/* the example repository on the competition's Overview: a highlighted card (a blue-tinted pane edged in the blueline),
   GitHub's mark, what it is, and the one action that copies it */
.template-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem 1.1rem; align-items: center;
  margin: 2.2rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--blueline) 40%, transparent);
  border-radius: var(--r); background: color-mix(in srgb, var(--blueline) 6%, var(--sheet)); }
.template-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--hairline); }
.template-card h2 { margin: 0 0 0.2rem; font-size: var(--fs-l); }
.template-card p { margin: 0; max-width: 46em; }
.template-card .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .template-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .template-mark { width: 2.5rem; height: 2.5rem; }
  .template-card .btn { grid-column: 1 / -1; justify-self: start; }
}
/* the competition's intro (competition.html) is laid out the same way: the lead and the actions, the spec beside them */
.comp-intro .lead { margin-bottom: 1.2rem; }
.comp-intro .actions { margin-bottom: 0; }
.comp-intro > .note { grid-column: 1 / -1; margin-top: 0; }
.lb-spec { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--hairline);
  border-radius: var(--r); background: var(--sheet); }
.lb-spec > div { padding: 0.45rem 0.8rem 0.4rem; border-top: 1px solid var(--hairline); }
.lb-spec > div:nth-child(-n+2) { border-top: 0; }
.lb-spec > div:nth-child(even) { border-left: 1px solid var(--hairline); }
.lb-spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; }      /* an odd last cell takes the whole row */
.lb-spec dt { font-size: var(--fs-xs); color: var(--graphite); }
.lb-spec dd { margin: 0; font-size: var(--fs-s); font-weight: 700; color: var(--ink); }
@media (max-width: 960px) {
  .lb-intro { grid-template-columns: minmax(0, 1fr); }
  .lb-spec { max-width: 26rem; }
}

/* the front page's preview: the summary and the top five, beside them (the right column of the 1.4fr / 1fr split the
   grading section under it uses) what the harness is worth against the model, as two dimension lines on one scale:
   extension lines at both ends, arrowheads, the value written over the line */
.lb-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 2.4rem; align-items: start; }
.lb-split .lb-summary { margin-bottom: 1.2rem; }
/* the front page's preview: the summary over a bar chart of every model, the table of the top rows beside it (the user,
   2026-10-20: a bar chart of the results on the left); stacked on a phone */
.lb-lede { margin-bottom: 1.4rem; }
.lb-lede .lb-summary { margin: 0 0 0.45rem; }
.lb-lede .lb-meta { margin: 0; }
.lb-split.lb-bars-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lb-bars-split .lb-table.lb-mini { margin-top: 0; }
/* the bar chart: a bar from zero for each model in its family's colour, flat on the zero line and rounded at its end,
   the score just past it, a whisker for the spread across runs, light rules every 0.1 */
.lb-bars { --label: 10.5rem; margin: 0; padding: 0.75rem 1rem 0.6rem; border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--sheet); }
.lb-bars figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0 0 0.8rem;
  font-size: var(--fs-s); color: var(--graphite); }
.lb-bars figcaption b { font-size: var(--fs-m); color: var(--ink); }
.bars-plot { position: relative; padding-bottom: 1.5rem; }
.bars-grid { position: absolute; top: 0; bottom: 1.5rem; left: var(--label); right: 2.6rem; pointer-events: none; }
.bars-grid span { position: absolute; top: 0; bottom: 0; left: calc(var(--v) / var(--max) * 100%);
  border-left: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent); }
.bars-grid span:first-child { border-left-color: var(--outline); }         /* the zero line the bars stand on */
.bars-grid em { position: absolute; top: calc(100% + 0.3rem); transform: translateX(-50%); font-style: normal;
  font-size: var(--fs-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }
.bars { position: relative; margin: 0; padding: 0; list-style: none; }
.bars li { position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr) 2.6rem; align-items: center;
  min-height: 2.1rem; }
.bars .who { padding-right: 0.7rem; font-size: var(--fs-s); line-height: 1.2; }    /* the name over its harness */
.bars .who b { font-weight: 600; color: var(--ink); }
.bars .via { display: block; margin-top: 0.05rem; font-size: var(--fs-xs); color: var(--graphite); }
.bars .via .native { margin-right: 0.25rem; }
.bars .track { position: relative; height: 1.75rem; }
.bars .fill { position: absolute; left: 0; top: 50%; height: 0.75rem; margin-top: -0.375rem;
  width: calc(var(--v) / var(--max) * 100%); border-radius: 0 0.375rem 0.375rem 0; background: var(--fam, var(--blueline)); }
.bars .err { --w: color-mix(in srgb, var(--ink) 55%, transparent); position: absolute; top: 50%; height: 7px; margin-top: -3.5px;
  left: calc((var(--v) - var(--e)) / var(--max) * 100%); width: calc(2 * var(--e) / var(--max) * 100%);
  border-inline: 1.5px solid var(--w); background: linear-gradient(var(--w), var(--w)) center / 100% 1.5px no-repeat; }
.bars .val { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; left: calc(var(--label) + (100% - var(--label) - 2.6rem) * (var(--v) + var(--e)) / var(--max) + 0.4rem); }
.bars li:first-child .val { font-weight: 700; }
@media (max-width: 720px) {     /* a phone: a narrower label column, a rule every 0.1 but a number every 0.2 */
  .lb-bars { --label: 8.4rem; padding-inline: 0.75rem; }
  .bars-grid span:nth-child(even) em { display: none; }
}
.lb-table.lb-mini { margin-top: 0; }
.lb-table.lb-mini td.model { font-weight: 600; }         /* the model first, then the harness it scores best with */
.lb-table.lb-mini td.harness { font-weight: 400; }
@media (min-width: 721px) {   /* each score's ± in a column of its own width, so the scores line up with or without it */
  .lb-table.lb-mini .sub { display: inline-block; min-width: 3.7em; text-align: left; }
}
@media (max-width: 720px) { .lb-table.lb-mini td.model { white-space: normal; } }   /* a phone: the score stays in view */
/* side by side (the user, 2026-10-21): the table as tall as the chart, a row for each bar at the bar's height under a
   head as tall as the chart's caption, so each row sits beside its bar, and the legend level with the axis; where the
   columns are narrow, tighter cells (and the smaller type below 1100 px), so no row wraps or scrolls. Stacked (below
   1024 px, where the table would not fit beside the chart), the top rows only. */
@media (min-width: 1024px) {
  .lb-split.lb-bars-split { --lb-head: 2.75rem; align-items: stretch; }
  .lb-bars { padding-top: 0; }
  .lb-bars figcaption { height: var(--lb-head); margin: 0; align-content: center; }
  .lb-bars-split .lb-mini { display: flex; flex-direction: column; }
  .lb-bars-split .lb-mini th { height: calc(var(--lb-head) - 1px); padding-block: 0; vertical-align: middle; }   /* less its rule */
  .lb-bars-split .lb-mini td { height: 2.1rem; padding-block: 0; vertical-align: middle; }
  .lb-bars-split .lb-mini .lb-card-foot { margin-top: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .lb-bars-split .lb-mini :is(th, td) { padding-inline: 0.5rem; }
  .lb-bars-split .lb-mini td.score { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1099px) { .lb-bars-split .lb-mini td { font-size: var(--fs-s); } }
@media (max-width: 1023px) {
  .lb-split.lb-bars-split { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .lb-mini tr.more { display: none; }
}
@media (max-width: 960px) {
  .lb-split { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}
.lb-summary { font: 400 var(--fs-prose)/1.6 var(--sans); max-width: 40em; margin: 0; }
.lb-summary b, .lb-takeaways b { font-family: var(--sans); font-weight: 700; font-size: 0.94em; }
.lb-card { margin: 1.6rem 0 0; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--sheet);
  overflow: hidden; }
.lb-card-head { display: flex; align-items: baseline; gap: 0.4rem 1rem; flex-wrap: wrap; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hairline); }
.lb-card-head b { font-weight: 700; color: var(--ink); }
.lb-card-head span { font-size: var(--fs-s); color: var(--graphite); }      /* a caption, not a link */
.lb-key, .lb-filters { display: flex; align-items: center; gap: 0.5rem 1.4rem; flex-wrap: wrap; padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--wash) 45%, var(--sheet));
  font-size: var(--fs-s); font-weight: 500; color: var(--graphite); }
.lb-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
/* Model families (benchmark.FAMILIES), one colour per class (the user, 2026-10-19: Gemma apart from Gemini, Kimi apart
   from GLM), from the lab's brand where the hues stay apart: Claude in Anthropic's clay, Gemini in Google's blue, GPT
   in ChatGPT's green, Llama in Meta's light blue, Qwen's violet, MiniMax's pink; DeepSeek's blue would sit on Gemini's,
   so it takes a periwinkle; Grok keeps xAI's black and white (near-black, near-white on the dark sheet). Gemma takes a
   petrol teal, Google's cool side but apart from Gemini's blue; Kimi and GLM (black-and-white brands) a red and a
   mustard. The neutral grey is for a model of no class. Checked in CAM02-UCS, light and dark, normal vision and
   simulated deutan/protan/tritan: the closest pair 19.5 apart on the light sheet, 13.2 on the dark (MiniMax and Kimi);
   the model's name is always beside its colour, so the colour is never the only key. */
:root { --fam-claude: #D97757; --fam-gemini: #1A73E8; --fam-gemma: #2E738A; --fam-gpt: #10A37F; --fam-grok: #202124;
  --fam-llama: #48B5FA; --fam-qwen: #6E3EC7; --fam-deepseek: #A088FF; --fam-minimax: #F85EA5; --fam-kimi: #A50E0E;
  --fam-glm: #A59E12; --fam-other: #747775; }
:root[data-theme="dark"] { --fam-claude: #CF7552; --fam-gemini: #1670E5; --fam-gemma: #377381; --fam-gpt: #0A9668;
  --fam-grok: #E8EAED; --fam-llama: #4A9BE0; --fam-qwen: #7B50B1; --fam-deepseek: #9C7AF0; --fam-minimax: #F48FC0;
  --fam-kimi: #CF1736; --fam-glm: #A09808; --fam-other: #8E918F; }
[data-family="claude"] { --fam: var(--fam-claude); }
[data-family="gemini"] { --fam: var(--fam-gemini); }
[data-family="gemma"] { --fam: var(--fam-gemma); }
[data-family="gpt"] { --fam: var(--fam-gpt); }
[data-family="grok"] { --fam: var(--fam-grok); }
[data-family="llama"] { --fam: var(--fam-llama); }
[data-family="qwen"] { --fam: var(--fam-qwen); }
[data-family="deepseek"] { --fam: var(--fam-deepseek); }
[data-family="minimax"] { --fam: var(--fam-minimax); }
[data-family="kimi"] { --fam: var(--fam-kimi); }
[data-family="glm"] { --fam: var(--fam-glm); }
[data-family="other"] { --fam: var(--fam-other); }
.fam { display: inline-block; flex: none; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem; border-radius: 50%;
  background: var(--fam); vertical-align: 0.04em; }
.spread-row[data-family] { --c: var(--fam); }
.pt.front[data-family], .pt.nat[data-family], .pt.named[data-family] { --c: var(--fam); }
.spread-waiting .names span[data-family]::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem;
  margin-right: 0.35rem; border-radius: 50%; background: var(--fam); vertical-align: 0.04em; }
/* each chart's family key, at the right of its key row: the families it shows, best first */
.lb-key .fam-key { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-left: auto; }
.lb-key .fam-key > span { gap: 0; white-space: nowrap; }
.lb-key .fam-key i.fam { width: 0.55rem; height: 0.55rem; margin-right: 0.35rem; background: var(--fam); }
.lb-key i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c, var(--blueline));
  box-shadow: 0 0 0 2px var(--sheet); }
.lb-key .m0, .spread-row.m0, .pt.m0 { --c: var(--blueline); }
.lb-key .m1, .spread-row.m1, .pt.m1 { --c: var(--graphite); }
/* the range chart's key: a bar from end to end, and the average's tick */
.lb-key .ends i { width: 1.6rem; height: 8px; border-radius: 4px; box-shadow: none; background: var(--blueline); }
.lb-key .avg i { width: 2px; height: 0.9rem; border-radius: 1px; background: var(--ink); box-shadow: none; }
.lb-key .gain i { --c: var(--redline); }
.lb-key .front i { width: 0.65rem; height: 0.65rem; }
.lb-key .nat i { width: 7px; height: 7px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--sheet), 0 0 0 2.75px var(--ink); }
.lb-key .other i { --c: color-mix(in srgb, var(--graphite) 70%, var(--sheet)); width: 0.45rem; height: 0.45rem; background: var(--c); }

/* The page's model picker: above the charts, held at the top of the window while the page scrolls under it */
.lb-pickbar { position: sticky; top: 0.6rem; z-index: 6; margin-top: 1.6rem; border: 1px solid var(--glass-edge);
  border-radius: 18px; background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 14px 34px -18px var(--glass-drop), 0 1px 2px var(--glass-drop);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); }
.lb-pickbar .hint { font-size: var(--fs-xs); color: var(--graphite); }
.lb-pickbar { width: fit-content; max-width: 100%; border-radius: 100px; padding: 0.45rem 1.2rem 0.45rem 0.6rem; }
.lb-pickbar .pick .lab { margin-left: 0.6rem; }
.lb-pickbar { background: var(--menu); }                   /* over the charts as it sticks: no figures through it */
.lb-pickbar select { min-width: 13rem; }

/* The range chart: one row per model, a bar from its weakest to its strongest harness, both named at the bar's ends,
   a tick at the average of its harnesses, and the range in the last column. The end labels sit in gutters (--gl, --gr)
   beside the scale, so a bar at either end of the scale still has room for its label. */
.spread-plot { --name: 12rem; --value: 4.5rem; --gl: 8.5rem; --gr: 8.5rem; --pad: 1rem; position: relative;
  padding: 0 var(--pad) 2.3rem; }
.spread-head, .spread-row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) var(--value); align-items: center; }
.spread-head { height: 2.1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--graphite); }
.spread-head span:last-child { text-align: right; }
.spread-grid { position: absolute; top: 2.1rem; bottom: 2.3rem; left: calc(var(--pad) + var(--name) + var(--gl));
  right: calc(var(--pad) + var(--value) + var(--gr)); pointer-events: none; }
.spread-grid span { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--hairline);
  left: calc((var(--v) - var(--lo)) / (var(--hi) - var(--lo)) * 100%); }
.spread-grid em { position: absolute; top: calc(100% + 0.45rem); transform: translateX(-50%); font-style: normal;
  font-size: var(--fs-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }
.spread-row { --c: var(--blueline); position: relative; min-height: 2.6rem; transition: opacity 0.15s;
  border-top: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent); }
.spread-name { font-weight: 600; font-size: var(--fs-s); color: var(--ink); padding-right: 0.8rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spread-value { text-align: right; font-weight: 700; font-size: var(--fs-s); color: var(--ink); font-variant-numeric: tabular-nums; }
.spread-value i, .spread-ends { display: none; }
.spread-track { position: relative; height: 2.6rem; }
.spread-track > * { --x: calc(var(--gl) + (var(--v, var(--a)) - var(--lo)) / (var(--hi) - var(--lo)) * (100% - var(--gl) - var(--gr))); }
.spread-band { position: absolute; top: 50%; height: 8px; margin-top: -4px; left: var(--x); border-radius: 4px;
  width: calc((var(--b) - var(--a)) / (var(--hi) - var(--lo)) * (100% - var(--gl) - var(--gr)));
  background: var(--c); }
.spread-avg { position: absolute; top: calc(50% - 7px); left: var(--x); width: 2px; height: 14px; margin-left: -1px;
  border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--sheet); }
/* the ends: their labels only, no dot (the user, 2026-10-20: fewer dots); a row's one dot is its native pair */
.spread-dot { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; }
.spread-row.gain .spread-dot { background: var(--c); box-shadow: 0 0 0 2px var(--sheet); }
/* the end labels sit on the sheet's colour, so the grid lines stop at their edges */
.spread-dot em, .spread-native em { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-style: normal;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink); line-height: 1; padding: 0.15em 0.25em;
  border-radius: 4px; background: var(--sheet); }
.spread-dot.low em { right: 11px; }
.spread-dot.high em { left: 11px; }
.spread-dot em b, .spread-native em b { margin-left: 0.3em; font-weight: 500; color: var(--graphite); font-variant-numeric: tabular-nums; }
/* the model's native harness: a ring round its dot, an end's or its own (on the bar, named above it, or past an end,
   named in place of that end's harness) */
.spread-dot.nat, .spread-native, .spread-row.pill .spread-dot.nat { background: var(--c); box-shadow: 0 0 0 1.5px var(--sheet), 0 0 0 2.75px var(--c); }
.spread-dot.nat { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.spread-native { position: absolute; z-index: 1; top: 50%; left: var(--x); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--c); }
.nat-mid .spread-native em { top: auto; bottom: 10px; left: 50%; transform: translateX(-50%); }
.nat-past-high .spread-native em { left: 11px; }
.nat-past-low .spread-native em { right: 11px; }
.nat-past-high .spread-dot.high em, .nat-past-low .spread-dot.low em { display: none; }
.spread-row[class*="nat-"] .spread-dot.low em { right: 13px; }     /* clear of a ring at or near the end */
.spread-row[class*="nat-"] .spread-dot.high em { left: 13px; }
/* ends too close for two dots: they grow into one pill from end to end, the average's tick across it */
.spread-row.pill .spread-band { box-sizing: content-box; height: 10px; margin: -5px 0 0 -5px; padding-right: 10px;
  border-radius: 5px; background: var(--c); }
.spread-row.pill .spread-dot { background: none; box-shadow: none; }
.spread-row.pill .spread-avg { top: calc(50% - 9px); height: 18px; }
.spread-row.gain { --c: var(--redline); }
.spread-row.gain .spread-name { color: var(--redline); }
/* a model picked above: its row stays, the rest fade */
.lb.picked .spread-row:not(.on) { opacity: 0.28; }
.lb.picked .spread-row.on .spread-name { color: var(--blueline); }
.spread-caption { margin: 0; max-width: none; padding: 0.8rem 1rem 0.9rem; border-top: 1px solid var(--hairline);
  font: 400 var(--fs-prose)/1.55 var(--sans); color: var(--ink); }
@media (max-width: 1000px) {     /* a phone or a tablet: the name and range above the bar, the two ends written out under it */
  .spread-plot { --name: 0rem; --value: 0rem; --gl: 0.4rem; --gr: 0.4rem; padding-top: 0.4rem; }
  .spread-head { display: none; }
  .spread-grid { top: 0.4rem; }
  .spread-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "track track" "ends ends";
    padding: 0.55rem 0 0.45rem; }
  .spread-name { grid-area: name; }
  .spread-value { grid-area: value; }
  .spread-value i { display: inline; font-style: normal; font-weight: 500; color: var(--graphite); font-size: var(--fs-xs); }
  .spread-track { grid-area: track; height: 1.5rem; }
  .spread-dot em, .spread-native em { display: none; }
  .spread-ends { display: block; grid-area: ends; font-size: var(--fs-xs); color: var(--graphite); }
  .spread-name, .spread-ends { justify-self: start; padding-right: 0.3em; background: var(--sheet); }
  .spread-value { padding-left: 0.3em; background: var(--sheet); }
}

/* The score-against-cost chart: cost across on a log scale, score up. The pairs no cheaper pair outscores are filled
   and joined by the line; every other pair is a small quiet dot, named when pointed at. */
.scatter-plot { position: relative; padding: 2.2rem 1.4rem 3.2rem 3.4rem; }
.scatter-area { position: relative; height: clamp(16rem, 30vw, 24rem); border-left: 1px solid var(--hairline);
  border-bottom: 1px solid var(--graphite); }
.scatter-area .tick { position: absolute; pointer-events: none; }
/* the quarters at the median cost and score: more score for less cost (upper left) tinted green, less score for more
   cost (lower right) tinted red, each edged by a dashed line along the medians and named in its far corner; under the
   grid */
.scatter-area .zone { position: absolute; pointer-events: none; }
.scatter-area .zone.good { left: 0; top: 0; width: calc(var(--sx) * 100%); bottom: calc(var(--sy) * 100%);
  background: color-mix(in srgb, #1E8E3E 8%, transparent);
  border-right: 1px dashed color-mix(in srgb, #1E8E3E 40%, transparent); border-bottom: 1px dashed color-mix(in srgb, #1E8E3E 40%, transparent); }
.scatter-area .zone.poor { left: calc(var(--sx) * 100%); right: 0; bottom: 0; height: calc(var(--sy) * 100%);
  background: color-mix(in srgb, var(--redline) 7%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--redline) 40%, transparent); border-top: 1px dashed color-mix(in srgb, var(--redline) 40%, transparent); }
.scatter-area .zone em { position: absolute; font-style: normal; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; }
.scatter-area .zone.good em { top: 0.45rem; left: 0.55rem; color: #137333; }     /* the far corners: no pair sits there */
.scatter-area .zone.poor em { bottom: 0.45rem; right: 0.55rem; color: #B3261E; }
:where([data-theme="dark"]) .scatter-area .zone.good { background: color-mix(in srgb, #81C995 5%, transparent);
  border-color: color-mix(in srgb, #81C995 40%, transparent); }
:where([data-theme="dark"]) .scatter-area .zone.poor { background: color-mix(in srgb, var(--redline) 5%, transparent); }
:where([data-theme="dark"]) .scatter-area .zone.good em { color: #81C995; }
:where([data-theme="dark"]) .scatter-area .zone.poor em { color: var(--redline); }
.scatter-area .tick.y { left: 0; right: 0; bottom: calc(var(--f) * 100%); border-top: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
.scatter-area .tick.x { top: 0; bottom: 0; left: calc(var(--f) * 100%); border-left: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
.scatter-area .tick em { position: absolute; font-style: normal; font-size: var(--fs-xs); color: var(--graphite);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.scatter-area .tick.y em { right: calc(100% + 0.45rem); top: 0; transform: translateY(-50%); }
.scatter-area .tick.x em { top: calc(100% + 0.4rem); left: 0; transform: translateX(-50%); }
.scatter-line, .scatter-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.scatter-line polyline { fill: none; stroke: var(--blueline); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; transition: opacity 0.15s; }
/* with the dots in their families' colours, the frontier's line and its key are neutral (no family's blue) */
.scatter-area:has(.pt[data-family]) .scatter-line polyline { stroke: color-mix(in srgb, var(--ink) 38%, transparent); }
.lb-scatter:has(.pt[data-family]) .lb-key .front i { background: var(--ink); }
.scatter-leaders line { stroke: var(--graphite); stroke-width: 1; }
.pt { --c: color-mix(in srgb, var(--graphite) 70%, var(--sheet)); position: absolute; left: calc(var(--x) * 100%);
  bottom: calc(var(--y) * 100%); width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--sheet); transition: opacity 0.15s; }
/* the quiet dots below the frontier's family colours in weight */
:where([data-theme="dark"]) .pt, :where([data-theme="dark"]) .lb-key .other i {
  --c: color-mix(in srgb, var(--graphite) 50%, var(--sheet)); }
.pt.m0, .pt.m1 { width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; }
.pt.front { --c: var(--blueline); z-index: 2; width: 10px; height: 10px; margin: 0 0 -5px -5px; }
/* a pair on its model's native harness (benchmark.Board.native): in its family's colour, ringed, as the rankings mark it */
.pt.nat { --c: var(--blueline); z-index: 2; width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px;   /* small (the user) */
  box-shadow: 0 0 0 1.5px var(--sheet), 0 0 0 2.75px var(--c); }
.pt.hover { z-index: 4; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
.pt em { position: absolute; z-index: 3; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  white-space: nowrap; line-height: 1.15; padding: 0 0.15rem; border-radius: 2px;
  background: color-mix(in srgb, var(--sheet) 82%, transparent); pointer-events: none; }
.pt em sup { color: var(--graphite); font-weight: 500; }
.pt em:has(b) { font-weight: 500; }             /* model in harness: the model bold, the harness regular */
.pt em b { font-weight: 700; }
.pt em.later { display: none; }               /* labelled only by the script, where it finds room */
/* without the script: the labels benchmark.py placed */
.pt.r em { left: 12px; top: 50%; transform: translateY(-50%); }
.pt.l em { right: 12px; top: 50%; transform: translateY(-50%); }
.pt.a em { left: 50%; bottom: 12px; transform: translateX(-50%); }
.pt.b em { left: 50%; top: 12px; transform: translateX(-50%); }
.pt.bl em { right: 0; top: 12px; }
.pt.br em { left: 0; top: 12px; }
/* with it: only the labels it placed */
.scatter-area.placed .pt em { display: none; }
.scatter-area.placed .pt.shown em { display: block; }
/* a model picked above: its pairs stay (filled, labelled by harness), the rest and the frontier fade */
.lb.picked .pt:not(.on) { opacity: 0.22; }
.lb.picked .pt.hover { opacity: 1; }
.lb.picked .pt.on { --c: var(--fam, var(--blueline)); z-index: 3; width: 10px; height: 10px; margin: 0 0 -5px -5px; }
.lb.picked .scatter-line polyline { opacity: 0.25; }
.scatter-tip { position: absolute; z-index: 7; pointer-events: none; padding: 0.35rem 0.6rem; border: 1px solid var(--hairline);
  border-radius: var(--r); background: var(--sheet); box-shadow: 0 6px 18px -8px var(--shadow); white-space: nowrap;
  font-size: var(--fs-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }
.scatter-tip b { display: block; color: var(--ink); font-weight: 700; }
.scatter-y, .scatter-x { position: absolute; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite); }
.scatter-y { left: 3.4rem; top: 0.6rem; }      /* above the axis, clear of its top tick */
.scatter-x { right: 1.4rem; bottom: 0.6rem; }
@media (max-width: 720px) {
  .scatter-area .tick.x:not(.decade) em { display: none; }     /* $0.01, $0.1, $1, $10: room for each label */
  .scatter-plot { padding: 2.2rem 1.3rem 3.2rem 2.8rem; }
  .scatter-y { left: 2.8rem; }
  .scatter-area { height: 21rem; }
  .lb-pickbar { position: static; }
  .lb-pickbar .hint { display: none; }
}

/* the takeaways as a drawing's notes: ruled, two to a row where the page is wide enough for two lines of prose */
.lb-takeaways { margin-top: 2.4rem; }
.lb-takeaways h2 { margin: 0 0 0.8rem; }
.lb-takeaways .lb-partial { margin: -0.3rem 0 0.9rem; max-width: none; }
.lb-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.4rem; }
.lb-takeaways li { font: 400 var(--fs-prose)/1.6 var(--sans); margin: 0; max-width: none; color: var(--graphite);
  padding: 0.7rem max(0px, calc(100% - 34em)) 1rem 0;   /* the text at its measure, the rule the column's width */
  border-top: 2px solid var(--ink); }
/* each note opens on its finding, set apart in the ink; the evidence after it quieter (the user, 2026-10-20) */
.lb-takeaways li .lead { display: block; margin-bottom: 0.25rem; color: var(--ink); font-size: var(--fs-l); font-weight: 500;
  line-height: 1.35; }
.lb-takeaways li b { color: var(--ink); }
@media (max-width: 960px) {
  .lb-takeaways ul { grid-template-columns: minmax(0, 1fr); }
}

/* The table card: its filters (a task set, a discipline) pick one of the tables the page renders */
.lb-table { margin-top: 2rem; }
.lb-filters .lab { color: var(--ink); font-weight: 600; margin-right: 0.5rem; }
.lb-filters .seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.lb-filters button { font: inherit; color: var(--graphite); padding: 0.32rem 0.85rem; }
.lb-filters button:hover { color: var(--ink); }
.lb-filters button[aria-pressed="true"] { color: var(--blueline); background: color-mix(in srgb, var(--blueline) 14%, var(--sheet));
  border-color: color-mix(in srgb, var(--blueline) 45%, transparent); }
.lb-filters .pick { display: inline-flex; align-items: center; margin: 0; }
.lb-filters select { font: 600 var(--fs-s)/1.5 var(--sans); color: var(--ink); background-color: var(--sheet);
  border: 1px solid var(--hairline); border-radius: 100px; padding: 0.34rem 2.1rem 0.34rem 0.9rem;
  background-position: right 0.8rem center; width: auto; height: auto; min-height: 0; }
@supports (appearance: base-select) { .lb-filters select { padding-right: 0.8rem; } }
.lb-filters select:focus-visible { border-color: var(--blueline); box-shadow: 0 0 0 1px var(--blueline); }
/* a table wider than its card scrolls, with a shade at the edge it runs past (as .table-card); positioned, so the
   cells' visually hidden words scroll inside it too, not out past the page's edge (a phone scrolled sideways) */
.lb-scroll { position: relative; overflow-x: auto; --cue: color-mix(in srgb, var(--blueline) 22%, transparent);
  background: linear-gradient(90deg, var(--sheet) 35%, transparent) left / 1.4rem 100% no-repeat local,
    linear-gradient(270deg, var(--sheet) 35%, transparent) right / 1.4rem 100% no-repeat local,
    linear-gradient(90deg, var(--cue), transparent) left / 0.7rem 100% no-repeat scroll,
    linear-gradient(270deg, var(--cue), transparent) right / 0.7rem 100% no-repeat scroll, var(--sheet); }
.lb-table table { font-variant-numeric: tabular-nums; }
.lb-table th { white-space: nowrap; }
.lb-table td.harness { font-weight: 600; white-space: nowrap; }
.lb-table td.model { white-space: nowrap; }
.lb-table tr.top td { background: color-mix(in srgb, var(--blueline) 5%, transparent); }
.lb-table .sub { margin-left: 0.4rem; font-size: var(--fs-xs); font-weight: 500; color: var(--graphite); }
.lb-table td.score b { font-weight: 700; }
.lb-table td.harness .only-sm { font-weight: 400; white-space: normal; }   /* a phone: the model under the harness's name */
@media (max-width: 720px) {     /* a phone: the std under the score, the rank as narrow as its text */
  .lb-table td.score .sub { display: block; margin: 0; }
  .lb-table td.score { line-height: 1.25; }
  .lb-table :is(th, td).rank { width: 2rem; }
}
/* The rankings grid: a row per model, ranked by its best harness, a column per harness. Each cell is shaded by what it
   shows (benchmark.Grid.heat; the user, 2026-10-20: a better way to read it): its score in the page's blue, darker the
   higher, or its cost or time in graphite, darker the dearer or longer, never so dark that the number needs another
   colour. The best harness is bold, the harnesses' average closes the grid, and the models still waiting on a pair
   follow the ranked ones. On a phone the model column stays while the harnesses scroll past it. */
.lb-grid { font-variant-numeric: tabular-nums; }
.lb-grid th.num { text-align: right; }
.lb-grid thead th.num:not(.best) { width: 7rem; }   /* the harness columns one width, steady as the views switch */
.lb-grid :is(th, td).num { padding-left: 0.6rem; padding-right: 0.7rem; }
.lb-grid tbody th.model { padding: 0.6rem 0.8rem 0.5rem; border-bottom: 1px solid var(--hairline); background: var(--sheet);
  color: var(--ink); font-size: var(--fs-m); font-weight: 600; white-space: nowrap; }
.lb-grid td.num { white-space: nowrap; color: var(--graphite); }
.lb-grid td.best { color: var(--ink); font-weight: 700; border-right: 1px solid var(--hairline); }
.lb-grid td.top { position: relative; z-index: 0;        /* under the model column on a phone, as it scrolls past */
  color: var(--ink); font-weight: 700; }
.lb-grid td.heat { --hc: color-mix(in srgb, var(--heat, var(--blueline)) calc(var(--s, 0) * var(--heat-max, 42%)), transparent);
  background-image: linear-gradient(var(--hc), var(--hc)); color: var(--ink); }   /* over the row's own colour */
:where([data-theme="dark"]) :is(.lb-grid, .lb-notes) { --heat: #4285F4; --heat-max: 45%; }   /* light text: 6.6:1 at most */
.lb-grid[data-show="cost"] td.heat { --hc: color-mix(in srgb, var(--graphite) calc(var(--c, 0) * 30%), transparent); }
.lb-grid[data-show="time"] td.heat { --hc: color-mix(in srgb, var(--graphite) calc(var(--m, 0) * 30%), transparent); }
.lb-grid tr:not(.waiting) + tr.waiting > * { border-top: 1px solid var(--outline); }
.lb-grid tbody tr:last-child th { border-bottom: 0; }
.lb-grid tbody tr.avg > * { border-top: 1px solid var(--outline); background-color: var(--wash); color: var(--graphite);
  font-size: var(--fs-s); font-weight: 600; }
.lb-grid .v-cost, .lb-grid .v-time { display: none; }
.lb-grid:is([data-show="cost"], [data-show="time"]) .v-score { display: none; }
.lb-grid[data-show="cost"] .v-cost, .lb-grid[data-show="time"] .v-time { display: inline; }
.lb-grid .v-cost sup { margin-left: 0.1rem; color: var(--graphite); line-height: 0; }   /* the row keeps its height */
/* the own harness's name small before its score, its column apart from the common ones, a model that runs only some of
   them tagged, a pair not run a faint dash, and a model's native harness (benchmark.NATIVE) a small ring before the number */
.lb-grid .via { margin-right: 0.45rem; font-size: var(--fs-xs); font-weight: 500; color: var(--graphite); }
.lb-grid :is(th, td).own { border-left: 1px solid var(--hairline); }
.lb-grid thead th.num.own { width: 7rem; }
.lb-grid td.own .pair { display: block; }
/* the additional harness's cell: its name over its score (the user, 2026-10-20), in about a row's height, the row's
   other cells centred on it */
.lb-grid tbody td { vertical-align: middle; }
.lb-grid td.own:not(.none) { padding-top: 0.3rem; padding-bottom: 0.25rem; line-height: 1.2; }
.lb-grid td.own .via { display: block; margin: 0; line-height: 1.1; }
.lb-grid th.model .tag.only { margin-left: 0.45rem; font-weight: 500; }
.lb-grid td.none { color: color-mix(in srgb, var(--graphite) 55%, transparent); }
.native { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border: 1.5px solid currentColor;
  border-radius: 50%; vertical-align: 0.06em; opacity: 0.75; }
/* a model picked above: its row stays, the rest fade */
.lb.picked .lb-grid tr[data-model]:not(.on) { opacity: 0.32; }
.lb.picked .lb-grid tr.on th.model { color: var(--blueline); }
@media (max-width: 720px) {
  .lb-grid :is(th, td).rank { display: none; }
  .lb-grid th.model { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--hairline); }
  .lb-grid th.model .only-sm { display: inline; }       /* the short name beside its family's dot */
  .lb-grid thead th.model { background: var(--wash); }
  .lb-grid tbody th.model { white-space: normal; width: 11.5rem; min-width: 11.5rem; max-width: 11.5rem; padding-left: 1.8rem;
    text-indent: -1rem; }
  .lb-grid th.model .tag.only { display: table; margin: 0.25rem 0 0; text-indent: 0; }   /* under the name */
}
.lb-card-foot { margin: 0; max-width: none; padding: 0.7rem max(1rem, calc(100% - 48em)) 0.7rem 1rem; border-top: 1px solid var(--hairline);
  font-size: var(--fs-s); color: var(--graphite); }
/* the rankings' notes: one statement a line, never split across the two columns of a wide card; the shading's key
   first, its ramp in the colour of the view shown */
.lb-notes { list-style: none; }
.lb-notes li { break-inside: avoid; margin: 0 0 0.3rem; }
.lb-notes li:last-child { margin-bottom: 0; }
.lb-notes .ramp { display: inline-block; width: 2.6rem; height: 0.6rem; margin-right: 0.5rem; vertical-align: 0;
  border-radius: 2px; box-shadow: inset 0 0 0 1px var(--hairline);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--heat, var(--blueline)) var(--heat-max, 42%), transparent)); }
.lb-table:has(.lb-grid:not([hidden]):is([data-show="cost"], [data-show="time"])) .lb-notes .ramp {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--graphite) 30%, transparent)); }
@media (min-width: 1000px) {
  .lb-card-foot.lb-notes { padding-right: 1rem; columns: 2; column-gap: 2.5rem; }
}
.note { color: var(--graphite); font-size: var(--fs-s); max-width: 34em; margin-top: 0.8rem; }

/* A pair still running: TBD in a dashed frame (a hidden line on a drawing: there, not drawn yet). A model with one has
   no best and no range yet: the rankings list it after the ranked models, the range chart on one line under its axis. */
.tag.tbd { border-style: dashed; border-color: var(--graphite); letter-spacing: 0.04em; }
.spread-waiting { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline;
  padding: 0.75rem 1rem 0.8rem; border-top: 1px solid var(--hairline); }
.spread-waiting .tag { justify-self: start; }
.spread-waiting p { margin: 0; max-width: none; font-size: var(--fs-s); line-height: 1.6; }
.spread-waiting .names { font-weight: 600; color: var(--graphite); transition: color 0.15s; }
.spread-waiting .names span { white-space: nowrap; transition: color 0.15s; }
.spread-waiting .why { display: block; font-size: var(--fs-xs); color: var(--graphite); }
/* a model picked above: the list fades, separators too, and the picked name turns blue */
.lb.picked .spread-waiting .names { color: color-mix(in srgb, var(--graphite) 40%, transparent); }
.lb.picked .spread-waiting .names span.on { color: var(--blueline); }
@media (max-width: 1000px) {
  .spread-waiting { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}
/* the front page's preview: how the scores were made, under the summary */
.lb-meta { margin: -0.6rem 0 1.2rem; font-size: var(--fs-s); color: var(--graphite); max-width: 40em; }
/* how the models were run: prose, beside it each model's reasoning setting (level with the prose, as the facts) */
section.lb-methods { margin-top: 3.2rem; }
section.lb-methods h2 { margin-top: 0; }
.lb-methods .prose .tag { font-family: var(--sans); }
.lb-methods .lb-settings { margin-top: 2.6rem; }
.lb-settings .tag { white-space: nowrap; }
/* each setting once, ruled like the table's rows: its tag, then its words and the models it was set on */
.lb-legend { margin: 0; }
.lb-legend > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline;
  padding: 0.7rem 1rem; border-top: 1px solid var(--hairline); }
.lb-legend > div:first-child { border-top: 0; }
.lb-legend dt, .lb-legend dd { margin: 0; }
.lb-legend dd { font-size: var(--fs-s); line-height: 1.5; color: var(--ink); }
@media (max-width: 960px) {
  .lb-methods .lb-settings { margin-top: 0; }
}
@media (max-width: 720px) {
  .lb-legend > div { padding: 0.6rem 0.8rem; }
}
.graded { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 2.4rem; align-items: start; }
.facts { list-style: none; margin: 0.3rem 0 0; padding: 0; border-top: 1px solid var(--hairline); }
section.graded { margin-top: 3.2rem; }
section.graded h2 { margin-top: 0; }
section.graded > .facts { margin-top: 2.6rem; }      /* level with the prose, below the heading */
.facts li { padding: 0.75rem 0 0.65rem; border-bottom: 1px solid var(--hairline); font-weight: 700; }
.facts li span { display: block; font-weight: 400; color: var(--graphite); font-size: var(--fs-s); margin-top: 0.15rem; }

/* the domains as small drawings beside their names, never as full-width pictures */
/* the disciplines: one row, each its scene over its name (two by two below 1100 px, the scene beside the name; a
   phone's two by two with the scene over it again) */
.domains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 1.6rem; margin: 1.2rem 0 0;
           padding: 0; list-style: none; }
.domains a { text-decoration: none; color: inherit; display: grid; grid-template-columns: minmax(0, 1fr);
             gap: 0.7rem; align-items: start; }
.domains a:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.thumb { display: block; aspect-ratio: 4 / 3; background: var(--sheet); border: 1px solid var(--hairline);
         border-radius: var(--r); overflow: hidden; }
.thumb picture { display: block; width: 100%; height: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.domains .name { display: block; font-weight: 700; }
.domains .count { display: block; color: var(--graphite); font-size: var(--fs-s); margin-top: 0.1rem; text-wrap: pretty; }

.lanes { display: grid; grid-template-columns: 1fr 1fr; margin-top: 3rem; border-top: 1px solid var(--hairline); }
.lanes > section { padding: 1.4rem 2rem 0.4rem 0; }
.lanes > section + section { border-left: 1px solid var(--hairline); padding-left: 2rem; }
.lanes h2 { margin-top: 0; }
.lanes > section { display: flex; flex-direction: column; align-items: flex-start; }
.lanes > section > .btn { margin-top: auto; }
.lanes p { max-width: 30rem; }

/* -- the task bank ----------------------------------------------------------------------------------- */
.bank { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.6rem; align-items: start; margin-top: 1.6rem; }
.bank nav { position: sticky; top: 1rem; }
.bank nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.bank nav li { border-bottom: 1px solid var(--hairline); }
.bank nav a { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0 0.45rem; text-decoration: none;
              color: var(--ink); font-weight: 600; font-size: var(--fs-m); }
.bank nav a span { color: var(--graphite); font-weight: 400; }
.bank nav a:hover { color: var(--blueline); }
.domain { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--hairline); scroll-margin-top: 1rem; }
.domain:last-child { border-bottom: 0; }
.domain-head { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "head thumb" "prose thumb";
               grid-template-rows: auto 1fr; gap: 0 1.8rem; align-items: start; }
.domain-head > div { grid-area: head; }
.domain-head > .thumb { grid-area: thumb; }
.domain-head > .prose { grid-area: prose; }
.domain h2 { margin-top: 0; }
.domain .counts { color: var(--graphite); margin-bottom: 0.8rem; }
.domain .held { color: var(--graphite); font-size: var(--fs-s); margin-top: 0.6rem; }
/* the practice tasks' tables: the same columns in every discipline, a title never leaving one word on its last line */
table.practice { table-layout: fixed; }
table.practice th.by { width: 11rem; }
table.practice .title { text-wrap: pretty; }
@media (max-width: 720px) { table.practice th.by { width: 7.5rem; } }

/* -- the competition's sub-tabs -------------------------------------------------------------------------- */
.subtabs { display: flex; gap: 1.2rem; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); margin: 0 0 1.6rem; }
.subtabs a { color: var(--graphite); text-decoration: none; font-weight: 600; font-size: var(--fs-m); padding: 0.4rem 0 0.35rem;
             border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); }
.subtabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blueline); }
.kicker { color: var(--graphite); font-weight: 600; margin: 0 0 0.2rem; }
/* the leaderboard's task sets as sub-tabs (/leaderboard, /leaderboard?set=dev), each with its count */
.lb-tabs .n { margin-left: 0.2rem; font-weight: 400; font-size: var(--fs-s); color: var(--graphite); }

/* the submit flow (submit.html) */
.stepper { list-style: none; display: flex; gap: 0.6rem 1.4rem; flex-wrap: wrap; padding: 0; margin: 1rem 0 1.4rem; }
.stepper li { display: flex; align-items: center; gap: 0.5rem; color: var(--graphite); font-weight: 600; font-size: var(--fs-m); }
.stepper li a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.stepper .n { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 800;
              border: 1.5px solid var(--outline); font-size: var(--fs-s); }
.stepper li.active { color: var(--ink); }
.stepper li.active .n { border-color: var(--blueline); background: var(--blueline); color: var(--on-blueline); }
.stepper li.done .n { border-color: var(--blueline); color: var(--blueline); }
.connect-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.connect-head h2 { margin: 0 0 0.3rem; font-size: var(--fs-l); }
.gh-badge { color: var(--ink); margin-top: 0.15rem; }
.connect.ok { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.connect .grow { flex: 1; }
.ok-dot { color: var(--blueline); font-weight: 800; }
.howto { margin: 0.8rem 0; padding-left: 1.3rem; }
.howto li { margin: 0.3rem 0; }
.perms { list-style: none; padding: 0; margin: 0.6rem 0 1rem; font-size: var(--fs-s); }
.perms li::before { content: "+"; display: inline-block; width: 1.1rem; color: var(--blueline); font-weight: 700; }
.perms li.no::before { content: "\2212"; color: var(--graphite); }
.btn.gh { border-color: var(--ink); color: var(--ink); }

/* the guide */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin: 1.6rem 0;
          list-style: none; padding: 0; counter-reset: step; }
.steps3 li { border-top: 2px solid var(--blueline); padding-top: 0.8rem; counter-increment: step; }
.steps3 li::before { content: counter(step); font-weight: 800; color: var(--blueline); display: block; margin-bottom: 0.2rem; }
.steps3 h3 { margin: 0 0 0.4rem; font-size: var(--fs-l); }
.steps3 .small { font-size: var(--fs-m); line-height: 1.5; }     /* the three steps are the guide's instructions */
/* the instructions for coding agents: text at the page's measure (main p, main li), code blocks and tables as wide as
   the column, each table in a card like the site's others (app.py's _scroll_regions), lists spaced as the guide's */
.doc { overflow-wrap: break-word; }
.doc h1 { font-size: var(--fs-3xl); }
.doc h2 { font-size: var(--fs-xl); }
.doc .table-card { margin: 1rem 0 1.4rem; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc :is(ul, ol) { padding-left: 1.3rem; }
.doc li + li { margin-top: 0.3rem; }
details summary { cursor: pointer; font-weight: 600; color: var(--blueline); margin: 1.6rem 0 0.6rem; }

/* -- contributing ------------------------------------------------------------------------------------- */
/* the example brief: a sheet keyed in its margin to the qualities beside it (redline brackets and rings) */
.lookfor { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 2.4rem; align-items: start;
           margin-top: 1.2rem; }
.brief { margin: 0; background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--r); padding: 0 0 0 1rem; }
.brief-label { font-size: var(--fs-s); font-weight: 500; color: var(--graphite); padding: 0.7rem 0; border-bottom: 1px solid var(--hairline); }
.brief-row { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; border-bottom: 1px solid var(--hairline); }
.brief-row:last-child { border-bottom: 0; }
.brief-row > div, .brief-row > p { margin: 0; padding: 0.9rem 0.6rem 0.8rem 0; }
.brief-row > div > :last-child { margin-bottom: 0; }
.brief h3 { font-size: var(--fs-l); margin: 0 0 0.6rem; }
.brief p { font-family: var(--sans); font-size: var(--fs-prose); line-height: 1.55; }
.brief p + p { margin-top: 0.4rem; }
.brief .field { display: block; font-family: var(--sans); font-size: var(--fs-s); font-weight: 600; color: var(--graphite);
                margin-bottom: 0.1rem; }
.mark { position: relative; }
.mark::before { content: ""; position: absolute; left: 0.15rem; top: 0.8rem; bottom: 0.8rem; width: 0.4rem;
                border: 1.5px solid var(--redline); border-left: 0; }
.mark::after { content: ""; position: absolute; left: 0.55rem; top: 50%; width: 0.6rem; border-top: 1.5px solid var(--redline); }
.mark .key { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); }
.key { display: inline-grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; border: 1.5px solid var(--redline);
       border-radius: 50%; background: var(--sheet); color: var(--redline); font: 700 var(--fs-xs)/1 var(--sans); }
.qualities { margin: 0; border-top: 1px solid var(--hairline); }
.qualities > div { padding: 1rem 0 0.9rem; border-bottom: 1px solid var(--hairline); }
.qualities dt { display: flex; align-items: center; gap: 0.65rem; font-size: var(--fs-l); font-weight: 500; color: var(--ink); }
.qualities dd { margin: 0.35rem 0 0 2.1rem; }
.tree { margin: 1rem 0 0; background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--r);
        padding: 0.6rem 1rem; font-family: var(--mono); font-size: var(--fs-s); line-height: 1.5; }
.tree > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 0.8rem; padding: 0.3rem 0; }
.tree dt { color: var(--ink); }
.tree dd { margin: 0; color: var(--graphite); font-family: var(--sans); }
.states { counter-reset: st; list-style: none; padding: 0; margin: 1rem 0; }
.states li { counter-increment: st; display: grid; grid-template-columns: 2rem minmax(0, 34em); gap: 0.4rem;
             padding: 0.55rem 0 0.45rem; border-bottom: 1px solid var(--hairline); }
.states li::before { content: counter(st); color: var(--blueline); font-weight: 800; }
.states li b { font-weight: 700; }
.history { list-style: none; padding: 0; margin: 0.6rem 0; max-width: 46rem; border-left: 2px solid var(--hairline); }
.history li { position: relative; padding: 0.15rem 0 0.9rem 1.2rem; }
.history li::before { content: ""; position: absolute; left: -8px; top: 0.45rem; width: 10px; height: 10px; border-radius: 50%;
                      background: var(--sheet); border: 2px solid var(--graphite); }
/* each mark in the status dots' code (.status): hollow while it waits, graphite in progress, blue done, red refused */
.history li:is(.s-checked, .s-in_review)::before { background: var(--graphite); }
.history li.s-accepted::before { background: var(--blueline); border-color: var(--blueline); }
.history li:is(.s-changes_requested, .s-declined)::before { background: var(--redline); border-color: var(--redline); }
.history .when { color: var(--graphite); font-size: var(--fs-s); white-space: nowrap; }
.history .what { font-weight: 700; }
.history blockquote { margin: 0.35rem 0 0; padding: 0.4rem 0.7rem; background: var(--sheet); border: 1px solid var(--hairline);
                      border-radius: var(--r); font-family: var(--sans); white-space: pre-wrap; }
.checks { list-style: none; padding: 0; margin: 0.6rem 0; }
.checks li { display: grid; grid-template-columns: 1.4rem 9rem minmax(0, 1fr); gap: 0.4rem; padding: 0.35rem 0;
             border-bottom: 1px solid var(--hairline); font-size: var(--fs-m); }
.checks li::before { content: "\2713"; color: var(--blueline); font-weight: 800; }
.checks li.fail::before { content: "\2715"; color: var(--redline); }
.checks li.fail .detail { color: var(--redline); }
.checks .item { font-family: var(--mono); font-size: var(--fs-s); padding-top: 0.12rem; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.6rem; max-width: 46rem; }
/* each field a column whose label takes the slack, so the inputs of one row line up whatever the hints' lengths; the
   labels of a row on one line at its top */
.form-grid > div:not(.actions) { display: flex; flex-direction: column; }
.form-grid > div:not(.actions) > label { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid > .actions { margin-top: 1.6rem; }
.form-grid > div:first-of-type > label { margin-top: 0; }
.form-grid input, .form-grid select, .form-grid textarea { max-width: none; }

/* -- the title block ------------------------------------------------------------------------------------ */
.foot { border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: stretch;
        flex-wrap: wrap; font-size: var(--fs-s); }
/* The sheet's bottom strip, one row (the user, 2026-10-21): a note cell (the contact sentence on the left, privacy and
   terms at its right edge) and the title block's cells, every cell bounded by the same hairline and as tall as the
   others. Where the row does not fit, the note above the title block. */
.foot .links { flex: 1 1 0; min-width: 0; display: flex; justify-content: space-between; gap: 0.4rem 1.2rem;
  flex-wrap: wrap; align-items: center; padding: 0.8rem 1.2rem; }
.foot .links a { color: var(--graphite); }
.foot .links .contact { color: var(--graphite); }
.foot .legal { display: flex; gap: 1.2rem; align-items: center; margin-left: auto; }   /* right, on its own line too */
.titleblock { flex: none; display: grid; grid-template-columns: auto auto auto; margin: 0;
  border-left: 1px solid var(--hairline); }
.titleblock div { padding: 0.45rem 0.9rem 0.4rem; border-left: 1px solid var(--hairline); }
.titleblock div:first-child { border-left: 0; }
@media (max-width: 1279px) {      /* the note above the title block, which spans the sheet under it */
  .foot .links { flex: 1 0 100%; }
  .titleblock { flex: 1 0 100%; grid-template-columns: auto auto 1fr; border-left: 0; border-top: 1px solid var(--hairline); }
  .titleblock div:first-child { padding-left: 1.2rem; }    /* on the note's left edge */
}
.titleblock dt { color: var(--graphite); font-size: var(--fs-xs); }
.titleblock dd { margin: 0; font-weight: 700; color: var(--ink); font-size: var(--fs-s); white-space: nowrap; }
.titleblock div:nth-child(2) { min-width: 7.5rem; }     /* the Sheet cell: the block stays put from page to page */

/* -- narrow screens ---------------------------------------------------------------------------------------- */
/* signed in, the account (a long login, the admin link) no longer fits beside the five tabs: the header in two planned
   rows, the wordmark and the account, then the tabs (signed out, from 1023 px down) */
@media (min-width: 961px) {
  .wordmark .w { flex-direction: column; }   /* the name on two lines: the tabs, the switch and the account beside it */
}
/* Two rows (signed in below 1220 px, everyone below 1024 px): the wordmark and the account, then the tabs' capsule,
   as wide as its tabs, and the theme switch at the row's end (the tabs keep --switch-room clear for it) */
.bar { --switch-room: 3rem; }
@media (max-width: 1219px) {
  .bar.signed-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .bar.signed-in .tabs { grid-area: 2 / 1 / 3 / -1; justify-self: start; max-width: calc(100% - var(--switch-room));
    margin-right: var(--switch-room); }
  .bar.signed-in > .theme-switch { display: inline-flex; grid-area: 2 / 2; justify-self: end; }
  .bar.signed-in .account-first { display: flex; }
  .bar.signed-in .account-last { display: none; }
}
@media (max-width: 1023px) {
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tabs { grid-area: 2 / 1 / 3 / -1; justify-self: start; max-width: 100%; }
  .bar > .tabs { max-width: calc(100% - var(--switch-room)); margin-right: var(--switch-room); }
  .bar > .theme-switch { display: inline-flex; grid-area: 2 / 2; justify-self: end; }
  .account-first { display: flex; }
  .account-last { display: none; }
}
/* signed out, one row down to 1024 px: the wordmark, the five tabs, the switch and "Sign in" (the phone's words) */
@media (max-width: 1279px) {
  .bar:not(.signed-in) .account > a > .hide-sm { display: none; }
}
@media (max-width: 1099px) {
  .bar { column-gap: 1rem; row-gap: 0.35rem; }
  .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
  .domains a { grid-template-columns: 168px minmax(0, 1fr); gap: 0.9rem; align-items: center; }
}
@media (max-width: 1279px) and (min-width: 961px) {
  /* the tabs closer, so the capsule fits beside the name on one row */
  .bar { column-gap: 0.8rem; }
  .tabs a { padding-inline: 0.5rem; }
}
@media (max-width: 960px) {
  .tabs { padding: 3px; }
  .tabs a { padding-block: 0.27rem; }
  .hero h1 { font-size: 56px; }
  .hero .subtitle { font-size: 24px; }
  .graded { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  section.graded > .facts { margin-top: 0; }
  .bank { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .bank nav { position: static; max-width: 26rem; }     /* each count near its name */
  .foot .links { padding-inline: 2rem; }     /* the footer's edges on the column's (main's padding) */
  .titleblock div:first-child { padding-left: 2rem; }
  .lookfor { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 720px) {
  :root { --inset: 0px; }
  .tree > div { grid-template-columns: minmax(0, 1fr); padding: 0.25rem 0; }
  .tree dd { padding-left: 1rem; }
  .frame { border: 0; }
  .frame > main { padding: 1.6rem 1.1rem 3rem; }
  .bar, .bar.signed-in { padding: 0.8rem 1.1rem; gap: 0.7rem 1.2rem; }
  .wordmark { font-size: 16px; gap: 0.5rem; }
  .wordmark svg { width: 26px; height: 26px; }
  .account { gap: 0.7rem; }
  .wordmark .w { flex-direction: column; }
  .account { margin-left: auto; }
  /* The tabs and the competition's sub-tabs: one row that scrolls, fading at an edge with more past it (base.html's
     script sets .scrolled and .at-end). The second mask layer keeps the row's own rule whole under the fades. */
  .tabs, .subtabs { --fade-l: #000; --fade-r: transparent; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, var(--fade-l), #000 1.5rem, #000 calc(100% - 2rem), var(--fade-r)) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) 0 100% / 100% 1px no-repeat;
    mask: linear-gradient(90deg, var(--fade-l), #000 1.5rem, #000 calc(100% - 2rem), var(--fade-r)) 0 0 / 100% 100% no-repeat,
      linear-gradient(#000 0 0) 0 100% / 100% 1px no-repeat; }
  :is(.tabs, .subtabs).scrolled { --fade-l: transparent; }
  :is(.tabs, .subtabs).at-end { --fade-r: #000; }
  :is(.tabs, .subtabs)::-webkit-scrollbar { display: none; }
  .subtabs a:focus-visible { outline-offset: -2px; }        /* inside the row, which clips what lies outside */
  /* each tab with 0.3rem inside its ring, taken back from the gap and the row's margin, so the text stays put */
  .tabs, .subtabs { margin-inline: -0.3rem; }
  .tabs { justify-self: stretch; gap: 0.2rem; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .subtabs { gap: 0.1rem 0.9rem; }
  .tabs a, .subtabs a { white-space: nowrap; padding-left: 0.3rem; padding-right: 0.3rem; }
  .tabs a { padding: 0.25rem 0.8rem; }
  .account > a[href^="/login"] { padding: 0.3rem 0.75rem; }
  .theme-switch { width: 2rem; height: 2rem; }
  .bar { --switch-room: 3rem; }
  .tabs a:focus-visible { outline-offset: -2px; }   /* inside the row, which clips what lies outside */
  .subtabs a { margin-bottom: 0; }
  h1 { font-size: var(--fs-2xl); }
  .lead, .lb-intro .lb-summary { font-size: var(--fs-prose); }   /* under the smaller heading, a step down as well */
  .lb-tabs .n { display: none; }                      /* the sets' names on the row; the intro gives the count */
  .lb-tabs { column-gap: 0.5rem; }                    /* all three names on one row from 390px */
  .comp-intro .actions > .btn { flex: 1 1 auto; justify-content: center; }   /* the buttons fill their rows */
  .hero h1 { font-size: 40px; max-width: none; }
  .hero h1 span { display: inline; }                     /* at this width the name may break after its hyphen */
  .hero .subtitle { font-size: 20px; }
  /* the domain's drawing beside its heading, its prose across the whole width under both */
  .domain-head { grid-template-columns: minmax(0, 1fr) 42%; grid-template-areas: "head thumb" "prose prose";
                 grid-template-rows: auto auto; gap: 0.6rem 1rem; }
  .domain-head > .prose { margin-top: 0.4rem; }
  .domains { gap: 1.1rem 0.9rem; }
  .domains a { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-items: start; }
  .lanes { grid-template-columns: 1fr; }
  .lanes > section { padding-bottom: 1.6rem; }
  .lanes > section + section { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
  .steps3 { grid-template-columns: 1fr; }
  .brief { padding-left: 1rem; }
  .brief p { font-size: var(--fs-m); }
  .form-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .lb-table th, .lb-table td { padding-left: 0.45rem; padding-right: 0.45rem; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--hairline); }
  .titleblock div:nth-child(2) { border-left: 0; }
  .foot .links { padding-inline: 1.1rem; }
  .titleblock div:is(:first-child, :nth-child(2)) { padding-left: 1.1rem; }
  .titleblock dd { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 359px) {   /* the narrowest phones: "Sign in" as a plain link beside the name, not a pane under it */
  .account > a[href^="/login"] { padding: 0; border: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 400px) {      /* the smallest phones (360 px): the ranking table fits, its last column whole */
  .lb-table th, .lb-table td { font-size: var(--fs-s); padding-left: 0.35rem; padding-right: 0.35rem; }
  /* a tighter hero (the same words), so the scenes' strip and plot come onto the first screen */
  .hero { padding-top: 0.4rem; }
  .hero .lead { font-size: var(--fs-m); margin-bottom: 1rem; }
  .hero .actions .btn { font-size: var(--fs-s); padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (max-width: 720px) and (max-height: 500px) {   /* a phone held sideways: the buttons on the first screen */
  .hero .lead { font-size: var(--fs-m); }
  .hero h1 { margin-bottom: 0.15em; }
}
@media (max-width: 380px) {      /* 360 px: the wordmark and the account on one row, the tabs' strip on the next */
  .bar { column-gap: 0.8rem; }
  .wordmark { gap: 0.4rem; }
  .wordmark svg { width: 22px; height: 22px; }
  .account { gap: 0.6rem; }
  .tabs { gap: 0.2rem; }
  .tabs a { font-size: var(--fs-s); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Forced colours (Windows high contrast), last so they win over the rules above: the current tab, sub-tab and step keep
   their mark in Highlight, the others' in the page's own colour (system colours only, so the forcing can be left off
   these: it would paint every mark alike). */
@media (forced-colors: active) {
  .tabs a, .subtabs a { forced-color-adjust: none; color: LinkText; border-color: Canvas; }
  .scenes-rail button { forced-color-adjust: none; color: ButtonText; background: Canvas; border-color: Canvas; }
  .tabs a[aria-current="page"], .subtabs a[aria-current="page"] { color: LinkText; border-color: Highlight; }
  .tabs .lens { display: none; }
  .scenes-rail button[aria-current="step"] { color: ButtonText; border-color: Highlight; }
  .scenes-rail button::after { display: none; }
  :is(.tabs, .subtabs) a:focus-visible, .scenes-rail button:focus-visible { outline-color: CanvasText; }
}

/* -- Competition: how a submission runs (_harness_flow.html, on the Overview) ------------------------------------ */
/* A schematic in the sheet's own drawing style: the harness, the evaluator and the task as framed boxes, the messages
   between them as arrows that run from one box's edge to the next, each pointing at the side that receives it; a
   pulse runs along each arrow in turn (none with reduced motion). The model and the graders hang below on leaders. */
.hflow { margin: 2.6rem 0 1rem; }
/* the competition's details still to come (competition.html): a section's heading and its intro, as .hflow's */
.comp-tba { margin: 2.6rem 0 0; }
.comp-tba > h2 { margin-top: 0; }
.comp-tba > p { font-size: var(--fs-m); line-height: 1.5; max-width: 34em; color: var(--ink); margin-bottom: 0; }
.hflow > h2 { margin-top: 0; }
.hflow > .lead { font-size: var(--fs-m); line-height: 1.5; max-width: 34em; color: var(--ink); }   /* a section's intro: body */
.hflow h3 { font-size: var(--fs-l); }
/* what you submit (a file listing) beside how it runs (numbered balloons on a leader) */
.hf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; margin: 1.8rem 0 0.6rem; }
@media (min-width: 961px) {   /* the steps beside the heading and its intro, the commit's card under them */
  .hflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .hflow > :not(.hf-top) { grid-column: 1; }
  .hf-top { display: contents; }
  .hf-top > div:first-child { grid-column: 1; margin-top: 1rem; }
  .hf-top > div:last-child { grid-column: 2; grid-row: 1 / span 3; margin-top: 0.35rem; }
  .hflow > p.small { margin-top: 1rem; }
}
.hf-top h3 { margin: 0 0 0.8rem; }
.hf-commit { background: var(--sheet); border: 1px solid var(--blueline); border-radius: var(--r); }
.hf-commit > .flow-k { max-width: none; padding: 0.7rem 1rem; border-bottom: 1px solid var(--blueline);
  text-transform: none; letter-spacing: 0; font-size: var(--fs-s); font-weight: 500; }
.hf-files { list-style: none; margin: 0; padding: 0; font-size: var(--fs-s); line-height: 1.45; }
.hf-files li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: baseline;
           padding: 0.6rem 1rem 0.5rem; }
.hf-files li + li { border-top: 1px solid var(--hairline); }
.hf-files li > code:first-child { background: none; padding: 0; font-size: var(--fs-s); font-weight: 700; color: var(--ink); }
.hf-files span { color: var(--graphite); }
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; font-size: var(--fs-s); line-height: 1.45; }
.stages li { position: relative; counter-increment: stage; padding: 0 0 1rem 2.6rem; }
.stages li::before { content: counter(stage); position: absolute; left: 0; top: -0.15rem; width: 1.75rem; height: 1.75rem;
                     box-sizing: border-box; border: 1.5px solid var(--blueline); border-radius: 50%; background: var(--print);
                     color: var(--blueline); font-weight: 800; line-height: calc(1.75rem - 1px); text-align: center; }
.stages li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.875rem - 0.75px); top: 1.6rem;
                                     bottom: 0.05rem; border-left: 1.5px solid var(--hairline); }
.stages b { display: block; color: var(--ink); font-size: var(--fs-m); }
.hf-top .small { margin: 0.8rem 0 0; }
.flow { margin: 1rem 0 2.2rem; }
/* five columns: harness, WebSocket, evaluator, the evaluator's side of the task, task. The three boxes span four equal
   message rows, and each list of messages shares them (subgrid), so a request and the command it becomes line up */
.flow-grid { display: grid; grid-template-rows: repeat(4, 1fr) 2.4rem auto;
             grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 0.8fr) minmax(0, 1fr); }
.flow-yours { grid-area: 1 / 1 / 5 / 2; }
.flow-ws { grid-area: 1 / 2 / 5 / 3; }
.flow-eval { grid-area: 1 / 3 / 5 / 4; }
.flow-run { grid-area: 1 / 4 / 5 / 5; }
.flow-task { grid-area: 1 / 5 / 5 / 6; }
.flow-model { grid-area: 6 / 1 / 7 / 2; }
.flow-grade { grid-area: 6 / 5 / 7 / 6; }
.flow-box { position: relative; background: var(--sheet); border: 1px solid var(--blueline); border-radius: var(--r);
            padding: 0.85rem 1rem 1rem; }
.flow-box h3 { margin: 0.15rem 0 0.45rem; }
.flow-box ul { margin: 0; padding-left: 1.05rem; font-size: var(--fs-s); line-height: 1.45; }
.flow-box li { margin: 0.2rem 0; }
.flow-k code { text-transform: none; letter-spacing: 0; }
.flow-k { margin: 0; color: var(--graphite); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
          text-transform: uppercase; }
.flow-red { display: inline-block; color: var(--redline); border: 1px solid var(--redline); border-radius: 2px;
            padding: 0.25rem 0.4rem 0.15rem; margin-left: 0.25rem; letter-spacing: 0.04em; white-space: nowrap;
            font-weight: 600; line-height: 1; }
/* the model and the graders hang from the boxes above by a dashed leader, named beside it */
.flow-model::before, .flow-grade::before { content: ""; position: absolute; left: 50%; top: calc(-2.4rem - 1px);
  height: 2.4rem; border-left: 1px dashed var(--blueline); }
.flow-model::after, .flow-grade::after { position: absolute; left: calc(50% + 0.45rem); top: -1.65rem;
  font: 700 var(--fs-xs)/1 var(--mono); color: var(--graphite); }
.flow-model::after { content: "HTTPS_PROXY"; }
.flow-grade::after { content: "after the run"; font-family: var(--sans); letter-spacing: 0.04em; }
/* a message: its name and what it carries, over an arrow the full width of the column, tip on the receiving box */
.flow-msgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: subgrid; min-width: 0; }
.flow-run .fm-req { grid-row: 2; }
.flow-run .fm-res { grid-row: 3; }
.fm { display: flex; flex-direction: column; justify-content: flex-end; padding: 0.3rem 0 0.75rem; border-radius: 2px;
      font-size: var(--fs-s); }     /* equal rows, each arrow at its row's foot: evenly spaced */
.m-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; padding: 0 0.9rem; }
.fm code { font-size: 0.86em; }
.m-what { color: var(--graphite); font-size: var(--fs-xs); }
.fm-done .m-what { color: var(--ink); font-weight: 600; }
.fm .ar { position: relative; display: block; margin-top: 0.35rem; border-top: 1.5px solid var(--blueline); }
.fm .ar::after { content: ""; position: absolute; top: -4.75px; border: 4px solid transparent; }
.fm.to-r .ar::after { right: 0; border-right: 0; border-left: 9px solid var(--blueline); }
.fm.to-l .ar::after { left: 0; border-left: 0; border-right: 9px solid var(--blueline); }
.fm .ar::before { content: ""; position: absolute; top: -4px; width: 6.5px; height: 6.5px; border-radius: 50%;
                 background: var(--blueline); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fm { animation: flow-hl 12s linear 3; animation-delay: calc(var(--i) * 2s); }
  .fm.to-r .ar::before { animation: flow-r 12s linear 3; animation-delay: calc(var(--i) * 2s); }
  .fm.to-l .ar::before { animation: flow-l 12s linear 3; animation-delay: calc(var(--i) * 2s); }
}
@keyframes flow-r { 0% { left: 0; opacity: 0; } 1% { opacity: 1; } 12% { left: calc(100% - 6.5px); opacity: 1; }
                    14%, 100% { left: calc(100% - 6.5px); opacity: 0; } }
@keyframes flow-l { 0% { left: calc(100% - 6.5px); opacity: 0; } 1% { opacity: 1; } 12% { left: 0; opacity: 1; }
                    14%, 100% { left: 0; opacity: 0; } }
@keyframes flow-hl { 0%, 13% { background: var(--wash); } 17%, 100% { background: transparent; } }
.flow figcaption { margin-top: 1.1rem; max-width: 46rem; }
/* what a harness must do: six numbered clauses, as a specification sheet */
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin: 1rem 0 2.2rem;
        counter-reset: clause; }
.spec > div { border-top: 2px solid var(--blueline); padding: 0.7rem 0 1.1rem; counter-increment: clause; }
.spec dt { font-weight: 700; }
.spec dt::before { content: counter(clause, decimal-leading-zero); color: var(--blueline); font-weight: 800;
                   margin-right: 0.55rem; }
.spec dd { margin: 0.3rem 0 0; font-size: var(--fs-s); line-height: 1.5; }
/* an existing agent behind taskbridge.py, with the pi-opus sample's path drawn as a chain */
.hf-agent { max-width: 46rem; }
.chain { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.45rem; padding: 0;
         margin: 1rem 0; font-size: var(--fs-xs); }
.chain li { display: flex; align-items: center; gap: 0.45rem; }
.chain span { border: 1px solid var(--blueline); border-radius: 2px; padding: 0.3rem 0.5rem 0.2rem; background: var(--sheet); }
.chain li:last-child span { border-style: dashed; }
.chain li:not(:last-child)::after { content: "\2192"; color: var(--blueline); font-weight: 700; }   /* stays in the line */
@media (max-width: 1099px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stacked: the model above the harness, then the messages as a rule down through the evaluator to the task and its
   graders; each message points down (to the task's side) or up (to the harness) */
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 2.4rem; }
  .flow-grid > * { grid-area: auto; }
  .flow-model { order: -1; }
  .flow-model::before { top: auto; bottom: calc(-2.4rem - 1px); }
  .flow-model::after { top: auto; bottom: -1.65rem; }
  .flow-msgs { grid-template-rows: none; margin: -2.4rem 0 -2.4rem 1.6rem; padding: 1.2rem 0 1.2rem 1rem;
               border-left: 1.5px solid var(--blueline); }
  .flow-run .fm-req, .flow-run .fm-res { grid-row: auto; }
  .fm { padding: 0.3rem 0; animation: none !important; }
  .m-label { padding: 0 0.5rem; }
  .fm .ar { display: none; }
  .m-label::before { color: var(--blueline); font-weight: 800; margin-right: -0.25rem; }
  .fm.to-r .m-label::before { content: "\2193"; content: "\2193" / ""; }     /* the hidden text says where */
  .fm.to-l .m-label::before { content: "\2191"; content: "\2191" / ""; }
  .hf-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 720px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .hf-files li { grid-template-columns: minmax(0, 1fr); }
}

/* touch screens: the controls at least 44px tall (WCAG 2.5.5), the footer's links with room to tap */
@media (pointer: coarse) {
  .lb-filters select, .lb-filters .seg button, .btn, .cite-copy { min-height: 44px; }
  .tabs a, .subtabs a { padding-block: 0.65rem; }
  .theme-switch { width: 2.75rem; height: 2.75rem; }
  .bar { --switch-room: 3.5rem; }
  .foot .links a { display: inline-block; padding-block: 0.7rem; }
  .foot .links .contact a { display: inline; }   /* the address stays in its sentence; its padding still widens the tap */
  .foot .legal a { display: inline-block; padding-block: 0.7rem; }
}