:root {
  --navy-950: #0e1d2c;
  --navy-900: #13283c;
  --navy-800: #1b3852;
  --ink: #14283b;
  --muted: #64788b;
  --faint: #8ea1b2;
  --paper: #f6f9fc;
  --panel: #ffffff;
  --soft: #edf3f8;
  --line: #cbd8e4;
  --line-strong: #aebfd0;
  --cobalt: #2167cf;
  --cobalt-dark: #164eaa;
  --cobalt-soft: #eaf2ff;
  --teal: #27776e;
  --teal-soft: #e8f4f1;
  --warning: #8c6119;
  --warning-soft: #fff6df;
  --danger: #9a4147;
  --danger-soft: #fff0f1;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 8px 28px rgba(22, 50, 77, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(33, 103, 207, .35); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 50; min-height: 64px; padding: 0 clamp(18px, 4vw, 56px); display: flex; align-items: stretch; gap: 28px; color: #eff5fb; background: var(--navy-950); border-bottom: 1px solid #29435c; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; color: #f8fbff; text-decoration: none; font: 600 16px/1 var(--sans); letter-spacing: .01em; }
.brand-slash { color: #71a5f1; }
.brand-mark { width: 23px; height: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transform: skew(-7deg); }
.brand-mark i { align-self: end; background: #5f9af2; border-radius: 1px 1px 0 0; }
.brand-mark i:nth-child(1) { height: 62%; }.brand-mark i:nth-child(2) { height: 100%; }.brand-mark i:nth-child(3) { height: 78%; }
.site-header nav { display: flex; align-self: stretch; align-items: stretch; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.site-header nav::-webkit-scrollbar { display: none; }
.nav-link { position: relative; min-width: 76px; padding: 0 12px; display: grid; place-items: center; color: #9bb0c3; text-decoration: none; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.nav-link::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; content: ""; background: transparent; }
.nav-link:hover, .nav-link.active { color: #fff; }.nav-link.active::after { background: #68a1f3; }
.header-status { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #b7c8d8; font: 11px var(--mono); white-space: nowrap; }
.status-label { color: #89c8b8; font-size: 10px; letter-spacing: .08em; }.status-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #61b39b; box-shadow: 0 0 0 4px rgba(97,179,155,.12); }

.experiment { max-width: 1720px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 40px) 32px; scroll-margin-top: 64px; }
.experiment-heading { min-height: 170px; padding: 19px 0 15px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 56px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; color: var(--cobalt); font: 500 11px var(--mono); letter-spacing: .08em; }.eyebrow span { padding: 4px 7px; border: 1px solid currentColor; }.eyebrow b { color: var(--faint); font-weight: 400; }
h1, h2 { margin: 0; color: var(--navy-950); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
h1 { font-size: clamp(36px, 4.2vw, 58px); }.prompt-text { position: relative; max-width: 760px; margin: 18px 0 0; padding-left: 14px; color: var(--navy-800); border-left: 3px solid var(--cobalt); font: 500 17px/1.55 var(--sans); letter-spacing: -.012em; }.prompt-text::before { display: block; margin-bottom: 5px; color: var(--cobalt); content: "JUDGING BRIEF"; font: 600 10px var(--mono); letter-spacing: .09em; }
.experiment-facts { display: grid; grid-template-columns: repeat(3, 1fr); align-content: end; border-left: 1px solid var(--line); }.fact { min-height: 60px; padding: 0 16px 8px; display: grid; align-content: end; gap: 4px; border-right: 1px solid var(--line); }.fact:first-child { padding-left: 20px; }.fact:last-child { padding-top: 0; border-right: 0; border-bottom: 0; }.fact > span { color: var(--faint); font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.fact strong { display: flex; align-items: center; gap: 8px; color: var(--navy-800); font: 500 12px var(--mono); white-space: nowrap; }.progress-track { height: 5px; margin-top: 2px; overflow: hidden; background: #dce7f1; border-radius: 99px; }.progress-track i { display: block; width: 2%; height: 100%; background: var(--cobalt); border-radius: inherit; transition: width .2s ease; }
.mobile-benchmark-details { display: none; }
.experiment-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 6px 0 8px; }.experiment-tools details { min-width: 0; border: 1px solid var(--line); background: var(--panel); }.experiment-tools summary { min-height: 30px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--navy-800); cursor: pointer; font: 500 11px var(--mono); list-style: none; }.experiment-tools summary::-webkit-details-marker { display: none; }.experiment-tools summary > span { margin-left: auto; color: var(--muted); font-weight: 400; }.experiment-tools summary > span + b, .voting-guide summary > span { color: var(--cobalt); font-size: 16px; font-weight: 400; }.experiment-tools details[open] summary { border-bottom: 1px solid var(--line); }.voting-guide { flex: 1 1 auto; }.match-settings { position: relative; align-self: flex-start; flex: 0 0 auto; min-width: 280px; z-index: 5; }.match-settings[open] .filters { position: absolute; top: calc(100% + 8px); right: 0; }
.voting-guide-content { padding: 15px 17px 17px; }.voting-guide-content p { margin: 0 0 13px; color: var(--muted); font-size: 14px; }.judging-criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.judging-criteria div { display: grid; gap: 4px; padding-left: 11px; border-left: 2px solid var(--cobalt); }.judging-criteria strong { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }.judging-criteria span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.filters { display: flex; gap: 9px; padding: 13px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }.filters label, .ranking-filters label:not(.search-box) { display: grid; gap: 5px; min-width: 130px; color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.filters select, .ranking-filters select { width: 100%; height: 38px; padding: 0 30px 0 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; font: 11px var(--mono); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 16px, calc(100% - 10px) 16px; background-size: 4px 4px; background-repeat: no-repeat; }.filters select:focus, .ranking-filters select:focus { border-color: var(--cobalt); }
.comparison-intro { padding: 6px 0 5px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }.section-kicker { display: block; margin-bottom: 5px; color: var(--cobalt); font: 500 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.comparison-intro h2 { font-size: clamp(23px, 2.2vw, 31px); }.comparison-intro p { max-width: 500px; margin: 0 0 2px; color: var(--muted); font-size: 13px; }.blind-pill { margin: 0 0 0 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }.candidate { min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(22,50,77,.03); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }.candidate:hover { border-color: #83a8d1; box-shadow: var(--shadow); }.candidate.selected { border: 2px solid var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }.candidate.not-selected { opacity: .78; }.candidate.both-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }.candidate.pair-selected { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.candidate-header { min-height: 48px; padding: 8px 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }.candidate-title { display: flex; align-items: center; gap: 9px; color: var(--navy-900); white-space: nowrap; }.candidate-title strong { color: var(--muted); font: 600 12px var(--mono); letter-spacing: .04em; }.candidate.selected .candidate-title::after { content: "Your selection"; margin-left: 3px; padding: 4px 6px; color: var(--cobalt-dark); background: var(--cobalt-soft); border: 1px solid #9bbcf0; border-radius: 3px; font: 500 10px var(--mono); white-space: nowrap; }.candidate-letter { width: 25px; height: 25px; display: grid; place-items: center; color: var(--cobalt); border: 1px solid #9bbcf0; border-radius: 50%; font: 600 11px var(--mono); }.candidate-meta { display: none; }
.image-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: #dbe7f2; }.image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }.skeleton { animation: skeletonPulse 1.2s ease-in-out infinite alternate; }.skeleton img { opacity: 0; }@keyframes skeletonPulse { to { background: #cbdceb; } }
.image-tools { min-height: 42px; padding: 7px 11px; display: flex; justify-content: flex-end; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); }.tool-button { height: 29px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; color: var(--navy-800); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: 500 10px var(--mono); }.tool-button:hover { color: var(--cobalt-dark); background: var(--cobalt-soft); border-color: #8eb1e6; }.tool-button span { color: var(--cobalt); font-size: 16px; line-height: 1; }
.bar-vote-button:disabled, .next-button:disabled { opacity: .45; cursor: default; }.bar-vote-button kbd, .next-button kbd { color: inherit; background: rgba(255,255,255,.12); border-color: currentColor; }
kbd { min-width: 25px; height: 25px; padding: 0 6px; display: inline-grid; place-items: center; color: var(--navy-800); background: #fff; border: 1px solid var(--line-strong); border-radius: 3px; font: 500 11px var(--mono); }
.comparison-divider { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 50%; font: 500 9px var(--mono); }
.reveal { min-height: 184px; padding: 16px; background: #f8fbfe; border-top: 1px solid var(--line); animation: revealIn .18s ease; }.reveal-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(90px, .65fr); gap: 12px; }.detail-item { min-width: 0; padding: 0 10px 0 0; }.detail-item + .detail-item { padding-left: 12px; border-left: 1px solid var(--line); }.detail-item small, .metric-item small { display: block; margin-bottom: 5px; color: var(--faint); font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.detail-item strong { display: block; overflow: hidden; color: var(--navy-900); font: 500 13px/1.35 var(--mono); text-overflow: ellipsis; white-space: nowrap; }.detail-item strong.harness { color: var(--teal); }.metrics-strip { margin-top: 16px; padding-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; border-top: 1px solid var(--line); }.metric-item { min-width: 0; }.metric-item strong { color: var(--ink); font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }.advanced-metrics { margin-top: 11px; color: var(--muted); font: 10px var(--mono); }.advanced-metrics summary { cursor: pointer; }.advanced-metrics div { padding-top: 7px; display: flex; flex-wrap: wrap; gap: 10px; }.advanced-metrics span { padding-right: 10px; border-right: 1px solid var(--line); }.advanced-metrics span:last-child { border-right: 0; }@keyframes revealIn { from { opacity: 0; } }
.pair-outcome { max-width: 1500px; margin: 0 auto 10px; padding: 10px 13px; color: var(--navy-800); background: var(--cobalt-soft); border: 1px solid #a5c4ee; font: 500 11px var(--mono); }
.voting-bar { min-height: 66px; margin: 16px 0 2px; padding: 8px; display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 7px; background: var(--navy-950); border: 1px solid var(--navy-800); border-radius: var(--radius); box-shadow: 0 8px 20px rgba(14,29,44,.14); }.voting-bar-label { padding: 0 9px; display: flex; align-items: center; color: #9fb3c5; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.bar-vote-button { min-width: 0; min-height: 48px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: #fff; background: var(--navy-800); border: 1px solid #38536c; border-radius: var(--radius-sm); font: 500 11px var(--mono); text-align: left; }.bar-vote-button > span { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: var(--cobalt); border-radius: 50%; font-weight: 600; }.bar-vote-button strong { overflow: hidden; font: 500 11px var(--sans); text-overflow: ellipsis; white-space: nowrap; }.bar-vote-button kbd { margin-left: auto; min-width: 22px; height: 22px; color: #dbe9f7; background: transparent; border-color: #58718a; }.bar-vote-button:hover { background: #294964; border-color: #79a9df; }.bar-vote-button.tie { color: #ffe9a6; }.bar-vote-button.tie > span { color: var(--warning); background: var(--warning-soft); }.bar-vote-button.both-bad { color: #ffc4c8; }.bar-vote-button.both-bad > span { color: var(--danger); background: var(--danger-soft); }
.vote-result { min-height: 54px; padding: 10px 13px; display: flex; align-items: center; gap: 9px; color: var(--navy-800); background: var(--teal-soft); border: 1px solid #9bc8bd; border-radius: var(--radius-sm); font: 11px var(--mono); }.confirmation-mark { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; font-weight: 600; }.vote-result strong { color: var(--teal); font-weight: 600; }.vote-outcome { color: var(--muted); }.vote-result-countdown { margin-left: auto; color: var(--muted); }.vote-result button { min-height: 30px; padding: 0 10px; color: var(--navy-800); background: transparent; border: 1px solid #8fb9ae; border-radius: var(--radius-sm); font: 500 10px var(--mono); }.vote-result button:hover { background: #d8ece7; }.arena-footer { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.vote-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 10px var(--mono); }.vote-hint > span:first-child { color: var(--navy-800); font-weight: 600; }.vote-hint i { width: 3px; height: 3px; background: var(--faint); border-radius: 50%; }.next-button { min-height: 44px; padding: 0 11px 0 16px; display: flex; align-items: center; gap: 11px; color: #fff; background: var(--cobalt); border: 1px solid var(--cobalt); border-radius: var(--radius-sm); font: 600 13px var(--sans); }.next-button:hover { background: var(--cobalt-dark); }.next-button span { font-size: 19px; }.error-message { padding: 12px; color: var(--danger); background: var(--danger-soft); border: 1px solid #e0aeb2; border-radius: var(--radius-sm); font: 11px var(--mono); text-align: center; }.error-message a { color: var(--danger); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }.error-message a:hover { color: #7f3036; }

.section-light, .section-soft { scroll-margin-top: 64px; }.section-light { background: var(--paper); }.section-soft { background: var(--soft); }.rankings, .history, .method { padding: 76px clamp(18px, 4vw, 56px); }.section-heading { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: end; gap: 50px; }.compact-heading h2 { font-size: clamp(36px, 4vw, 58px); }.section-heading > p { max-width: 530px; margin: 0 0 2px; color: var(--muted); font-size: 14px; line-height: 1.7; }.section-heading > p strong { color: var(--ink); font-family: var(--mono); font-size: 13px; }
.ranking-summary { max-width: 1500px; margin: 32px auto 20px; display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.ranking-summary > div { min-width: 140px; padding: 12px 24px 12px 0; display: flex; align-items: baseline; gap: 8px; color: var(--muted); font: 11px var(--mono); }.ranking-summary > div + div { padding-left: 24px; border-left: 1px solid var(--line); }.ranking-summary strong { color: var(--navy-900); font-size: 19px; font-variant-numeric: tabular-nums; }.ranking-summary .status-dot { margin-right: 0; }
.ranking-controls { max-width: 1500px; margin: 0 auto 12px; display: flex; justify-content: space-between; gap: 18px; }.control-group { display: grid; gap: 6px; }.control-label { color: var(--muted); font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.segmented { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }.segmented button { min-height: 38px; padding: 0 13px; color: var(--muted); background: var(--panel); border: 0; border-right: 1px solid var(--line); font: 11px var(--mono); }.segmented button:last-child { border-right: 0; }.segmented button:hover { color: var(--cobalt-dark); background: var(--cobalt-soft); }.segmented button.active { color: #fff; background: var(--navy-800); }.ranking-controls .segmented { flex-wrap: wrap; }.ranking-filters label.filter-disabled { opacity: .5; }
.ranking-filter-sheet { max-width: 1500px; margin: 0 auto 15px; }.ranking-filter-sheet > summary { min-height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 10px; color: var(--navy-800); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; list-style: none; font: 500 11px var(--mono); }.ranking-filter-sheet > summary::-webkit-details-marker { display: none; }.ranking-filter-sheet > summary span:nth-child(2) { margin-left: auto; color: var(--muted); font-weight: 400; }.ranking-filter-sheet > summary b { color: var(--cobalt); font-size: 16px; font-weight: 400; }.ranking-filter-sheet[open] > summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }.ranking-filters { padding: 13px; display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(135px, 1fr)) auto; gap: 10px; align-items: end; background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }.ranking-filters label:not(.search-box).filter-active { color: var(--cobalt-dark); }.search-box { min-width: 0; min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }.search-box span { color: var(--cobalt); font-size: 18px; line-height: 1; }.search-box input { width: 100%; min-width: 0; padding: 8px 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: 12px var(--mono); }.reset-button { min-height: 38px; padding: 0 11px; color: var(--cobalt-dark); background: transparent; border: 1px solid #8eb1e6; border-radius: var(--radius-sm); font: 500 10px var(--mono); white-space: nowrap; }.reset-button:hover { color: #fff; background: var(--cobalt); }
.ranking-explanation { max-width: 1500px; margin: 0 auto 15px; color: var(--navy-800); background: var(--cobalt-soft); border: 1px solid #a5c4ee; border-radius: var(--radius); }.ranking-explanation summary { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--navy-900); font: 600 11px var(--mono); list-style: none; }.ranking-explanation summary::-webkit-details-marker { display: none; }.ranking-explanation summary span { color: var(--cobalt); font-size: 16px; font-weight: 400; }.ranking-explanation[open] summary { border-bottom: 1px solid #a5c4ee; }.ranking-explanation-grid { padding: 14px 13px 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.ranking-explanation-grid > div { padding-left: 11px; border-left: 2px solid var(--cobalt); }.ranking-explanation-grid strong { display: block; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }.ranking-explanation-grid p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.ranking-explanation-grid b { color: var(--navy-800); font-family: var(--mono); font-size: 11px; }.ranking-controls > .control-group:first-child { flex: 1 1 auto; min-width: 0; }.ranking-explanation { max-width: 760px; margin: 10px 0 0; padding: 14px 16px 15px; color: var(--navy-800); background: linear-gradient(135deg, #fafdff, var(--cobalt-soft)); border: 1px solid #a5c4ee; border-left: 3px solid var(--cobalt); border-radius: var(--radius); box-shadow: 0 5px 16px rgba(33,103,207,.08); }.ranking-explanation[hidden] { display: none !important; }.ranking-explanation-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.ranking-explanation .section-kicker { margin: 0; }.ranking-explanation-badge { padding: 4px 7px; color: var(--teal); background: var(--teal-soft); border: 1px solid #9bc8bd; border-radius: 99px; font: 500 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.ranking-explanation h3 { margin: 8px 0 4px; color: var(--navy-950); font-size: 17px; letter-spacing: -.02em; }.ranking-explanation > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.ranking-formula { margin: 11px 0; padding: 10px 11px; color: #eef5fb; background: var(--navy-900); border-radius: var(--radius-sm); font: 500 11px/1.45 var(--mono); box-shadow: inset 3px 0 0 #68a1f3; }.ranking-caveat { padding-top: 10px; border-top: 1px solid #c4d7ed; }.ranking-caveat strong { color: var(--navy-800); font-weight: 600; }.table-wrap, .history-table-wrap { max-width: 1500px; margin: 0 auto; overflow-x: auto; border-top: 2px solid var(--navy-900); }.table-wrap table { min-width: 800px; }.table-wrap table, .history-table { width: 100%; border-collapse: collapse; }.table-wrap th, .history-table th { position: sticky; top: 64px; z-index: 2; height: 45px; padding: 0 12px; color: var(--muted); background: var(--paper); border-bottom: 1px solid var(--line); font: 500 10px var(--mono); text-align: left; text-transform: uppercase; letter-spacing: .06em; }.table-wrap td { height: 72px; padding: 10px 12px; border-top: 1px solid var(--line); }.table-wrap tbody tr { transition: background .12s ease; }.table-wrap tbody tr:hover { background: var(--cobalt-soft); }.sort-button { padding: 0; color: inherit; border: 0; background: transparent; font: inherit; text-transform: inherit; letter-spacing: inherit; }.sort-button::after { margin-left: 5px; content: "↕"; color: var(--faint); }.sort-button.active { color: var(--navy-900); }.sort-button.active::after { content: "↑"; color: var(--cobalt); }.sort-button.active.desc::after { content: "↓"; }.rank-number { color: var(--navy-800); font: 600 15px var(--mono); font-variant-numeric: tabular-nums; }.rank-number.top { color: var(--cobalt); }.config-name { display: block; max-width: 410px; overflow: hidden; color: var(--navy-900); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.ranking-card { display: none; }.config-subline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }.harness-tag, .effort-tag, .confidence-tag { display: inline-block; padding: 4px 6px; color: var(--navy-800); background: var(--soft); border: 1px solid var(--line-strong); border-radius: 3px; font: 10px var(--mono); }.harness-tag.pi { color: #21685f; background: var(--teal-soft); border-color: #9bc8bd; }.harness-tag.codex { color: #315f93; background: #edf4ff; border-color: #abc5ea; }.effort-tag.off { color: #586779; background: #eef1f4; border-color: #c5ced8; }.effort-tag.minimal { color: #315f93; background: #edf4ff; border-color: #abc5ea; }.effort-tag.low { color: #21685f; background: var(--teal-soft); border-color: #9bc8bd; }.effort-tag.medium { color: #80621c; background: #fff5d8; border-color: #e3c578; }.effort-tag.high { color: #9a4e1b; background: #fff0e5; border-color: #e3b18d; }.effort-tag.xhigh { color: #923a48; background: #fdecef; border-color: #e2aab5; }.effort-tag.max { color: #69439a; background: #f3edff; border-color: #c5afe8; }.confidence-tag.provisional { color: var(--warning); background: var(--warning-soft); border-color: #e3c578; }.confidence-tag.established { color: var(--teal); background: var(--teal-soft); border-color: #9bc8bd; }.rating { color: var(--navy-900); font: 600 17px var(--mono); font-variant-numeric: tabular-nums; }.record, .vote-count, .win-rate { color: var(--navy-800); font: 11px var(--mono); font-variant-numeric: tabular-nums; }.vote-count { color: var(--muted); }.efficiency-value, .efficiency-resource { display: block; color: var(--navy-900); font: 600 12px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }.efficiency-value { color: var(--teal); }.efficiency-subline, .efficiency-scope { display: block; margin-top: 5px; color: var(--muted); font: 10px var(--mono); white-space: nowrap; }.win-track { width: 82px; height: 5px; margin-top: 7px; overflow: hidden; background: #dce7f1; border-radius: 4px; }.win-track i { display: block; height: 100%; background: var(--cobalt); border-radius: inherit; }.table-empty { padding: 46px !important; color: var(--muted); text-align: center; font: 12px var(--mono) !important; }.ranking-note { max-width: 1500px; margin: 15px auto 0; color: var(--muted); font: 11px/1.55 var(--mono); }

.history-toolbar { max-width: 1500px; margin: 32px auto 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--muted); font: 11px var(--mono); }.history-total { min-width: 220px; justify-self: center; display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 16px 28px; background: var(--panel); border: 1px solid var(--line-strong); border-top: 4px solid var(--cobalt); border-radius: var(--radius); text-transform: uppercase; box-shadow: 0 6px 18px rgba(33,103,207,.12); }.history-total strong { color: var(--navy-900); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }.history-total span { color: var(--cobalt-dark); font-size: 12px; font-weight: 700; }.history-toolbar .search-box { justify-self: end; width: min(340px, 100%); }.history-table-wrap { border-color: var(--navy-800); }.history-table { min-width: 1120px; background: var(--panel); }.history-table th { background: var(--soft); }.history-table td { height: 72px; padding: 10px 18px 10px 12px; white-space: nowrap; border-top: 1px solid var(--line); }.history-table tbody tr:hover { background: var(--cobalt-soft); }.history-run-id { color: var(--cobalt-dark); font: 500 10px var(--mono); letter-spacing: .05em; }.history-table time { color: var(--muted); font: 10px var(--mono); }.history-model { display: block; max-width: 210px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.history-subtle { display: block; margin-top: 5px; color: var(--muted); font: 10px/1.35 var(--mono); }.history-metric { display: grid; gap: 5px; color: var(--ink); font: 10px/1.25 var(--mono); }.history-prompt { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }.history-empty { padding: 55px !important; color: var(--muted); text-align: center; font: 12px var(--mono) !important; }

.submit-section { padding: 76px clamp(18px, 4vw, 56px); border-top: 1px solid var(--line); }.submit-panel { max-width:1500px; margin:32px auto 0; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--cobalt); border-radius:var(--radius); }.submit-panel pre { margin:10px 0; padding:14px; overflow:auto; color:#eef5fb; background:var(--navy-900); border-radius:var(--radius-sm); font:11px/1.55 var(--mono); }.submit-panel p { max-width:820px; margin:0; color:var(--muted); font-size:12px; }.submit-download { flex:0 0 auto; min-height:46px; padding:0 17px; display:inline-flex; align-items:center; gap:13px; color:#fff; background:var(--cobalt); border-radius:var(--radius-sm); text-decoration:none; font:600 12px var(--mono); }.submit-download:hover { background:var(--cobalt-dark); }.submit-download span { font-size:18px; }
.method { border-top: 1px solid var(--line); }.pipeline { max-width: 1500px; margin: 40px auto 0; display: grid; grid-template-columns: minmax(0,1fr) 25px minmax(0,1fr) 25px minmax(0,1fr) 25px minmax(0,1fr); align-items: stretch; }.pipeline article { min-height: 218px; padding: 18px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }.pipeline article > span { color: var(--cobalt); font: 500 11px var(--mono); }.pipeline article strong { margin-top: 32px; color: var(--navy-900); font-size: 15px; }.pipeline article p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.pipeline article small { margin-top: auto; color: var(--teal); font: 10px var(--mono); letter-spacing: .08em; }.pipeline-arrow { display: grid; place-items: center; color: var(--cobalt); font: 20px var(--mono); }.method-notes { max-width: 1500px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.method-notes > div { padding: 13px 15px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }.method-notes span { color: var(--muted); font: 500 10px var(--mono); letter-spacing: .07em; }.method-notes p { margin: 7px 0 0; color: var(--navy-800); font-size: 12px; line-height: 1.5; }.about { padding: 64px clamp(18px, 4vw, 56px); border-top: 1px solid var(--line); scroll-margin-top: 64px; }.about-inner { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; }.about h2 { max-width: 690px; font-size: clamp(30px, 4vw, 52px); }.about p { max-width: 500px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
footer { min-height: 94px; padding: 0 clamp(18px, 4vw, 56px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #b0c0cf; background: var(--navy-950); border-top: 1px solid #29435c; }footer .brand { color: #f8fbff; font-size: 14px; }footer p, footer > a:last-child { font: 10px var(--mono); }footer > a:last-child { justify-self: end; color: #c9d7e3; text-decoration: none; }footer > a:last-child:hover { color: #fff; }

dialog { max-width: none; padding: 0; }.model-dialog { width: min(92vw, 1100px); height: min(88vh, 850px); color: #eef5fb; background: var(--navy-950); border: 1px solid #58718a; box-shadow: 0 24px 80px rgba(5,20,36,.35); }.model-dialog::backdrop, .image-dialog::backdrop { background: rgba(10, 28, 45, .78); }.model-dialog[open], .image-dialog[open] { display: grid; grid-template-rows: 54px minmax(0, 1fr) 45px; }.model-dialog-bar, .model-dialog-footer, .image-dialog-bar, .image-dialog-footer { padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334e67; font: 10px var(--mono); }.model-dialog-bar > div { display: flex; align-items: center; gap: 9px; }.model-dialog-bar button, .image-dialog-bar button { min-width: 34px; height: 34px; color: #eef5fb; background: transparent; border: 1px solid #58718a; border-radius: var(--radius-sm); font-size: 18px; }.model-dialog-bar button:hover, .image-dialog-bar button:hover { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }.model-dialog-footer { color: #9cb0c1; border-top: 1px solid #334e67; border-bottom: 0; }.model-dialog-footer a { color: #eef5fb; }.model-dialog-footer a:hover { color: #8fbaf5; }model-viewer { width: 100%; height: 100%; background: #182f45; --poster-color: transparent; }.image-dialog { width: min(96vw, 1600px); height: min(94vh, 1000px); overflow: hidden; color: #eef5fb; background: var(--navy-950); border: 1px solid #58718a; box-shadow: 0 24px 80px rgba(5,20,36,.35); }.image-dialog[open] { grid-template-rows: 54px minmax(0,1fr) 40px; }.image-dialog-bar { padding-left: 17px; }.image-dialog-bar > div { display: flex; gap: 5px; }.image-dialog-bar button { font: 16px var(--mono); }.image-dialog-bar #image-zoom-reset { min-width: 52px; font-size: 10px; }.image-stage { display: grid; place-items: center; overflow: hidden; background: #102438; cursor: grab; }.image-stage.is-zoomed { overflow: auto; }.image-stage:active { cursor: grabbing; }.image-stage img { display: block; max-width: 100%; max-height: 100%; width: calc(min(84vw, 1300px, 78vh) * var(--image-zoom, 1)); height: auto; transition: width .16s ease; }.image-stage.is-zoomed img { max-width: none; max-height: none; }.image-dialog-footer { justify-content: flex-start; color: #9cb0c1; border-top: 1px solid #334e67; border-bottom: 0; }.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; padding: 11px 16px; color: #fff; background: var(--teal); border: 1px solid #9bc8bd; border-radius: var(--radius-sm); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; font: 11px var(--mono); transition: opacity .18s, transform .18s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) { .site-header { gap: 14px; }.nav-link { min-width: 68px; padding-inline: 8px; font-size: 11px; }.experiment-heading { gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }.experiment-facts { grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); border-top: 0; }.fact { min-height: 54px; padding: 0 20px 9px; border-right: 0; border-bottom: 1px solid var(--line); }.fact:nth-child(2) { border-left: 1px solid var(--line); }.fact:last-child { grid-column: 1 / -1; padding-top: 9px; border-bottom: 0; }.candidate-meta { gap: 7px; font-size: 9px; }.candidate-meta span + span { padding-left: 7px; }.ranking-filters { grid-template-columns: minmax(200px, 1.5fr) repeat(2, 1fr) repeat(2, 1fr); }.ranking-filters .search-box { grid-column: span 2; }.reset-button { grid-column: 4 / -1; }.table-wrap th, .table-wrap td { padding-inline: 9px; } }
@media (max-width: 820px) { .submit-panel { align-items:stretch; flex-direction:column; }.submit-download { align-self:flex-start; }.header-status { margin-left: auto; }.header-status .status-label, .header-status { font-size: 0; }.header-status #header-votes { font-size: 11px; }.header-status::after { content: " votes"; font-size: 10px; }.experiment-heading { display: block; min-height: 0; }.experiment-facts { margin-top: 28px; border-left: 0; border-top: 1px solid var(--line); }.fact { padding-left: 0; }.fact:nth-child(2) { padding-left: 15px; }.fact:last-child { padding-left: 0; }.experiment-tools { display: grid; grid-template-columns: 1fr 1fr; }.match-settings { min-width: 0; }.match-settings[open] .filters { position: static; margin-top: 8px; box-shadow: none; }.filters { display: grid; grid-template-columns: 1fr 1fr; }.filters label:last-child { grid-column: span 2; }.comparison-intro { display: block; }.comparison-intro p { margin-top: 12px; }.ranking-controls { display: grid; }.ranking-filters { grid-template-columns: repeat(2, 1fr); }.ranking-filters .search-box { grid-column: span 2; }.reset-button { grid-column: auto; }.ranking-explanation { max-width: none; }.ranking-explanation-grid { grid-template-columns: 1fr; gap: 13px; }.section-heading, .about-inner { display: block; }.section-heading > p, .about p { margin-top: 22px; }.pipeline { grid-template-columns: 1fr; gap: 8px; }.pipeline-arrow { transform: rotate(90deg); }.pipeline article { min-height: 164px; }.method-notes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { html { scroll-padding-top: 60px; }.site-header { min-height: 60px; padding-inline: 14px; gap: 10px; }.brand { gap: 8px; font-size: 13px; }.brand-mark { width: 19px; height: 20px; }.site-header nav { max-width: 44vw; }.nav-link { min-width: 62px; padding-inline: 5px; font-size: 10px; }.nav-link[data-section="history"], .nav-link[data-section="about"] { display: none; }.header-status::after { display: none; }.header-status #header-votes { display: none; }.experiment { padding-inline: 14px; }.experiment-heading { min-height: 0; padding-top: 16px; padding-bottom: 10px; }.eyebrow { margin-bottom: 8px; font-size: 9px; }.eyebrow span { padding: 3px 5px; }h1 { font-size: 30px; line-height: 1.04; }.prompt-text { margin-top: 10px; padding-left: 10px; border-left-width: 2px; font-size: 14px; line-height: 1.45; }.prompt-text::before { margin-bottom: 3px; font-size: 9px; }.experiment-facts { display: none; }.mobile-benchmark-details { display: block; margin: 0 0 5px; color: var(--navy-800); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }.mobile-benchmark-details summary { min-height: 33px; padding: 0 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 500 10px var(--mono); }.mobile-benchmark-details summary::-webkit-details-marker { display: none; }.mobile-benchmark-details summary span:nth-child(2) { margin-left: auto; color: var(--muted); font-weight: 400; }.mobile-benchmark-details summary b { color: var(--cobalt); font-size: 15px; font-weight: 400; }.mobile-benchmark-details[open] summary { border-bottom: 1px solid var(--line); }.mobile-benchmark-content { padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.mobile-benchmark-content div { display: grid; gap: 3px; }.mobile-benchmark-content span { color: var(--faint); font: 9px var(--mono); text-transform: uppercase; }.mobile-benchmark-content strong { color: var(--navy-800); font: 500 10px/1.3 var(--mono); }.mobile-benchmark-content p { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 8px; color: var(--muted); border-top: 1px solid var(--line); font: 10px/1.35 var(--mono); }.experiment-tools { grid-template-columns: 1fr; gap: 5px; padding: 2px 0 5px; }.voting-guide { order: 2; }.voting-guide summary, .match-settings summary { min-height: 30px; padding-inline: 10px; }.voting-guide-content { padding: 10px; }.voting-guide-content p { margin-bottom: 8px; font-size: 11px; }.judging-criteria { gap: 8px; }.judging-criteria div { padding-left: 7px; }.judging-criteria span { font-size: 10px; }.match-settings { order: 1; }.filters { grid-template-columns: 1fr; padding: 9px; }.filters label:last-child { grid-column: auto; }.comparison-intro { padding-top: 3px; }.comparison-intro h2 { font-size: 20px; }.comparison-help { display: none; }.blind-pill { display: none; }.arena { grid-template-columns: 1fr; gap: 20px; }.image-wrap { aspect-ratio: 16 / 9; }.comparison-divider { top: calc(50% - 10px); }.candidate-header { align-items: flex-start; flex-direction: column; gap: 8px; }.candidate-meta { width: 100%; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }.candidate-meta span + span { padding-left: 7px; }.voting-bar { position: sticky; z-index: 20; bottom: 10px; margin-inline: -4px; grid-template-columns: auto repeat(4, minmax(0, 1fr)); }.voting-bar-label { display: none; }.bar-vote-button { padding-inline: 6px; justify-content: center; }.bar-vote-button strong { display: none; }.bar-vote-button kbd { display: none; }.vote-result { align-items: flex-start; flex-wrap: wrap; }.vote-outcome { width: calc(100% - 32px); }.vote-result-countdown { margin-left: 31px; }.vote-result button { margin-left: auto; }.arena-footer { min-height: 70px; }.keyboard-hint { display: none; }.next-button { margin-left: auto; }.rankings, .history, .method, .submit-section { padding: 58px 14px; }.ranking-summary { margin-top: 24px; }.ranking-summary > div { min-width: 0; padding-right: 13px; font-size: 9px; }.ranking-summary > div + div { padding-left: 13px; }.ranking-summary strong { font-size: 15px; }.ranking-summary > div:last-child span:last-child { display: none; }.ranking-filter-sheet { margin-bottom: 10px; }.ranking-filter-sheet > summary { min-height: 34px; padding-inline: 10px; font-size: 10px; }.ranking-filters { grid-template-columns: 1fr 1fr; padding: 10px; }.ranking-filters .search-box { grid-column: 1 / -1; }.reset-button { grid-column: 1 / -1; }.table-wrap { overflow: visible; border-top: 0; }.table-wrap table { min-width: 0; }.table-wrap thead { display: none; }.table-wrap tbody { display: grid; gap: 7px; }.table-wrap tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px 10px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cobalt); border-radius: var(--radius-sm); box-shadow: 0 2px 7px rgba(22,50,77,.04); }.table-wrap td { height: auto; padding: 0; border: 0; }.table-wrap td:nth-child(1) { grid-row: span 2; align-self: start; }.table-wrap td:nth-child(2) { grid-column: 2; grid-row: 1; }.table-wrap td:nth-child(3) { grid-column: 3; grid-row: 1; }.table-wrap td:nth-child(4) { grid-column: 2 / -1; grid-row: 2; }.table-wrap td:nth-child(5) { grid-column: 3; grid-row: 2; align-self: center; }.table-wrap td:nth-child(6) { grid-column: 2; grid-row: 3; }.table-wrap td:nth-child(7) { grid-column: 3; grid-row: 3; }.table-wrap td:nth-child(8) { grid-column: 2 / -1; grid-row: 4; }.rank-number { font-size: 17px; }.config-name { max-width: none; font-size: 12px; }.ranking-card { display: block; }.table-wrap td:nth-child(3)::before { content: "ELO "; color: var(--faint); font: 500 9px var(--mono); }.table-wrap td:nth-child(4)::before { content: "EFFICIENCY "; color: var(--faint); font: 500 9px var(--mono); }.table-wrap td:nth-child(6)::before { content: "RECORD "; color: var(--faint); font: 500 9px var(--mono); }.table-wrap td:nth-child(5)::before { content: "CONFIDENCE "; display: block; color: var(--faint); font: 500 8px var(--mono); }.table-wrap td:nth-child(7)::before { content: "VOTES "; color: var(--faint); font: 500 9px var(--mono); }.table-wrap td:nth-child(8) { display: none; }.ranking-note { display: none; }.history-toolbar { display: flex; align-items: stretch; flex-direction: column; gap: 12px; }.history-total { align-self: center; }.history-toolbar .search-box { width: auto; }.method-notes { grid-template-columns: 1fr; }.about { padding: 52px 14px; }footer { min-height: 76px; grid-template-columns: 1fr auto; padding-inline: 14px; }footer p { display: none; }footer > a:last-child { font-size: 9px; }.model-dialog, .image-dialog { width: 100vw; height: 100dvh; border: 0; }.image-dialog-bar { padding-inline: 10px; }.image-stage img { width: calc(140vw * var(--image-zoom, 1)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Refinements for square benchmark assets and compact inspection. */
.experiment { max-width: 1720px; padding-inline: clamp(14px, 2.5vw, 40px); }
.image-wrap { aspect-ratio: 1 / 1; }
.harness-tag, .effort-tag, .confidence-tag { display: inline-flex; height: 26px; padding-block: 0; align-items: center; line-height: 1; }
.history-table { min-width: 1040px; }
.history-cost { display: grid; gap: 4px; min-width: 105px; color: var(--muted); font: 11px var(--mono); font-variant-numeric: tabular-nums; }
.history-cost strong { color: var(--navy-900); font: 600 15px/1.1 var(--mono); }
.history-cost span { color: var(--cobalt-dark); font-size: 12px; }
.history-filters { max-width:1500px; margin:0 auto 15px; padding:13px; display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)) auto; gap:10px; align-items:end; background:var(--panel); border:1px solid var(--line-strong); }
.history-filters label { display:grid; gap:5px; min-width:0; color:var(--muted); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.history-filters select { width:100%; height:38px; padding:0 30px 0 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius-sm); outline:0; font:11px var(--mono); appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 14px) 16px,calc(100% - 10px) 16px; background-size:4px 4px; background-repeat:no-repeat; }
.history-filters select:focus { border-color:var(--cobalt); }
@media (max-width:820px) { .history-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.history-filters .reset-button { grid-column:span 2; } }
@media (max-width:650px) { .history-toolbar { grid-template-columns:1fr; gap:12px; }.history-total { justify-self:stretch; }.history-toolbar .search-box { justify-self:stretch; width:100%; }.history-filters { grid-template-columns:1fr; }.history-filters .reset-button { grid-column:auto; } }
.image-stage { min-height: 0; }
.image-stage img { width: calc(min(84vw, 1300px, 78vh) * var(--image-zoom, 1)); }
@media (max-width: 650px) {
  .image-wrap { aspect-ratio: 1 / 1; }
  .image-stage img { width: calc(min(92vw, 78vh) * var(--image-zoom, 1)); }
}

/* .mobile-vote-dock is intentionally replaced by the shared voting-bar below. */
/* Mobile comparison viewer: one shared canvas keeps A and B at the same zoom and pan. */
.mobile-comparison { display: none; }
.mobile-comparison-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mobile-viewer-modes, .mobile-viewer-zoom { display: flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.mobile-viewer-modes button, .mobile-viewer-zoom button { min-height: 34px; padding: 0 12px; color: var(--muted); background: var(--panel); border: 0; border-right: 1px solid var(--line); font: 500 10px var(--mono); }
.mobile-viewer-modes button:last-child, .mobile-viewer-zoom button:last-child { border-right: 0; }
.mobile-viewer-modes button.active { color: #fff; background: var(--navy-800); }
.mobile-viewer-zoom button:hover, .mobile-viewer-modes button:hover { color: var(--cobalt-dark); background: var(--cobalt-soft); }
.mobile-viewer-zoom button { min-width: 36px; padding-inline: 8px; }
.mobile-viewer-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; touch-action: none; background: #dbe7f2; border: 1px solid var(--line); border-radius: var(--radius); cursor: grab; }
.mobile-viewer-stage:active { cursor: grabbing; }
.mobile-viewer-canvas { position: absolute; inset: 0; transform-origin: center; will-change: transform; }
.mobile-viewer-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; pointer-events: none; }
.mobile-viewer-right { clip-path: inset(0 0 0 50%); }
.mobile-comparison[data-mode="left"] .mobile-viewer-right { display: none; }
.mobile-comparison[data-mode="right"] .mobile-viewer-left { display: none; }
.mobile-comparison[data-mode="right"] .mobile-viewer-right { clip-path: none; }
.mobile-comparison[data-mode="left"] .mobile-split-line, .mobile-comparison[data-mode="right"] .mobile-split-line { display: none; }
.mobile-split-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(14,29,44,.35); pointer-events: none; }
.mobile-viewer-hint { position: absolute; z-index: 3; right: 8px; bottom: 8px; padding: 4px 6px; color: #fff; background: rgba(14,29,44,.72); border-radius: 3px; font: 9px var(--mono); pointer-events: none; }
.mobile-viewer-labels { display: flex; justify-content: space-between; padding: 5px 3px 0; color: var(--muted); font: 600 10px var(--mono); }
.mobile-reveals { margin-top: 8px; display: grid; gap: 8px; }
.mobile-reveals > div { min-width: 0; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mobile-reveals > div > strong { display: block; margin-bottom: 7px; color: var(--navy-900); font: 600 11px var(--mono); }
.mobile-reveals .reveal { min-height: 0; padding: 0; border-top: 0; }
@media (max-width: 650px) {
  .mobile-comparison { display: block; margin-bottom: 12px; }
  .arena { display: block; }
  .arena > .candidate { margin-top: 10px; }
  .arena > .candidate .image-wrap, .arena > .candidate .image-tools { display: none; }
  .arena > .candidate .candidate-header { min-height: 50px; padding-block: 8px; flex-direction: row; align-items: center; }
  .arena > .candidate .candidate-meta { width: auto; justify-content: flex-end; }
  .comparison-divider { display: none; }
}


/* Table wrappers are the sticky positioning containers, so headers stay above their rows. */
.table-wrap th, .history-table th { top: 0; }

.history-run-link { display: inline-flex; min-width: 78px; padding: 6px 8px; color: var(--cobalt-dark); background: var(--cobalt-soft); border: 1px solid #9bbcf0; border-radius: var(--radius-sm); font: 600 10px var(--mono); letter-spacing: .04em; text-decoration: none; }
.history-run-link:hover { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
.run-detail { min-height: calc(100vh - 64px); padding: 46px clamp(18px, 4vw, 56px) 80px; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.run-detail-inner { max-width: 1500px; margin: 0 auto; }
.run-detail-back { display: inline-flex; margin-bottom: 28px; color: var(--cobalt-dark); font: 500 11px var(--mono); text-decoration: none; }
.run-detail-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.run-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.run-detail-heading h2 { font-size: clamp(32px, 4vw, 58px); }
.run-detail-subtitle { margin: 13px 0 0; color: var(--muted); font: 12px var(--mono); }
.run-detail-status { color: var(--muted); font: 10px var(--mono); }
.run-detail-assets { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.run-asset-card { min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.run-asset-header { min-height: 62px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.run-asset-header .section-kicker { margin-bottom: 3px; }
.run-asset-header strong { color: var(--navy-900); font-size: 13px; }
.run-asset-link { color: var(--cobalt-dark); font: 500 10px var(--mono); white-space: nowrap; }
.run-asset-link:hover { color: var(--cobalt); }
.run-detail-image-wrap, .run-detail-model-wrap { min-height: 420px; display: grid; place-items: center; background: #dbe7f2; }
.run-detail-image-wrap { padding: 20px; }
.run-detail-image { display: block; width: min(100%, 560px); max-height: 560px; aspect-ratio: 1; object-fit: contain; cursor: zoom-in; box-shadow: 0 5px 18px rgba(22,50,77,.12); }
.run-detail-image:focus-visible { outline: 3px solid rgba(33,103,207,.45); outline-offset: 4px; }
.run-detail-model-wrap { position: relative; background: #182f45; }
.run-detail-model-wrap model-viewer { width: 100%; height: 100%; min-height: 420px; background: transparent; --poster-color: transparent; }
.run-asset-empty { padding: 30px; color: var(--muted); background: var(--soft); font: 11px var(--mono); }
.run-detail-metadata { margin-top: 20px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.run-detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.run-detail-facts div { min-width: 0; }
.run-detail-facts small { display: block; margin-bottom: 5px; color: var(--faint); font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.run-detail-facts strong { display: block; overflow: hidden; color: var(--navy-900); font: 500 12px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.run-detail-error { margin: 0; color: var(--danger); font: 11px var(--mono); }
@media (max-width: 820px) { .run-detail-assets { grid-template-columns: 1fr; } .run-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Instrument language: quiet structure, explicit state, and render inspection marks. */
:root {
  --structure: #526b80;
  --valid: #27776e;
  --uncertain: #8c6119;
  --failed: #9a4147;
  --grid-line: rgba(20, 40, 59, .045);
}

body { background-color: var(--paper); }

/* Structural information is carried by the existing aligned rules, not a page-wide grid. */
.experiment, .rankings, .history, .method, .submit-section, .about, .run-detail { background-image: none; }

.experiment-heading { min-height: 184px; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
.eyebrow { position: relative; gap: 13px; color: var(--structure); }
.eyebrow::before { content: none; }
.experiment-heading .eyebrow::before { content: "▂▅█"; color: var(--cobalt); font-size: 12px; letter-spacing: -.15em; }
.eyebrow span { padding: 0; color: var(--cobalt); border: 0; }
.eyebrow b { color: var(--faint); }
.task-label { margin: 2px 0 3px; color: var(--faint); font: 500 10px var(--mono); letter-spacing: .1em; }
.prompt-text { margin-top: 14px; border-left-color: var(--structure); }
.prompt-text::before { content: "BRIEF"; color: var(--structure); }
.experiment-facts { border-left-color: var(--line-strong); }
.fact { border-right-color: var(--line); }
.fact > span { color: var(--structure); }
.fact strong { color: var(--navy-900); }
.fact strong .status-dot { width: 5px; height: 5px; box-shadow: none; }
.progress-track { height: 3px; border-radius: 0; background: #d7e0e7; }
.progress-track i { border-radius: 0; }

.experiment-tools details { background: transparent; border-width: 0 0 1px; border-radius: 0; }
.experiment-tools summary { padding-inline: 0; }
.experiment-tools details[open] summary { border-bottom-color: var(--line); }
.voting-guide-content { padding-inline: 0; }
.match-settings summary { padding-left: 13px; }
.comparison-intro { padding-top: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.signal-mark { margin-right: 6px; color: var(--cobalt); letter-spacing: -.14em; }
.blind-pill { color: var(--valid); }
.blind-pill .status-dot { width: 5px; height: 5px; box-shadow: none; }

.arena { gap: 28px; padding-top: 18px; }
.candidate { border-radius: 2px; box-shadow: none; }
.candidate:hover { box-shadow: 0 4px 15px rgba(22, 50, 77, .07); }
.candidate.selected, .candidate.pair-selected { border-width: 2px; box-shadow: 0 0 0 2px var(--cobalt-soft); }
.candidate-header { min-height: 52px; padding-inline: 15px; }
.candidate-title { gap: 10px; }
.candidate-title strong { letter-spacing: .06em; }
.candidate-letter { width: 23px; height: 23px; border-radius: 2px; }
.candidate-mode { color: var(--faint); font: 500 10px var(--mono); letter-spacing: .06em; }
.candidate.selected .candidate-title::after { padding: 0; color: var(--cobalt-dark); background: transparent; border: 0; border-radius: 0; }
.image-wrap { position: relative; background: #e3ebf1; }
.image-wrap::before { position: absolute; z-index: 2; inset: 12px; content: ""; pointer-events: none; background:
  linear-gradient(var(--structure), var(--structure)) left top / 28px 1px no-repeat,
  linear-gradient(var(--structure), var(--structure)) left top / 1px 28px no-repeat,
  linear-gradient(var(--structure), var(--structure)) right top / 28px 1px no-repeat,
  linear-gradient(var(--structure), var(--structure)) right top / 1px 28px no-repeat,
  linear-gradient(var(--structure), var(--structure)) left bottom / 28px 1px no-repeat,
  linear-gradient(var(--structure), var(--structure)) left bottom / 1px 28px no-repeat,
  linear-gradient(var(--structure), var(--structure)) right bottom / 28px 1px no-repeat,
  linear-gradient(var(--structure), var(--structure)) right bottom / 1px 28px no-repeat; opacity: .72; }
.image-wrap img { position: relative; z-index: 1; }
.viewport-mode, .viewport-scale { position: absolute; z-index: 3; color: #eef5fb; background: rgba(14, 29, 44, .72); font: 500 9px var(--mono); letter-spacing: .07em; pointer-events: none; }
.viewport-mode { top: 18px; right: 18px; padding: 3px 5px; }
.viewport-scale { bottom: 18px; left: 18px; padding: 3px 5px; }
.image-tools { border-bottom-color: var(--line-strong); }
.comparison-divider { top: 25px; bottom: 25px; width: 40px; height: auto; transform: translateX(-50%); background: linear-gradient(to right, transparent 19px, var(--line-strong) 19px, var(--line-strong) 20px, transparent 20px); border: 0; border-radius: 0; }
.comparison-divider span { padding: 6px 0; color: var(--structure); background: var(--paper); font-size: 15px; }

.voting-bar { margin-top: 20px; border-radius: 2px; box-shadow: 0 5px 14px rgba(14, 29, 44, .11); }
.voting-bar-label { color: #b9c8d4; }
.bar-vote-button { border-radius: 2px; }
.bar-vote-button > span { color: #d8e3eb; background: #456178; border-radius: 2px; }
.bar-vote-button:hover { background: #294964; border-color: #79a9df; }
.bar-vote-button.tie > span { border-radius: 2px; }
.bar-vote-button.both-bad > span { border-radius: 2px; }
.vote-result { border-radius: 2px; }

.table-wrap, .history-table-wrap { border-top-width: 1px; }
.table-wrap th, .history-table th { color: var(--structure); }
.table-wrap td { height: 68px; }
.rating { font-size: 16px; }
.confidence-tag { gap: 5px; border-radius: 2px; }
.confidence-tag .status-dot { width: 5px; height: 5px; margin: 0; box-shadow: none; }
.confidence-tag.provisional .status-dot { background: var(--uncertain); }
.confidence-tag.established .status-dot { background: var(--valid); }

.ranking-filter-sheet > summary { border-radius: 0; }
.ranking-filters { border-radius: 0; }
.run-asset-card { border-radius: 2px; box-shadow: none; }
.run-detail-image-wrap, .run-detail-model-wrap { position: relative; }
.run-detail-image-wrap::before { position: absolute; inset: 14px; content: ""; pointer-events: none; border: 1px solid rgba(82, 107, 128, .45); }
.run-detail-metadata { border-radius: 0; }

@media (max-width: 820px) {
  .experiment-heading { grid-template-columns: 1fr; background-image: none; }
}

@media (max-width: 650px) {
  .task-label { margin-top: 4px; }
  .arena { padding-top: 10px; }
  .candidate-mode { font-size: 9px; }
  .viewport-mode { top: 15px; right: 15px; }
  .viewport-scale { bottom: 15px; left: 15px; }
}

/* Responsive interaction polish. */
.image-wrap.skeleton { position: relative; }
.image-wrap.skeleton::after { position: absolute; z-index: 4; top: 50%; left: 50%; padding: 5px 7px; content: "LOADING RENDER"; color: var(--structure); background: rgba(246, 249, 252, .78); border: 1px solid rgba(82, 107, 128, .35); transform: translate(-50%, -50%); font: 500 9px var(--mono); letter-spacing: .08em; pointer-events: none; }
.candidate:focus-visible { outline: 3px solid rgba(33, 103, 207, .42); outline-offset: 3px; }
.mobile-viewer-stage.is-loading::after { position: absolute; z-index: 4; top: 50%; left: 50%; padding: 5px 7px; content: "LOADING COMPARISON"; color: var(--structure); background: rgba(246, 249, 252, .82); border: 1px solid rgba(82, 107, 128, .35); transform: translate(-50%, -50%); font: 500 9px var(--mono); letter-spacing: .08em; pointer-events: none; }
.mobile-viewer-stage.is-loading .mobile-viewer-image { visibility: hidden; }

@media (max-width: 820px) {
  .site-header nav { flex: 1 1 auto; min-width: 0; margin-inline: 0; }
  .site-header .nav-link[data-section="history"], .site-header .nav-link[data-section="about"] { display: none; }
  .header-status { margin-left: auto; font-size: 10px; }
  .header-status .status-label { display: inline; font-size: 9px; }
  .header-status #header-votes { font-size: 10px; }
  .header-status::after { display: none; }
  .voting-bar { position: sticky; z-index: 20; bottom: 10px; }
}

@media (max-width: 650px) {
  .site-header nav { max-width: 40vw; }
  .site-header .nav-link[data-section="method"], .site-header .nav-link[data-section="submit"] { display: none; }
  .header-status { gap: 5px; font-size: 9px; }
  .header-status .status-label { font-size: 9px; }
  .header-status #header-votes, .header-vote-copy { display: none; }
  .voting-guide { order: 1; }
  .match-settings { order: 2; }
  .bar-vote-button strong { display: block; font-size: 8px; line-height: 1; }
}
@media (max-width: 650px) { .run-detail { min-height: calc(100vh - 60px); padding: 32px 14px 58px; }.run-detail-heading { display: block; }.run-detail-status { display: block; margin-top: 12px; }.run-detail-image-wrap, .run-detail-model-wrap, .run-detail-model-wrap model-viewer { min-height: 300px; }.run-detail-image-wrap { padding: 14px; }.run-detail-image { max-height: 300px; }.run-detail-metadata { padding: 15px; }.run-detail-facts { grid-template-columns: 1fr; gap: 15px; } }