/* OpenWorldEngineer. A ledger: the page is the table. One monospace face (IBM Plex Mono) for everything, hairline
   rules instead of cards, square corners, ink bars. The primary color is indigo (--accent, Tailwind indigo-600
   #4F46E5; indigo-400 #818CF8 in dark mode, where 600 falls to 3:1 on the sheet) for what to look at first (buttons,
   the leader's bar, the selected series, the trajectory grid, the task visualizations' highlight) and for small labels
   and headings (--accent-ink: eyebrows, tags, step numbers), and link hovers. Red is left for failures and warnings
   (--warn-ink) and red marks (--accent-2). Mercor's indigo (--brand, #5A4AFC; #8C8FFF in dark mode) is for brand
   touches only: "from Mercor", section marks, and the home drawing's center lines and readout. */

:root {
  --bg: #FBFBF9;
  --sheet: #FBFBF9;
  --header-bg: rgba(251, 251, 249, 0.92);
  --ink: #111210;
  --ink-2: #33352F;
  --muted: #6B6E66;
  --rule: #DCDDD6;
  --rule-strong: #111210;
  --hover: #F1F1EC;
  --link: #111210;
  --link-hover: #4F46E5;        /* indigo, as --accent-ink */
  --accent: #4F46E5;            /* indigo-600 marks: leader bar, with-search series, selected line */
  --accent-ink: #4F46E5;        /* indigo text: small labels, headings, tags, step numbers (6.1:1; 5.6:1 on the wash) */
  --accent-wash: #EEF2FF;       /* indigo-50 tint behind indigo text */
  --accent-2: #D7191F;          /* red marks */
  --warn-ink: #A8121A;          /* red text for failures and warnings: a bad exit, an over-limit check */
  --warn-wash: #FCEBEA;         /* tint behind red text */
  --brand: #5A4AFC;             /* Mercor indigo, brand touches only (never data): "from Mercor", section marks, the drawing's center lines and readout */
  --mark-soft: #111210;         /* bars behind the leader */
  --ci-on-accent: #FBFBF9;      /* a whisker's stretch over the indigo leader bar (ink would be 3:1 there) */
  --mark-off: #111210;          /* no-search ring */
  --mark-off-fill: #FBFBF9;
  --line-other: #C9CAC3;
  --eff-lo: #D3D5CE;            /* score-and-compute dots: light grey at low scores (up to 35% of the best shown) */
  --eff-hi: #4338CA;            /* ...shading to indigo-700, a step darker than the accent, at the best score */
  --line-on: #6B6E66;           /* a hovered line among the grey ones */
  --btn: #4F46E5;               /* indigo-600; white text is 6.3:1 */
  --btn-hover: #4338CA;         /* indigo-700 */
  --on-btn: #FFFFFF;
  --neg: #6B6E66;               /* grey, with its minus sign */
  --tip-bg: #111210;
  --tip-fg: #FBFBF9;
  --tip-muted: #A4A69E;
  --tip-web: #818CF8;           /* the accent's series on the dark tooltip: indigo-400 */
  --code-bg: #F1F1EC;
  --node-out: #111210;
  --node-out-2: #C9CAC3;        /* text on the dark Output node */
  --inv-k: #818CF8;             /* small labels on dark panels: indigo-400, 6.3:1 */
  --bounty-from: #111210;
  --bounty-to: #111210;
  --bounty-2: #C9CAC3;
  /* Failure-analysis donut on the task pages: lost points by failure mode on a red-to-orange ramp, largest first and
     darkest (light) or brightest (dark), checked for monotone lightness and visible steps against the sheet; points
     scored in recessive grey, points lost to causes outside the model in mid grey. */
  --fa-1: #6E0D12; --fa-2: #A3141A; --fa-3: #D2231B; --fa-4: #F04A0C; --fa-5: #F5741F; --fa-6: #F79A55;
  --fa-kept: #DCDDD6;
  --fa-out: #8F928A;
  /* Sparks at the gear mesh. */
  --spark-hot: #F59F00;
  --spark-warm: #F25500;
  --spark-glow: #FFA94D;

  --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--font-mono);
  /* Running prose on the home page and the Evals intro; labels, numbers, headings and controls stay in the mono face. */
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-small: 0.75rem;
  --fs-ui: 0.875rem;
  --fs-lede: 1.0625rem;
  --radius: 0;
  --radius-sm: 0;
  --maxw: 1240px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121311;
    --sheet: #121311;
    --header-bg: rgba(18, 19, 17, 0.92);
    --ink: #F0F0EB;
    --ink-2: #CBCCC5;
    --muted: #8F928A;
    --rule: #2A2C28;
    --rule-strong: #F0F0EB;
    --hover: #1C1D1A;
    --link: #F0F0EB;
    --link-hover: #818CF8;
    --accent: #818CF8;
    --accent-ink: #818CF8;
    --accent-wash: rgba(129, 140, 248, 0.14);
    --accent-2: #FF4757;
    --warn-ink: #FF6B78;
    --warn-wash: rgba(255, 71, 87, 0.14);
    --brand: #8C8FFF;
    --mark-soft: #F0F0EB;
    --ci-on-accent: #121311;
    --mark-off: #F0F0EB;
    --mark-off-fill: #121311;
    --line-other: #3A3C37;
    --eff-lo: #3E413B;
    --eff-hi: #A5B4FC;            /* indigo-300, a step brighter than the dark accent */
    --line-on: #8F928A;
    --btn: #818CF8;
    --btn-hover: #A5B4FC;
    --on-btn: #15171A;
    --neg: #8F928A;
    --tip-bg: #F0F0EB;
    --tip-fg: #121311;
    --tip-muted: #6B6E66;
    --tip-web: #4F46E5;
    --code-bg: #1C1D1A;
    --node-out: #F0F0EB;
    --node-out-2: #3A3C37;
    --inv-k: #4F46E5;             /* on the light panel: 5.5:1 */
    --bounty-from: #F0F0EB;
    --bounty-to: #F0F0EB;
    --bounty-2: #3A3C37;
    --spark-hot: #FFE066;
    --spark-warm: #FF6A1F;
    --spark-glow: #FFD43B;
    --fa-1: #FF9AA0; --fa-2: #FF707A; --fa-3: #F24E42; --fa-4: #CF4512; --fa-5: #A83C0E; --fa-6: #82330B;
    --fa-kept: #2E302C;
    --fa-out: #6B6E66;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121311;
  --sheet: #121311;
  --header-bg: rgba(18, 19, 17, 0.92);
  --ink: #F0F0EB;
  --ink-2: #CBCCC5;
  --muted: #8F928A;
  --rule: #2A2C28;
  --rule-strong: #F0F0EB;
  --hover: #1C1D1A;
  --link: #F0F0EB;
  --link-hover: #818CF8;
  --accent: #818CF8;
  --accent-ink: #818CF8;
  --accent-wash: rgba(129, 140, 248, 0.14);
  --accent-2: #FF4757;
  --warn-ink: #FF6B78;
  --warn-wash: rgba(255, 71, 87, 0.14);
  --brand: #8C8FFF;
  --mark-soft: #F0F0EB;
  --ci-on-accent: #121311;
  --mark-off: #F0F0EB;
  --mark-off-fill: #121311;
  --line-other: #3A3C37;
  --eff-lo: #3E413B;
  --eff-hi: #A5B4FC;
  --line-on: #8F928A;
  --btn: #818CF8;
  --btn-hover: #A5B4FC;
  --on-btn: #15171A;
  --neg: #8F928A;
  --tip-bg: #F0F0EB;
  --tip-fg: #121311;
  --tip-muted: #6B6E66;
  --tip-web: #4F46E5;
  --code-bg: #1C1D1A;
  --node-out: #F0F0EB;
  --node-out-2: #3A3C37;
  --inv-k: #4F46E5;
  --bounty-from: #F0F0EB;
  --bounty-to: #F0F0EB;
  --bounty-2: #3A3C37;
  --spark-hot: #FFE066;
  --spark-warm: #FF6A1F;
  --spark-glow: #FFD43B;
  --fa-1: #FF9AA0; --fa-2: #FF707A; --fa-3: #F24E42; --fa-4: #CF4512; --fa-5: #A83C0E; --fa-6: #82330B;
  --fa-kept: #2E302C;
  --fa-out: #6B6E66;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
/* Anchors land below the sticky header, whose height app.js keeps in --header-h (it grows when the nav wraps). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h, 65px) + 23px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
code, pre { font-family: var(--font-mono); }
h1, h2, h3, .brand { font-family: var(--font-display); }
h1, h2, h3 { letter-spacing: -0.01em; font-weight: 500; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--maxw) + 40px); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* ------------------------------------------------------------------ header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--sheet); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--header-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 36px; height: 64px; }
.brand { display: grid; gap: 1px; color: var(--ink); font-weight: 680; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; line-height: 1.15; }
.brand-home { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-home:hover { color: var(--ink); }
.brand svg { width: 24px; height: 24px; flex: none; }
/* "from Mercor" is its own link, to the APEX research page, set under the wordmark and clear of the gear. */
.brand-sub { margin-left: 34px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--brand); text-decoration: none; }
.brand-sub:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.nav { display: flex; gap: 6px; }
.nav a {
  position: relative; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-ui); font-weight: 520; white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--hover); }
.nav a[aria-current="page"] { color: var(--accent-ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -13px; height: 2px; border-radius: 2px; background: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
/* The Mercor mark (mercor.com's own vector, in its indigo gradient) links to mercor.com, beside GitHub. */
.icon-btn img { width: auto; height: 15px; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
}
.header-tools .btn { margin-left: 6px; }
/* Below this the five nav links no longer fit beside the brand and tools (measured with the ledger type: brand 247 +
   nav 493 + tools 248 + two 32px gaps + 40px of padding = 1092px), so they take their own row. That row holds all five
   from about 500px; narrower, it wraps onto a second line rather than scrolling, so no link is ever cut off. */
@media (max-width: 1100px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; gap: 0 12px; padding-top: 10px; }
  .nav { order: 3; flex-wrap: wrap; width: calc(100% + 20px); margin: 4px -10px 2px; }
  .nav a[aria-current="page"]::after { bottom: 0; }
  .header-tools .gh, .header-tools .mercor { display: none; }
}
/* On a phone: tighter tools so the brand, theme switch and Contribute share the first row down to about 390px. */
@media (max-width: 520px) {
  .site-header .wrap { column-gap: 8px; }
  .header-tools { gap: 4px; }
  .header-tools .btn { margin-left: 2px; padding-inline: 10px; }
  .nav { gap: 0 2px; }
  .nav a { padding: 7px 9px; }
}

/* ------------------------------------------------------------------ buttons and controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: 0.875rem; }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); color: var(--on-btn); }
.btn-secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { color: var(--ink); border-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--hover); border: 1px solid var(--rule); }
.seg button {
  border: 0; background: none; padding: 7px 14px; border-radius: 7px; cursor: pointer;
  font-size: 0.875rem; font-weight: 560; color: var(--muted);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 23, 26, 0.12), 0 0 0 1px var(--rule); }

.select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 8px 38px 8px 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background-color: var(--sheet); color: var(--ink);
  font-size: 0.875rem; font-weight: 520; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.select:hover { border-color: var(--accent); }

.tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs button {
  border: 0; background: none; padding: 12px 0 13px; cursor: pointer; white-space: nowrap;
  font-size: var(--fs-ui); font-weight: 560; color: var(--muted); box-shadow: inset 0 -2px 0 transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* The task selector at the top of every Artifacts page (scripts/art_pages.py writes it into each one), styled as pills
   so it doesn't read as a viewer's own tabs. One row per area on wide screens; at phone width the chips scroll sideways
   in a single row, with the area names inline. */
.art-tabs { display: grid; gap: 8px; margin-top: -12px; margin-bottom: 32px; }
.art-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-group-name { flex: none; width: 96px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.art-tabs a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px; white-space: nowrap;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--sheet); text-decoration: none;
  font-size: 0.875rem; font-weight: 540; color: var(--ink-2);
}
.art-tabs a:hover { border-color: var(--accent); color: var(--ink); }
.art-tabs a[aria-current="page"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 720px) {
  .art-tabs { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .art-tabs::-webkit-scrollbar { display: none; }
  .art-group { display: contents; }
  .art-group-name { width: auto; padding-left: 8px; }
  .art-group:first-child .art-group-name { padding-left: 0; }
  .art-tabs a { flex: none; }
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 14px;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--sheet); cursor: pointer;
  font-size: 0.875rem; font-weight: 540; color: var(--ink-2);
}
.pill:hover { border-color: var(--accent); color: var(--ink); }
.pill .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.pill[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.pill[aria-pressed="true"] .count { color: var(--accent-ink); }

.linkish { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font: inherit; text-align: left; }
.linkish:hover { color: var(--link-hover); }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ page scaffolding */
main { display: block; }
.page-head { padding-block: 72px 40px; }
.page-head h1 { font-size: clamp(2.25rem, 4.6vw, 3.25rem); line-height: 1.08; font-weight: 680; }
.page-head p { margin-top: 16px; max-width: 64ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.section { padding-block: 88px 0; }
.page-end { padding-bottom: 144px; }
.section-head { max-width: 66ch; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; font-weight: 660; }
.section-head p { margin-top: 12px; color: var(--ink-2); }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.note { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
.eyebrow { font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); }
@media (max-width: 720px) {
  .page-head { padding-block: 48px 28px; }
  .section { padding-block: 64px 0; }
  .page-end { padding-bottom: 96px; }
}

/* ------------------------------------------------------------------ home: hero beside a drafted gear pair */
/* Content height, not viewport height: the copy and stat grid on the left, the drawing's slot on the right, the
   leaderboard heading visible under it on a laptop screen. */
.hero { border-bottom: 1px solid var(--ink); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 80px 56px; }
.hero h1 { font-size: clamp(2.625rem, 5.4vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
/* The short name with how to say it beside it, in the brand indigo. Each piece keeps its hyphen and, when the line is
   too short, the pronunciation wraps whole and flush left (the column gap only sits between pieces on one line). */
#hero-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
#hero-title > span { white-space: nowrap; }
.hero-say { font-size: clamp(0.8125rem, 1.2vw, 1.0625rem); letter-spacing: 0; color: var(--brand); }
.hero-copy { position: relative; }
.hero .actions { margin-top: 32px; gap: 12px; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 72px 36px; }
  .drawing { height: min(80vw, 420px); }
}

/* The drawing is in a layer behind the page, placed by app.js right of the title (or, when the hero stacks, over this
   empty slot, which only holds its place). On a wide screen the layer is fixed, so the page and its cards slide over it. */
.drawing { min-width: 0; }
.gear-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.gear-backdrop svg { display: block; width: 100%; height: 100vh; height: 100lvh; overflow: visible; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
/* Stacked under the title, the drawing scrolls with the hero rather than staying behind the page. */
@media (max-width: 900px) { .gear-backdrop { position: absolute; } }
.gd-part { fill: var(--bg); stroke: var(--ink); stroke-width: calc(1.8px / var(--gd-k, 1)); stroke-linejoin: round; }
.gd-edge { fill: none; stroke: var(--ink); stroke-width: calc(1.25px / var(--gd-k, 1)); }
.gd-chain { fill: none; stroke: var(--brand); stroke-width: calc(1px / var(--gd-k, 1)); stroke-dasharray: 16 4 2.5 4; }
.gd-dim { fill: none; stroke: var(--muted); stroke-width: calc(0.9px / var(--gd-k, 1)); }
.gd-arrow { fill: var(--muted); }
.gd-text { fill: var(--ink-2); font-size: 13px; letter-spacing: 0.02em; }
.gd-label { fill: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.gd-read { fill: var(--brand); font-size: 13px; font-weight: 640; }
/* Under a stacked title the drawing is cropped by both screen edges, so only the parts and center lines remain. */
@media (max-width: 900px) { .gd-dims, .gd-readout { display: none; } }
.gd-sparks { pointer-events: none; }
.gd-spark { fill: none; stroke: var(--spark-warm); stroke-linecap: round; }
.gd-spark.hot { stroke: var(--spark-hot); }
.gd-glow-in { stop-color: var(--spark-glow); stop-opacity: 0.85; }
.gd-glow-out { stop-color: var(--spark-glow); stop-opacity: 0; }
/* Drafted in once on load; scrolling then turns the pair. */
@media (prefers-reduced-motion: no-preference) {
  .gd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gd-draw 1.3s cubic-bezier(.45, 0, .2, 1) forwards; }
  .gd-later { opacity: 0; animation: gd-fade .5s ease-out 1s forwards; }
}
@keyframes gd-draw { to { stroke-dashoffset: 0; } }
@keyframes gd-fade { to { opacity: 1; } }

/* home: leaderboard and the section heads under it */
.leaders-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 14px; font-size: var(--fs-small); color: var(--muted); }
.leaders-foot .more { font-size: var(--fs-ui); }
.lb-home { min-width: 0; }
.lb-home .c-bar { width: 52%; }

.cov-head { margin: 56px 0 16px; max-width: 66ch; }
.cov-head h3 { font-size: 1.3125rem; font-weight: 650; }
.cov-head p { margin-top: 6px; color: var(--ink-2); }

/* ------------------------------------------------------------------ evals: leaderboard */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lb-card { padding: 4px 24px 20px; }
.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.lb th {
  text-align: left; font-size: var(--fs-small); font-weight: 560; color: var(--muted);
  padding: 16px 10px 10px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.lb th.r, .lb td.r { text-align: right; }
.lb th button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.lb th button:hover, .lb th button[aria-sort] { color: var(--ink); }
.sort-ind { display: inline-block; width: 0.7em; }
.lb td { padding: 13px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.lb tr.row { cursor: pointer; transition: background-color 120ms; }
.lb tr.row:hover, .lb tr.row[aria-expanded="true"] { background: var(--hover); }
.lb tr.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lb tr.row[aria-expanded="true"] td { border-bottom-color: transparent; }
.c-rank { width: 40px; color: var(--muted); font-size: var(--fs-ui); }
.c-model { min-width: 170px; }
.model-name { font-weight: 600; line-height: 1.3; color: var(--ink); }
.model-meta { font-size: var(--fs-small); color: var(--muted); margin-top: 1px; }
.c-elo { width: 72px; font-size: 1rem; font-weight: 660; white-space: nowrap; }
.c-bar { width: 38%; min-width: 140px; padding-inline: 16px 20px !important; }
.bar-wrap { position: relative; height: 20px; }
.bar-fill { position: absolute; left: 0; top: 6px; height: 8px; background: var(--mark-soft); border-radius: 0 4px 4px 0; transition: width 420ms cubic-bezier(.2, .7, .2, 1); }
.bar-fill.lead { background: var(--accent); }
.whisker { --on-bar: var(--sheet); --off-bar: var(--ink-2); position: absolute; top: 5px; height: 10px; transition: left 420ms cubic-bezier(.2, .7, .2, 1), width 420ms cubic-bezier(.2, .7, .2, 1); }
.whisker.lead { --on-bar: var(--ci-on-accent); }
/* the stretch over the bar (up to --split, set by app.js) in --on-bar, the rest in --off-bar */
.whisker::before { content: ""; position: absolute; left: 0; right: 0; top: 4.5px; height: 1px; background: linear-gradient(to right, var(--on-bar) var(--split, 0%), var(--off-bar) var(--split, 0%)); }
.whisker::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--on-bar); border-right: 1px solid var(--off-bar); }
.c-score { width: 128px; white-space: nowrap; }
.c-score b { font-size: 1rem; font-weight: 660; color: var(--ink); }
.c-score .ci { margin-left: 6px; font-size: var(--fs-small); color: var(--muted); }
.c-cost, .c-time { width: 84px; font-size: var(--fs-ui); color: var(--ink-2); white-space: nowrap; }
.up-neg { color: var(--neg); }
.axis-row td { border-bottom: 0; padding-top: 6px; padding-bottom: 0; }
.axis { position: relative; height: 16px; }
.axis span { position: absolute; transform: translateX(-50%); font-size: 0.6875rem; color: var(--muted); }
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }
.lb tr.anchor-row td { color: var(--muted); border-bottom: 0; border-top: 1px dashed var(--rule-strong); }
.lb tr.anchor-row .model-name { font-weight: 500; color: var(--ink-2); }
.lb tr.anchor-row .c-elo { font-weight: 500; }
.anchor-tick { position: absolute; left: 0; top: 3px; width: 2px; height: 14px; background: var(--ink-2); }
.lb-card .note { margin-top: 20px; }
@media (max-width: 720px) {
  .lb-card { padding: 0 12px 16px; }
  .lb { min-width: 0; }
  .lb td, .lb th { padding-inline: 6px; }
  .c-rank { width: 26px; }
  .c-model { min-width: 0; }
  .c-cost, .c-time { display: none; }
  .c-score { width: auto; }
  .c-bar { width: 28%; min-width: 60px; padding-inline: 8px !important; }
  .axis span:not(:first-child):not(:last-child) { display: none; }
}
@media (max-width: 520px) { .c-bar, .lb tfoot { display: none; } }

/* expanded row */
.lb tr.detail td { padding: 4px 10px 24px; background: var(--hover); border-bottom: 1px solid var(--rule); cursor: default; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 56px; padding: 10px 0 0 40px; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; } }
.mini-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); }
.dom-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px 14px; align-items: center; }
.dom-name { font-size: 0.875rem; color: var(--ink-2); }
.dom-vals { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.dom-bar { height: 8px; border-radius: 4px; background: var(--rule); }
.dom-bar > div { height: 8px; border-radius: 4px; background: var(--accent); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; align-content: start; }
.facts dt { font-size: var(--fs-small); color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: var(--fs-ui); font-weight: 560; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* legends and keys */
.legend { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--mark-off-fill); border: 2px solid var(--mark-off); }
.key-dot.accent { background: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ charts */
.chart { position: relative; margin-top: 24px; }
.chart svg { display: block; overflow: visible; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

.grid-line { stroke: var(--rule); stroke-width: 1; }
.base-line { stroke: var(--rule-strong); stroke-width: 1; }
.t-axis { fill: var(--muted); font-size: 11px; }
.t-value { fill: var(--muted); font-size: 12px; }
.dot-mean { fill: var(--accent); stroke: var(--sheet); stroke-width: 2; }
.dot-best { fill: var(--mark-off-fill); stroke: var(--mark-off); stroke-width: 2; }
.dot-hit { fill: transparent; }

/* ------------------------------------------------------------------ tasks */
.task-why { margin-top: 24px; max-width: 72ch; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); font-size: var(--fs-ui); }
.task-why b { color: var(--accent-ink); font-weight: 600; }
.task-list { margin-top: 40px; }
.task-group { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 36px 0 14px; border-bottom: 1px solid var(--rule-strong); font-weight: 640; font-size: 1.0625rem; }
.task-group:first-child { padding-top: 0; }
.task-group span { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.task-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 40px; align-items: center;
  padding: 26px 12px; margin: 0 -12px; width: calc(100% + 24px); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; color: inherit; text-decoration: none; text-align: left; cursor: pointer; transition: background-color 120ms;
}
.task-row:hover { background: var(--sheet); color: inherit; }
.task-row:hover .task-name { color: var(--link); }
.task-row:focus-visible { outline-offset: -2px; }
.task-main { display: grid; gap: 6px; min-width: 0; }
.task-name { font-weight: 620; font-size: 1.0625rem; color: var(--ink); }
.task-name small { margin-left: 10px; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.task-sum { font-size: var(--fs-ui); color: var(--ink-2); }
.task-scale { display: grid; gap: 8px; }
.scale-track { position: relative; height: 14px; }
.scale-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--rule); }
.scale-fill { position: absolute; left: 0; top: 6px; height: 2px; background: var(--accent); }
.scale-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.task-row:hover .scale-dot { box-shadow: 0 0 0 2px var(--sheet); }
.scale-meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.scale-meta b { color: var(--ink); font-weight: 620; }
.scale-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-foot { margin-top: 28px; }
@media (max-width: 720px) {
  .task-row { grid-template-columns: minmax(0, 1fr); }
  .task-name small { display: block; margin: 2px 0 0; }
}

/* ------------------------------------------------------------------ how it works */
.how { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 80px; align-items: start; padding-bottom: 144px; }
.rail { position: sticky; top: 96px; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.rail a {
  display: flex; gap: 10px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-size: var(--fs-ui); font-weight: 520;
}
.rail a span { font-variant-numeric: tabular-nums; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.rail a[aria-current="true"] span { color: var(--accent-ink); }
.how-step { padding-top: 8px; }
.how-step + .how-step { margin-top: 128px; }
.step-k { display: block; font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.how-step > h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; font-weight: 660; }
.how-step > p.lead { margin-top: 18px; max-width: 64ch; color: var(--ink-2); font-size: 1.0625rem; }
@media (max-width: 900px) {
  .how { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 96px; }
  .rail { display: none; }
  .how-step + .how-step { margin-top: 96px; }
}

/* domains walkthrough */
.domain-walk { margin-top: 36px; display: grid; }
.dw {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 0.85fr); gap: 8px 28px;
  padding: 34px 0; border-top: 1px solid var(--rule); scroll-margin-top: 88px;
}
.dw:last-child { border-bottom: 1px solid var(--rule); }
.dw svg { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: var(--accent-wash); fill: none; stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dw h3 { font-size: 1.1875rem; font-weight: 640; line-height: 1.3; }
.dw .dw-shapes { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-ui); }
.dw .dw-why { margin-top: 10px; font-size: var(--fs-ui); color: var(--muted); }
.dw .dw-why b { color: var(--ink-2); font-weight: 600; }
.dw-tasks { display: grid; gap: 4px; align-content: start; font-size: var(--fs-ui); }
.dw-tasks .lbl { font-size: var(--fs-small); color: var(--muted); margin-bottom: 4px; }
.dw-tasks a { text-decoration: none; padding: 3px 0; }
.dw-tasks a:hover { text-decoration: underline; }
.dw-tasks a small { color: var(--muted); margin-left: 6px; font-size: var(--fs-small); }
@media (max-width: 760px) {
  .dw { grid-template-columns: 40px minmax(0, 1fr); }
  .dw svg { width: 40px; height: 40px; padding: 8px; }
  .dw-tasks { grid-column: 2; margin-top: 8px; }
}

/* anatomy */
.shapes { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shape { padding: 28px 30px; }
.shape h3 { font-size: 1.0625rem; font-weight: 640; }
.shape p { margin-top: 10px; font-size: var(--fs-ui); color: var(--ink-2); }
.shape .ex { margin-top: 16px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 640px) { .shapes { grid-template-columns: minmax(0, 1fr); } }

.sub-h { margin-top: 72px; font-size: 1.1875rem; font-weight: 640; }
.sub-p { margin-top: 10px; max-width: 64ch; font-size: var(--fs-ui); color: var(--ink-2); }
.flow { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.node { position: relative; padding: 22px 22px 24px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--sheet); margin-right: 28px; }
.node:last-child { margin-right: 0; }
.node:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; width: 20px; height: 1.5px; background: var(--muted); }
.node:not(:last-child)::before {
  content: ""; position: absolute; right: -23px; top: calc(50% - 3px); width: 6px; height: 6px;
  border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg);
}
.node .node-k { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.node h3 { margin-top: 4px; font-size: 1rem; font-weight: 640; }
.node p { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.node.agent { border-style: dashed; }
.node.sealed { border-color: var(--accent); }
.node.sealed .node-k { color: var(--accent-ink); }
.node.out { background: var(--node-out); border-color: var(--node-out); }
.node.out h3 { color: #FFFFFF; }
.node.out p { color: var(--node-out-2); }
.node.out .node-k { color: var(--inv-k); }
.flow-key { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-small); color: var(--muted); }
.flow-key span { display: inline-flex; align-items: center; gap: 8px; }
.flow-key i { width: 18px; height: 12px; border-radius: 3px; border: 1.5px dashed var(--rule-strong); }
.flow-key i.sealed { border: 1.5px solid var(--accent); }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .node { margin-right: 0; }
  .node:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -24px; width: 1.5px; height: 20px; }
  .node:not(:last-child)::before { right: auto; left: 25.5px; top: auto; bottom: -22px; transform: rotate(135deg); }
}

/* web search */
.points { margin: 36px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.points li { padding: 28px 30px; }
.points h3 { font-size: 1rem; font-weight: 640; }
.points p { margin-top: 10px; font-size: var(--fs-ui); color: var(--ink-2); }
@media (max-width: 860px) { .points { grid-template-columns: minmax(0, 1fr); } }

/* scoring */
.scoring { margin-top: 36px; display: grid; gap: 24px; }
.score-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; padding: 32px; align-items: start; }
.score-step h3 { font-size: 1.0625rem; font-weight: 640; }
.score-step p { margin-top: 10px; font-size: var(--fs-ui); color: var(--ink-2); }
.formula { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--code-bg); font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.6; }
.formula .nw { white-space: nowrap; }
.wu-sec .formula { overflow-x: auto; } /* a long unbreakable term scrolls inside the box, not the page */
.ceil-card { padding: 32px; scroll-margin-top: 88px; }
.ceil-card h3 { font-size: 1.0625rem; font-weight: 640; }
.ceil-card > p { margin-top: 10px; max-width: 72ch; font-size: var(--fs-ui); color: var(--ink-2); }
.ceil-kinds { margin: 24px 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ceil-kinds li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 6px 32px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ceil-kinds h4 { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
.ceil-kinds h4 span { display: block; color: var(--muted); font-size: 0.6875rem; }
.ceil-kinds p { font-size: var(--fs-ui); color: var(--ink-2); }
.ceil-kinds .ck-tasks { margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.ceil-kinds .ck-tasks a { color: var(--muted); }
.ceil-kinds .ck-tasks a:hover { color: var(--link-hover); }
@media (max-width: 760px) { .ceil-card { padding: 20px; } .ceil-kinds li { grid-template-columns: minmax(0, 1fr); } }
.dim { position: relative; margin: 22px 6px 4px; height: 78px; }
.dim-line { position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: var(--ink); }
.dim-arrow { position: absolute; top: 40px; width: 0; height: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.dim-arrow.l { left: 0; border-right: 9px solid var(--ink); }
.dim-arrow.r { right: 0; border-left: 9px solid var(--ink); }
.dim-end { position: absolute; top: 36px; width: 1px; height: 17px; background: var(--ink); }
.dim-tick { position: absolute; top: 30px; width: 2px; height: 28px; margin-left: -1px; background: var(--accent); }
.dim-lab { position: absolute; font-size: 0.75rem; color: var(--muted); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.dim-lab.top { top: 0; }
.dim-lab.mid { top: 12px; }
.dim-lab.bot { top: 60px; }
.dim-lab.first { transform: none; }
.dim-lab.last { transform: translateX(-100%); }
.dim-lab.acc { color: var(--accent-ink); font-weight: 640; }
.score-step .dim-note { margin-top: 0; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 760px) { .score-step { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* review layers */
.layers { margin: 36px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: layer; }
.layers li { padding: 28px 30px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.layers li::before {
  counter-increment: layer; content: counter(layer);
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 650;
}
.layers h3 { font-size: 1rem; font-weight: 640; }
.layers p { margin-top: 8px; font-size: var(--fs-ui); color: var(--ink-2); }
@media (max-width: 640px) { .layers { grid-template-columns: minmax(0, 1fr); } }

.next-step { margin-top: 96px; padding: 36px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.next-step h2 { font-size: 1.375rem; font-weight: 660; }
.next-step p { margin-top: 4px; color: var(--ink-2); }

/* ------------------------------------------------------------------ task write-ups (tasks/<id>.html) */
.wu-head { padding-block: 56px 48px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-small); color: var(--muted); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.wu-head h1 { margin-top: 18px; font-size: clamp(2.25rem, 4.6vw, 3.25rem); line-height: 1.08; font-weight: 680; }
.wu-lede { margin-top: 22px; max-width: 62ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.wu-facts { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-ui); color: var(--ink-2); }
.wu-facts span + span::before { content: "·"; margin: 0 10px; color: var(--muted); }
.wu-tags { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wu-tags li { padding: 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.75rem; font-weight: 540; color: var(--muted); }

.wu { --wu-block: 820px; border-top: 1px solid var(--rule); padding-top: 64px; }  /* one right edge for prose, tables, lists and figures; results and artifact viewers span the column */
.wu-article { min-width: 0; }
.wu-sec + .wu-sec { margin-top: 112px; }
.wu-sec h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.2; font-weight: 660; }
.wu-sec h3 { margin-top: 40px; font-size: 1.0625rem; font-weight: 640; }
.wu-sec p { margin-top: 18px; max-width: var(--wu-block); color: var(--ink-2); }
.wu-sec h3 + p { margin-top: 12px; }
.wu-sec b { color: var(--ink); font-weight: 620; }
.wu-sec code { font-size: 0.875em; padding: 1px 5px; border-radius: 4px; background: var(--code-bg); color: var(--ink); overflow-wrap: anywhere; }
.wu-list { margin: 18px 0 0; padding-left: 22px; max-width: var(--wu-block); color: var(--ink-2); }
.wu-list li + li { margin-top: 10px; }
.wu-list li::marker { color: var(--muted); }
.wu-list ul { margin: 6px 0 0; padding-left: 20px; }
.wu-refs { margin: 18px 0 0; padding: 0; list-style: none; max-width: var(--wu-block); }
.wu-refs li { padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--fs-ui); }
.wu-refs li:last-child { border-bottom: 1px solid var(--rule); }
.wu-sec .formula { margin-top: 20px; max-width: var(--wu-block); }
.wu-sec p.wu-status { margin-top: 18px; padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--accent-wash); font-size: var(--fs-ui); }
.wu-sec .table-scroll { margin-top: 22px; }  /* no cap here: the results card's table must fill the card; .wu-table caps itself */

.wu-table { width: 100%; max-width: var(--wu-block); border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.wu-table caption { caption-side: top; text-align: left; padding-bottom: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.wu-table th, .wu-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.wu-table thead th { font-size: var(--fs-small); font-weight: 560; color: var(--muted); border-bottom-color: var(--rule-strong); white-space: nowrap; }
.wu-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.wu-table td { color: var(--ink-2); }
.wu-table .r { text-align: right; padding-right: 20px; white-space: nowrap; }
.wu-table.anchors { max-width: var(--wu-block); }
.wu-table.anchors td:last-child { min-width: 16rem; }
.wu-table.anchors tbody th { padding-left: 12px; }
@media (max-width: 560px) {
  .wu-table { font-size: 0.875rem; }
  .wu-table tbody th { white-space: normal; }
  .wu-table .r { padding-right: 12px; }
  .wu-table.anchors td:last-child { min-width: 0; }
}

.wu-kv { margin: 20px 0 0; max-width: var(--wu-block); }
.wu-kv > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; border-top: 1px solid var(--rule); }
.wu-kv > div:last-child { border-bottom: 1px solid var(--rule); }
.wu-kv dt { font-size: var(--fs-ui); color: var(--muted); }
.wu-kv dd { margin: 0; font-size: var(--fs-ui); color: var(--ink); }
@media (max-width: 560px) { .wu-kv > div { grid-template-columns: minmax(0, 1fr); } }

.wu-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wu-results { margin-top: 28px; padding: 18px 24px 18px; }
.wu-results .res-table td small { margin-left: 8px; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.wu-graded { margin-top: 12px; }
.wu-results-foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font-size: var(--fs-ui); }
@media (max-width: 640px) {
  .wu-results { padding: 14px 14px 16px; }
  .wu-results .res-table .c-raw, .wu-results .res-table td small { display: none; }
}

/* The link into the trajectory viewer, under the results. */
.wu-traj { margin-top: 28px; padding: 24px 24px 26px; }
.wu-sec .wu-traj p { margin-top: 0; }
.wu-sec .wu-traj .wu-traj-links { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
@media (max-width: 640px) { .wu-traj { padding: 14px 14px 16px; } }

/* The task's Artifacts page in a frame (app.js initArtFrame), as tall as the framed page reports. */
.wu-art-frame { display: block; width: 100%; height: 720px; margin-top: 28px; border: 0; background: transparent; }
.wu-sec .wu-art-links { margin-top: 12px; font-size: var(--fs-ui); }

.wu-foot { margin-top: 112px; padding-top: 32px; border-top: 1px solid var(--rule); }
.wu-foot .note { max-width: 72ch; }
.wu-pager { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wu-pager a {
  display: grid; gap: 4px; padding: 22px 26px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet);
  color: var(--ink); font-weight: 620; text-decoration: none; transition: border-color 140ms;
}
.wu-pager a:hover { border-color: var(--accent); color: var(--ink); }
.wu-pager small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.wu-pager .prev small::before { content: "← "; }
.wu-pager .next { grid-column: 2; text-align: right; }
.wu-pager .next small::after { content: " →"; }
@media (max-width: 560px) { .wu-pager { grid-template-columns: minmax(0, 1fr); } .wu-pager .next { grid-column: 1; } }
@media (max-width: 900px) { .wu { padding-top: 48px; } }


/* ------------------------------------------------------------------ contribute */
.contrib { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .contrib { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.criteria { margin: 0; padding: 0; list-style: none; }
.criteria li { position: relative; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--rule); }
.criteria li:first-child { border-top: 1px solid var(--rule); }
.criteria li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-wash); }
.criteria li::after {
  content: ""; position: absolute; left: 10px; top: 23px; width: 5px; height: 10px;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(45deg);
}
.criteria b { display: block; font-weight: 620; }
.criteria span { display: block; margin-top: 2px; font-size: var(--fs-ui); color: var(--ink-2); }
.contrib .actions { margin-top: 28px; }
.bounty { padding: 32px; background: linear-gradient(155deg, var(--bounty-from) 0%, var(--bounty-to) 100%); border: 0; color: #FFFFFF; }
.bounty-k { font-size: 0.875rem; font-weight: 560; color: var(--inv-k); }
.bounty-v { display: block; margin-top: 4px; font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bounty p { margin-top: 12px; color: var(--bounty-2); font-size: var(--fs-ui); }
.process { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: proc; }
.process li { padding: 20px 22px; }
.process li::before { counter-increment: proc; content: "Step " counter(proc); display: block; font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); margin-bottom: 6px; }
.process h3 { font-size: 1rem; font-weight: 640; }
.process p { margin-top: 4px; font-size: var(--fs-ui); color: var(--ink-2); }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .process { grid-template-columns: minmax(0, 1fr); } }
/* The proposal form: square ledger fields, two to a row on wide screens, beside the $5,000 card (above it on a phone). */
@media (max-width: 860px) { .propose-wrap .bounty { order: -1; } }
.propose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; }
.propose .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .propose { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 10px; align-content: start; }
.field label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.field .req { color: var(--accent-ink); }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--accent); }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-radius: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.propose-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.propose-status { font-size: var(--fs-ui); color: var(--muted); }
.propose-status[data-kind="error"] { color: var(--accent-ink); }
.propose-done { padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); outline: none; }
.propose-done h2 { font-size: 1rem; font-weight: 500; }
.propose-done p { margin-top: 6px; font-size: var(--fs-ui); color: var(--ink-2); }

.code { position: relative; margin-top: 16px; border-radius: var(--radius-sm); background: var(--code-bg); border: 1px solid var(--rule); }
.code pre { margin: 0; padding: 18px 20px; padding-right: 84px; overflow-x: auto; font-size: 0.84375rem; line-height: 1.7; color: var(--ink); }
.copy-btn {
  position: absolute; top: 10px; right: 10px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--rule-strong);
  background: var(--sheet); color: var(--ink-2); font-size: 0.8125rem; font-weight: 560; cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--sheet); padding-top: 64px; padding-bottom: max(56px, env(safe-area-inset-bottom, 0px)); font-size: 0.875rem; color: var(--muted); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--link); text-decoration: underline; }
.footer-meta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.footer-meta a { color: var(--ink-2); }
.footer-meta .credits { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.canary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.canary code { font-size: 0.78125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.canary button { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ results table (task pages) */
.dlg-section-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 0.875rem; font-weight: 620; }
.res-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.res-table th { text-align: left; padding: 12px 10px; font-weight: 560; color: var(--muted); font-size: var(--fs-small); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.res-table td { padding: 12px 10px; border-bottom: 1px solid var(--rule); }
.res-table .r { text-align: right; }
.res-table tr.top td { font-weight: 640; }

/* ------------------------------------------------------------------ tooltip and toast */
.tip {
  position: fixed; z-index: 60; pointer-events: none; min-width: 160px; max-width: 280px;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--tip-bg); color: var(--tip-fg);
  font-size: var(--fs-small); line-height: 1.45; box-shadow: 0 8px 24px rgba(11, 12, 14, 0.25);
}
.tip .tt { font-weight: 640; margin-bottom: 4px; }
.tip .tr { display: flex; justify-content: space-between; gap: 16px; }
.tip .tk { display: inline-flex; align-items: center; gap: 6px; }
.tip .tk i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.tip .tk i.off { border: 2px solid var(--tip-muted); }
.tip .tk i.web, .tip .tk i.mean { background: var(--tip-web); }
.tip .tk i.best { border: 2px solid var(--tip-muted); }
.tip .tk i.avg { width: 12px; height: 0; border-radius: 0; border-top: 2px dashed var(--tip-fg); }
.tip .tsub { margin-top: 4px; color: var(--tip-muted); }
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--tip-bg); color: var(--tip-fg); font-size: 0.875rem; font-weight: 560;
  box-shadow: 0 8px 24px rgba(11, 12, 14, 0.25);
}


/* ================================================================== the ledger: how each component takes the type and rules */
/* Small labels are uppercase, letter-spaced mono; headings sit at weight 500; nothing is rounded; marks are indigo. */
:focus-visible { border-radius: 0; }
body { font-size: 0.9375rem; }

/* header */
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--ink); }
.site-header .wrap { height: 64px; gap: 32px; }
@media (max-width: 1100px) { .site-header .wrap { height: auto; gap: 0 12px; } }
.brand { font-weight: 600; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.brand-home { gap: 8px; }
.brand svg { width: 18px; height: 18px; }
.brand-sub { margin-left: 26px; }
@media (max-width: 520px) { .brand { font-size: 0.875rem; letter-spacing: 0.02em; } }
.nav a { padding: 8px 10px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--muted); }
.nav a:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { display: none; }
.icon-btn { border-radius: 0; }

/* buttons and controls */
.btn { min-height: 40px; padding: 8px 18px; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--ink); }
.btn-sm { min-height: 36px; padding: 6px 14px; }
.btn-primary { border-color: var(--btn); }
.btn-primary:hover { border-color: var(--btn-hover); }
.btn-secondary { background: transparent; border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg { border-radius: 0; padding: 0; gap: 0; background: transparent; border: 1px solid var(--ink); }
.seg button { border-radius: 0; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; padding: 9px 14px; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.select { border-radius: 0; border-color: var(--ink); background-color: transparent; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; min-height: 40px; }
.pill { border-radius: 0; border-color: var(--ink); background: transparent; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; min-height: 38px; padding: 8px 14px; color: var(--ink); }
.pill:hover { background: var(--hover); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill[aria-pressed="true"] .count { color: var(--bg); opacity: 0.7; }
.chip-demo { border-radius: 0; background: transparent; border: 1px dashed var(--accent); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.copy-btn { border-radius: 0; border-color: var(--ink); background: transparent; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
.copy-btn:hover { background: var(--ink); color: var(--bg); }

/* page scaffolding */
.page-head { padding-block: 80px 44px; margin-bottom: 56px; border-bottom: 1px solid var(--ink); }
@media (max-width: 720px) { .page-head { padding-block: 48px 32px; margin-bottom: 40px; } }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
.page-head p { margin-top: 20px; font-size: 1rem; line-height: 1.7; }
/* The selected task on an Artifacts page, under the selector: its name, what the viewer shows, its task page link. */
.art-intro { padding-top: 44px; margin-bottom: 36px; border-top: 1px solid var(--rule); }
.art-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.art-intro p { margin-top: 16px; font-size: 1rem; line-height: 1.7; }
.section { padding-top: 104px; }
@media (max-width: 720px) { .section { padding-top: 72px; } }
.section-head { max-width: none; margin-bottom: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px 64px; align-items: start; }
.section-head h2, .cov-head h3, .sub-h, .card-title, .sx-why-title, .dlg-section-title, .task-group { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--ink); line-height: 1.5; }
.section-head h2::before, .cov-head h3::before, .sub-h::before, .task-group::before { content: "§ "; color: var(--brand); }
.section-head p { margin: 0; font-size: var(--fs-ui); color: var(--muted); line-height: 1.65; }
@media (max-width: 720px) { .section-head { grid-template-columns: minmax(0, 1fr); } }
.card { border: 1px solid var(--rule); border-radius: 0; background: transparent; }
.lb-card, .an-card, .wu-results, .next-step { border: 0; border-top: 1px solid var(--ink); padding-inline: 0; }
.cov-head { margin-top: 80px; }
.cov-head p { margin-top: 12px; font-size: var(--fs-ui); color: var(--muted); }
.note { font-size: var(--fs-small); }
.toolbar { margin-bottom: 20px; }

/* grids of tiles share their hairlines */
.shapes, .points, .layers, .process, .sm-grid, .wu-pager { gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
.shape, .points li, .layers li, .process li, .sm-card, .wu-pager a { border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
.wu-pager a:hover, .sm-card:hover { background: var(--hover); border-color: var(--rule); }
.shape h3, .points h3, .layers h3, .process h3, .node h3, .score-step h3, .ceil-card h3 { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }
.process li::before, .node .node-k, .bounty-k, .crumbs, .wu-facts, .wu-tags li, .cutoffs li, .sm-foot, .dw-tasks .lbl, .flow-key, .dim-lab, .rail a { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sm-card.on { border-color: var(--rule); box-shadow: inset 0 0 0 1px var(--accent); }

/* leaderboards and the coverage grid */
.lb th, .res-table th, .wu-table thead th, .wu-table caption { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--ink); }
.lb th { padding: 14px 10px 10px; border-bottom: 1px solid var(--ink); }
.lb td { padding: 16px 10px; }
.model-name { font-weight: 500; }
.model-meta { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.c-rank { font-size: 0.8125rem; color: var(--ink); }
.c-elo, .c-score b { font-weight: 500; }
.bar-fill { height: 10px; top: 5px; border-radius: 0; }
.whisker { --off-bar: var(--ink); }
.leaders-foot, .wu-results-foot { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }
.leaders-foot .more { font-size: inherit; }
.key-dot, .tip .tk i, .scale-dot, .dom-bar, .dom-bar > div { border-radius: 0; }
.scale-dot { width: 8px; height: 8px; top: 3px; margin-left: -4px; }
.scale-track::before { border-radius: 0; }
.lb tr.detail td { border-radius: 0; }
.detail-grid { padding-inline: 0; }

/* tasks */
.task-why { border-radius: 0; background: transparent; border-left-color: var(--accent); padding-block: 4px; }
.task-group { padding-top: 64px; border-bottom-color: var(--ink); justify-content: flex-start; }
.task-group::before { margin-right: 8px; }
.task-group span { margin-left: auto; }
.task-group span { font-size: 0.6875rem; letter-spacing: 0.06em; }
.task-row:hover { background: var(--hover); }
.task-name { font-weight: 500; font-size: 1rem; }

/* how it works and the write-ups */
.rail a { color: var(--muted); }
.rail a[aria-current="true"] { color: var(--ink); }
.step-k { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; }
.step-k::before { content: "§ "; color: var(--brand); }
.how-step > h2, .wu-sec h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; font-weight: 500; }
.how-step > p.lead { font-size: 1rem; }
.dw svg { border-radius: 0; background: transparent; padding: 0; width: 32px; height: 32px; color: var(--accent); }
.dw h3 { font-size: 1rem; font-weight: 500; }
.node { border-radius: 0; }
.node.out { background: var(--node-out); border-color: var(--node-out); }
.node.out h3 { color: var(--bg); }
.flow-key i { border-radius: 0; }
.formula { border-radius: 0; border: 1px solid var(--rule); background: var(--code-bg); }
.score-step, .ceil-card { border-radius: 0; }
.layers li::before { border-radius: 0; background: var(--ink); color: var(--bg); font-weight: 500; }
.cutoffs li::before { border-radius: 0; }
.next-step { padding-inline: 0; margin-top: 112px; }
.next-step h2 { font-size: 1.25rem; font-weight: 500; }
.wu-head { padding-block: 80px 48px; border-bottom: 1px solid var(--ink); }
.wu-head h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
.wu-lede { font-size: 1rem; }
.wu-tags li { border-radius: 0; border-color: var(--rule); color: var(--ink-2); }
.wu { border-top: 0; }
.wu-sec h3 { font-weight: 500; }
.wu-sec b { font-weight: 500; }
.wu-sec code { border-radius: 0; }
.wu-sec p.wu-status { border-radius: 0; background: transparent; padding-block: 4px; }
.wu-table.anchors tr.ref th { box-shadow: inset 2px 0 0 var(--accent); }
.wu-pager a { font-weight: 500; }
.wu-results { padding: 24px 0; }

/* contribute */
.criteria li::before { border-radius: 0; }
.criteria b { font-weight: 500; }
.bounty { color: var(--bg); background: var(--ink); padding: 36px; }
.bounty-v { font-weight: 500; letter-spacing: -0.03em; }
.bounty p { color: var(--bounty-2); }
.process li::before { color: var(--accent-ink); font-weight: 500; }
.code { border-radius: 0; border-color: var(--ink); }

/* the Artifacts chips, the trajectory viewer's task list and the task visualizations' field labels */
.art-tabs a { border-radius: 0; border-color: var(--ink); background: transparent; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--ink); }
.art-tabs a:hover { background: var(--hover); border-color: var(--ink); }
.art-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.art-group-name, .tj-tgroup, .cad-field-k, .ac-field-k, .bf-field-k, .dh-field-k, .s2-field-k, .cc-k, .pl-field label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--muted); }

/* footer, tooltip and toast */
.site-footer { border-top: 1px solid var(--ink); background: var(--bg); }
.footer-nav a, .canary, .credits, .canary button { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.canary code { text-transform: none; letter-spacing: 0; }
.tip, .toast { border-radius: 0; box-shadow: none; border: 1px solid var(--tip-bg); }

/* ------------------------------------------------------------------ not found (404.html; served for any missing path) */
.nf-head { position: relative; padding-block: 112px 44px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.nf-mark { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.nf-head h1 { margin-top: 14px; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
.nf-lede { margin-top: 16px; max-width: 56ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.nf-lede code { font-size: 0.9em; color: var(--ink); overflow-wrap: anywhere; }
.nf-gear { position: absolute; right: -40px; top: 50%; width: 260px; height: 260px; margin-top: -130px; color: var(--ink); opacity: 0.07; pointer-events: none; }
.nf-gear svg { width: 100%; height: 100%; animation: nf-turn 90s linear infinite; }
@keyframes nf-turn { to { transform: rotate(360deg); } }
.nf-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 56px; padding-block: 56px 96px; }
.nf-col .sub-h { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nf-list { margin-top: 10px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.nf-list li { border-bottom: 1px solid var(--rule); }
.nf-list a { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; text-decoration: none; color: var(--ink); }
.nf-list a::after { content: "→"; color: var(--muted); }
.nf-list a:hover b, .nf-list a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.nf-list b { font-weight: 600; }
.nf-list span { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 640px) { .nf-list a { grid-template-columns: minmax(0, 1fr) auto; } .nf-list span { grid-column: 1 / -1; } .nf-gear { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ task pages: failure analysis */
.fa-fig { margin: 32px 0 0; max-width: var(--wu-block); }
.fa-chart { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px 36px; align-items: center; }
.fa-donut { display: block; width: 200px; height: 200px; overflow: visible; }
.fa-donut path { stroke: var(--sheet); stroke-width: 2; stroke-linejoin: round; }
.fa-donut path:hover { opacity: 0.82; }
.fa-c-v { font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; fill: var(--ink); }
.fa-c-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; fill: var(--muted); }
.fa-s1 { fill: var(--fa-1); background: var(--fa-1); }
.fa-s2 { fill: var(--fa-2); background: var(--fa-2); }
.fa-s3 { fill: var(--fa-3); background: var(--fa-3); }
.fa-s4 { fill: var(--fa-4); background: var(--fa-4); }
.fa-s5 { fill: var(--fa-5); background: var(--fa-5); }
.fa-s6 { fill: var(--fa-6); background: var(--fa-6); }
.fa-out { fill: var(--fa-out); background: var(--fa-out); }
.fa-kept { fill: var(--fa-kept); background: var(--fa-kept); }
.fa-legend { margin: 0; padding: 0; list-style: none; font-size: var(--fs-ui); }
.fa-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); }
.fa-legend li:last-child { border-bottom: 1px solid var(--rule); }
.fa-legend .fa-sw { width: 10px; height: 10px; align-self: start; margin-top: 6px; }
.fa-legend .fa-kept { box-shadow: inset 0 0 0 1px var(--muted); }
.fa-lab { color: var(--ink); line-height: 1.45; }
.fa-lab small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.fa-legend b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.fa-legend .fa-kept-row .fa-lab, .fa-legend .fa-kept-row b { color: var(--muted); }
.fa-fig figcaption { margin-top: 14px; max-width: var(--wu-block); font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 640px) {
  .fa-chart { grid-template-columns: minmax(0, 1fr); }
  .fa-donut { width: 180px; height: 180px; margin-inline: auto; }
}
.fa-ex { margin-top: 20px; padding: 24px 0 4px; border-top: 1px solid var(--ink); max-width: var(--wu-block); }
.wu-sec .fa-ex p { margin-top: 0; }
.wu-sec .fa-ex .fa-ex-kicker { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.wu-sec .fa-ex .fa-ex-title { margin-top: 8px; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.fa-ex-dl { margin: 16px 0 0; }
.fa-ex-dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; border-top: 1px solid var(--rule); }
.fa-ex-dl dt { font-size: var(--fs-ui); color: var(--muted); }
.fa-ex-dl dd { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); min-width: 0; }
.fa-quotes { margin: 0; padding: 0; list-style: none; }
.fa-quotes li + li { margin-top: 12px; }
.fa-quotes a { margin-right: 8px; white-space: nowrap; }
.fa-quotes q { color: var(--ink-2); font-family: var(--font-mono); overflow-wrap: anywhere; }
@media (max-width: 560px) { .fa-ex-dl > div { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------------ framed artifacts page
   A task page frames its Artifacts page with ?embed=1 (app.js initEmbed), simplified: no site chrome, task selector or
   heads, one bar (the model, Median | Best, the attempt shown), the frame's full width, and fixed viewer heights,
   since the frame grows with the content and svh units would follow it. Each viewer hides its own pickers. */
.embed body::before, .embed .site-header, .embed .site-footer, .embed .art-tabs, .embed .page-head, .embed .art-intro { display: none; }
.embed .wrap { max-width: none; padding-left: 2px; padding-right: 2px; }
.embed .page-end { padding-bottom: 4px; }
.embed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; font-size: var(--fs-ui); }
.embed-model { font-weight: 620; color: var(--ink); }
.embed-att { color: var(--muted); font-variant-numeric: tabular-nums; }
.embed-traj { margin-left: auto; }
.embed .cad-cmp { --cad-vp-h: 560px; }
.embed .ac { --ac-vp-h: 520px; }
.embed .cc { --cc-vp-h: 560px; }
.embed .lc-list { max-height: 640px; }
/* ------------------------------------------------------------------ home: facts, score and compute, download */
/* The benchmark in four numbers under the lede, then what an attempt is and who built the tasks. */
.hero-facts { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, auto) minmax(0, 21ch); justify-content: start; }
.hero-facts li { padding: 2px 24px; border-left: 1px solid var(--rule); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts b { display: block; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.hero-facts small { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }
@media (max-width: 520px) {
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .hero-facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.hero-note { margin-top: 20px; max-width: 56ch; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.hero-built { padding-left: 10px; border-left: 2px solid var(--accent); color: var(--ink-2); }
.hero .actions-ext { margin-top: 12px; }
.eff-card { padding: 20px 16px 20px; }
.eff-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.eff-panel { margin: 0; min-width: 0; }
.eff-panel figcaption { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.eff-chart { min-width: 0; }
.eff-tick { stroke: var(--rule-strong); stroke-width: 1; }
.eff-leader { stroke: var(--muted); stroke-width: 0.75; }
.eff-dot { fill: var(--muted); stroke: var(--sheet); stroke-width: 1.5; }
.eff-front { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.55; stroke-linejoin: round; }
.eff-key { font-size: 0.6875rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.eff-key i { display: inline-block; width: 64px; height: 8px; margin: 0 5px; border-radius: 1px; background: linear-gradient(to right in oklab, var(--eff-lo) 35%, var(--eff-hi)); }  /* app.js effKey draws the eased stops */
.eff-lab { fill: var(--muted); font-size: 11px; }
.eff-lab.on { fill: var(--ink); font-weight: 600; }
.eff-pt { cursor: default; outline: none; }
.eff-pt:focus-visible .eff-dot { stroke: var(--ink); stroke-width: 2; }
.eff-note { margin-top: 12px; }
.eff-note .nowrap { white-space: nowrap; }
.dl-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
/* The step name sits in a narrow column just wide enough for the longest one, so it stays beside its text; the text
   and the command block run to the right edge of the rules, so the rows leave no empty band on the right. */
.dl-steps > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px 40px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.dl-steps h3 { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }
.dl-steps p { font-size: var(--fs-ui); color: var(--ink-2); }
.dl-steps p + p, .dl-steps .code + p { margin-top: 10px; }
.dl-steps .note { color: var(--muted); font-size: var(--fs-small); }
.dl-steps .actions { margin-top: 14px; gap: 8px; }
.dl-steps .code { margin-top: 12px; }
.dl-steps .code pre { font-size: 0.78125rem; line-height: 1.65; padding: 14px 16px; padding-right: 84px; }
@media (max-width: 720px) { .dl-steps > li { grid-template-columns: minmax(0, 1fr); } }
/* Home prose: a lead sentence in the reading face at ink, then the details as labelled points across the full width,
   so no intro is a long grey block in half the page. */
.hero-built { font-family: var(--font-text); font-size: 0.875rem; }
.home-head { display: block; max-width: none; margin-bottom: 36px; }
.home-head .head-lead, .cov-head .head-lead { margin-top: 14px; max-width: 64ch; font-family: var(--font-text); font-size: 1.25rem; line-height: 1.45; color: var(--ink); }
.cov-head { max-width: none; }
.cov-head .head-lead { font-size: 1.125rem; }
.head-points { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 56px; }
.head-points li { padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.head-points b { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
.grader-tasks { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
.grader-tasks a { color: var(--ink-2); }
@media (max-width: 860px) { .head-points { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.dl-steps p, .eff-note { font-family: var(--font-text); }
.dl-steps p { font-size: 0.9375rem; }
.dl-steps .note, .eff-note { font-size: 0.8125rem; }
/* An ink rule across the page opens Get started, after the results; its steps below the intro keep hairlines. */
.home-band { margin-top: 112px; border-top: 1px solid var(--ink); }
.home-band .dl-steps { margin-top: 40px; border-top-color: var(--rule); }
@media (max-width: 720px) { .home-band { margin-top: 72px; } }
/* The Leaderboard section sits right under the hero, so on a wide screen it is opaque and slides over the fixed gear
   drawing, which fades out as it arrives (drawGears). */
#leaderboard { background: var(--bg); }
/* The home example under Score and compute: one Drawing to CAD attempt's parts on the drawings it developed on and on
   hidden ones, rendered from the Artifacts viewer once per theme (assets/example/, scripts/home_example.py); the swatches
   are cadview.css's diff colors. */
.ow-fig { margin: 0; }
.ow-row + .ow-row { margin-top: 28px; }
.ow-row-k { display: block; margin-bottom: 6px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
.ow-row img { display: block; width: 100%; height: auto; }
.ow-fig .on-dark { display: none; }
.ow-fig figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-family: var(--font-text); font-size: 0.8125rem; color: var(--muted); }
.ow-fig figcaption .more { margin-left: auto; font-family: var(--font-mono); color: var(--ink); }
.ow-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: #D23A2C; }
.ow-key i.mis { background: #2F68D0; }
:root[data-theme="dark"] .ow-fig .on-dark { display: block; }
:root[data-theme="dark"] .ow-fig .on-light { display: none; }
:root[data-theme="dark"] .ow-key i { background: #E8503F; }
:root[data-theme="dark"] .ow-key i.mis { background: #4A86E8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ow-fig .on-dark { display: block; }
  :root:not([data-theme="light"]) .ow-fig .on-light { display: none; }
  :root:not([data-theme="light"]) .ow-key i { background: #E8503F; }
  :root:not([data-theme="light"]) .ow-key i.mis { background: #4A86E8; }
}
@media (max-width: 560px) { .ow-fig figcaption .more { margin-left: 0; } }

/* Not in yet (2026-11-11): attempts still running or waiting for their final grade. A leaderboard row names how many
   are in, and the board adds a note. */
.model-pending { font-size: 0.6875rem; line-height: 1.3; color: var(--accent-ink); margin-top: 2px; }
.lb-pending { margin: 10px 4px 2px; }
.art-pending { margin-top: 6px; }
.art-pending b { color: var(--accent-ink); font-weight: 600; }