:root {
  color-scheme: light;
  --bg: #f7f9fb;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f1f5f8;
  --surface-raised: #e9f0f4;
  --line: #dbe4ea;
  --line-strong: #bfced8;
  --text: #152532;
  --muted: #536b7b;
  --quiet: #78909f;
  --accent: #087c67;
  --accent-dim: #e2f4ef;
  --violet: #5e4bc4;
  --violet-dim: #eeebff;
  --amber: #9a5e14;
  --amber-dim: #fff3df;
  --rose: #b33f52;
  --rose-dim: #ffebee;
  --shadow: 0 12px 34px rgba(33, 62, 79, .08);
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 7px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b141d;
  --bg-deep: #101d29;
  --surface: #142331;
  --surface-soft: #1a2d3e;
  --surface-raised: #213a4d;
  --line: #2a4253;
  --line-strong: #3a596c;
  --text: #edf5fa;
  --muted: #a1b7c5;
  --quiet: #7895a7;
  --accent: #67dfbd;
  --accent-dim: #183c3a;
  --violet: #b6a9ff;
  --violet-dim: #302b58;
  --amber: #f7bd70;
  --amber-dim: #48371f;
  --rose: #ff95a3;
  --rose-dim: #4b2730;
  --shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
code, .mono { font-family: var(--mono); }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; padding: 8px 12px; color: var(--bg-deep); background: var(--accent); border-radius: 7px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; min-height: 70px; padding: 0 clamp(18px, 4vw, 62px); background: color-mix(in srgb, var(--bg-deep) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; font-size: 15px; font-weight: 780; letter-spacing: -.02em; }
.brand-divider { color: var(--quiet); font-weight: 400; }
.brand-version { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 600; }
.brand-mark { display: inline-flex; align-items: center; gap: 3px; width: 23px; height: 23px; padding: 3px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 7px; transform: rotate(-8deg); }
.brand-mark span { display: block; width: 4px; height: 100%; border-radius: 3px; background: var(--accent); }
.brand-mark span:nth-child(1) { height: 40%; margin-top: 45%; opacity: .48; }
.brand-mark span:nth-child(2) { height: 76%; margin-top: 13%; }
.brand-mark span:nth-child(3) { height: 54%; margin-top: 27%; opacity: .72; }
.suite-switcher { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; }
.suite-switch-label { color: var(--quiet); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.benchmark-tabs { display: flex; align-items: stretch; gap: 3px; min-width: 0; }
.benchmark-tabs a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.benchmark-tabs a:hover { color: var(--text); }
.benchmark-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.benchmark-tabs a span { padding: 2px 5px; color: var(--quiet); background: var(--surface-soft); border-radius: 5px; font-family: var(--mono); font-size: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.local-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-dim); }
.icon-button { display: grid; width: 33px; height: 33px; place-items: center; padding: 0; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: color .2s, border-color .2s, transform .2s; }
.icon-button:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.workspace-layout { display: grid; grid-template-columns: minmax(230px, 275px) minmax(0, 1fr); gap: clamp(28px, 5vw, 78px); width: min(1540px, 100%); margin: 0 auto; padding: 34px clamp(18px, 4vw, 62px) 70px; }
.case-rail { position: sticky; top: 100px; align-self: start; min-height: calc(100vh - 140px); padding: 2px 0 20px; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.overline, .section-kicker { color: var(--quiet); font-family: var(--mono); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.rail-count { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.rail-description { max-width: 235px; margin: 0 0 19px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.search-field { display: block; margin-bottom: 13px; }
.search-field span { display: block; margin-bottom: 5px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.search-field input { width: 100%; height: 34px; padding: 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; outline: none; font-size: 11px; }
.search-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.case-nav { display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 280px); overflow: auto; padding-right: 4px; }
.case-nav-item { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) 7px; gap: 9px; align-items: center; width: 100%; min-height: 54px; padding: 8px 9px; color: var(--muted); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.case-nav-item:hover { color: var(--text); background: var(--surface-soft); border-color: var(--line); transform: translateX(2px); }
.case-nav-item.is-active { color: var(--text); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: inset 3px 0 var(--accent); }
.case-nav-number { align-self: start; padding-top: 2px; color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.case-nav-item.is-active .case-nav-number { color: var(--accent); }
.case-nav-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.case-nav-copy strong { overflow: hidden; color: inherit; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.case-nav-copy span { overflow: hidden; color: var(--quiet); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.difficulty-dot { width: 7px; height: 7px; border-radius: 50%; }
.difficulty-dot.difficulty-easy, .difficulty-easy span { background: var(--accent); }
.difficulty-dot.difficulty-medium, .difficulty-medium span { background: var(--amber); }
.difficulty-dot.difficulty-hard, .difficulty-hard span { background: var(--rose); }
.nav-empty { padding: 8px; color: var(--quiet); font-size: 10px; }
.rail-footer { position: absolute; bottom: 15px; left: 0; display: flex; align-items: flex-start; gap: 9px; max-width: 240px; padding-top: 14px; color: var(--quiet); border-top: 1px solid var(--line); }
.rail-footer-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; color: var(--accent); background: var(--accent-dim); border-radius: 7px; font-size: 16px; }
.rail-footer strong, .rail-footer span { display: block; }
.rail-footer strong { margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.rail-footer span { font-size: 9px; }

.case-main { min-width: 0; }
.case-article { max-width: 1080px; margin: 0 auto; animation: enter .26s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.case-hero { padding: 7px 0 30px; }
.hero-topline { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 21px; color: var(--quiet); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-layout { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.hero-copy { min-width: 0; }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 11px; }
.family-chip, .difficulty-chip, .split-chip, .weight-badge, .advisory-badge, .fatal-label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 9px; font-weight: 650; letter-spacing: .01em; }
.family-chip { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 23%, var(--line)); }
.difficulty-chip { color: var(--muted); background: var(--surface-soft); }
.difficulty-chip span { width: 6px; height: 6px; border-radius: 50%; }
.split-chip { color: var(--violet); background: var(--violet-dim); }
.hero-copy h1 { max-width: 820px; margin: 0; color: var(--text); font-size: clamp(31px, 4.6vw, 58px); font-weight: 790; letter-spacing: -.065em; line-height: 1.03; }
.hero-description { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.hero-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding-bottom: 2px; }
.secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer; transition: .18s; }
.secondary-button { color: var(--bg-deep); background: var(--accent); border: 1px solid var(--accent); font-size: 10px; font-weight: 750; }
.secondary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-button span { font-size: 14px; font-weight: 400; }
.ghost-button { color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 10px; }
.ghost-button:hover { color: var(--text); background: var(--surface-soft); border-color: var(--line-strong); }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.45fr; gap: 7px; margin-top: 27px; }
.signal-card { min-height: 78px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.signal-card > span { display: block; margin-bottom: 6px; color: var(--quiet); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.signal-card strong { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.signal-card code { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.difficulty-text-easy { color: var(--accent); }.difficulty-text-medium { color: var(--amber); }.difficulty-text-hard { color: var(--rose); }
.score-bar { display: flex; height: 6px; margin: 13px 0 8px; overflow: hidden; background: var(--violet-dim); border-radius: 999px; }
.score-bar span { display: block; background: var(--accent); }
.score-legend { display: flex; justify-content: space-between; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.score-legend b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.score-legend i { width: 6px; height: 6px; border-radius: 50%; }.hard-dot { background: var(--accent); }.judge-dot { background: var(--violet); }

.section-block { margin-top: 32px; }
.section-heading, .panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-heading h2, .panel-heading h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.035em; }
.section-heading h3, .panel-heading h3 { margin: 4px 0 0; font-size: 15px; letter-spacing: -.02em; }
.section-count { color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.task-copy { max-width: 920px; padding: 18px 20px; color: var(--text); background: var(--surface); border-left: 3px solid var(--accent); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 8px; font-size: 14px; line-height: 1.7; }
.task-copy p { margin: 0; white-space: pre-line; }
.boundary-line { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 11px; padding: 9px 11px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; line-height: 1.5; }
.boundary-mark { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; color: var(--accent); background: var(--accent-dim); border-radius: 5px; font-size: 10px; }
.json-view, .json-inline, .prompt-copy { margin: 0; overflow: auto; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 10px; line-height: 1.55; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.json-view { max-height: 450px; padding: 15px 16px; }
.json-inline { max-height: 320px; padding: 11px 12px; }
.prompt-copy { max-height: 440px; padding: 15px 16px; white-space: pre-wrap; }
.empty-state { margin: 0; padding: 13px 14px; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: 7px; font-size: 11px; }

.file-list { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.file-row { display: grid; grid-template-columns: 29px 29px minmax(0, 1fr) 145px; gap: 11px; align-items: start; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-index { padding-top: 4px; color: var(--quiet); font-family: var(--mono); font-size: 9px; }
.file-kind { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; font-family: var(--mono); font-size: 15px; font-weight: 700; }
.role-measured-pattern { color: var(--accent); background: var(--accent-dim); }.role-candidate-structure, .role-initial-structure { color: var(--violet); background: var(--violet-dim); }.role-distractor-candidate { color: var(--rose); background: var(--rose-dim); }.role-instrument-parameters { color: var(--amber); background: var(--amber-dim); }
.file-main { min-width: 0; }.file-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }.file-target { overflow-wrap: anywhere; color: var(--text); font-size: 11px; font-weight: 650; }.role-chip { padding: 3px 6px; border-radius: 5px; font-family: var(--mono); font-size: 8px; font-weight: 650; }.file-source { overflow: hidden; margin-top: 5px; color: var(--quiet); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.file-hash { margin-top: 7px; color: var(--quiet); font-family: var(--mono); font-size: 8px; }.file-hash summary { width: fit-content; cursor: pointer; list-style: none; }.file-hash summary::-webkit-details-marker { display: none; }.file-hash summary::before { display: inline-block; margin-right: 4px; color: var(--accent); content: "+"; }.file-hash[open] summary::before { content: "−"; }.file-hash summary span { color: var(--quiet); }.file-hash > code { display: block; max-width: 100%; margin-top: 5px; overflow-wrap: anywhere; color: var(--muted); font-size: 8px; line-height: 1.4; }
.file-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.file-action { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 0 7px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-family: var(--mono); font-size: 8px; font-weight: 650; text-decoration: none; }.file-action span { color: var(--accent); font-size: 11px; line-height: 1; }.file-action:hover { color: var(--text); border-color: var(--accent); }.file-role-label { padding-top: 4px; color: var(--quiet); font-size: 10px; text-align: right; }

.contract-section { margin-top: 30px; }.contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 9px; }.contract-block { min-width: 0; padding: 14px; background: var(--surface); }.contract-schema { grid-column: 1 / -1; }.contract-label, .truth-grid span, .normalization-grid > div > span, .metric-snapshots > div > span { display: block; margin-bottom: 7px; color: var(--quiet); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.contract-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }.contract-row > .contract-label { flex: 0 0 100%; }.contract-row strong { color: var(--text); font-size: 12px; }.contract-row .muted { color: var(--muted); font-family: var(--mono); font-size: 9px; }.source-note { margin: 9px 0 0; color: var(--quiet); font-size: 9px; line-height: 1.5; }.source-note code { color: var(--muted); }.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }.tag, .tool-tag, .skill-tag { display: inline-flex; align-items: center; padding: 4px 6px; color: var(--accent); background: var(--accent-dim); border-radius: 5px; font-family: var(--mono); font-size: 9px; font-weight: 650; }.tool-tag { color: var(--violet); background: var(--violet-dim); }.skill-tag { color: var(--amber); background: var(--amber-dim); }

.evaluation-section { margin-top: 40px; }.method-summary { margin-bottom: 11px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 8px; }.method-summary strong { color: var(--text); font-size: 13px; }.method-summary p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.option-review, .objective-block, .ground-truth-block, .judge-panel, .e2e-eval-block { margin-top: 11px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }.option-list { border-top: 1px solid var(--line); }.option-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; }.option-row:last-child { border-bottom: 0; }.option-row code { color: var(--quiet); font-weight: 700; }.option-row strong { color: var(--quiet); font-family: var(--mono); font-size: 8px; font-weight: 600; }.option-row.is-correct { color: var(--text); }.option-row.is-correct code, .option-row.is-correct strong { color: var(--accent); }.objective-block .panel-heading, .option-review .panel-heading { margin-bottom: 10px; }
.normalization-block { margin-top: 11px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }.normalization-block .panel-heading { margin-bottom: 7px; }.normalization-block .json-inline { max-height: 180px; margin-top: 10px; }
.weight-badge { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); white-space: nowrap; }.advisory-badge { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 22%, var(--line)); white-space: nowrap; }.fatal-label { color: var(--rose); background: var(--rose-dim); border-color: color-mix(in srgb, var(--rose) 22%, var(--line)); white-space: nowrap; }
.table-scroll { overflow-x: auto; }.metric-table { width: 100%; min-width: 600px; border-collapse: collapse; }.metric-table th { padding: 0 8px 8px; color: var(--quiet); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }.metric-table td { padding: 9px 8px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; vertical-align: top; }.metric-table td:first-child { color: var(--text); }.metric-table code { font-size: 9px; }.direction { white-space: nowrap; }.direction-higher { color: var(--violet); }.direction-lower { color: var(--accent); }
.normalization-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }.normalization-grid > div, .metric-snapshots > div { min-width: 0; }.normalization-grid .json-inline { max-height: 190px; }.truth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }.truth-grid > div { min-width: 0; }.truth-grid span { margin-bottom: 4px; }.truth-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.oracle-details, .policy-details { margin-top: 11px; border-top: 1px solid var(--line); }.oracle-details summary, .policy-details summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0 3px; color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }.oracle-details summary::-webkit-details-marker, .policy-details summary::-webkit-details-marker { display: none; }.summary-hint { color: var(--quiet); font-family: var(--mono); font-size: 8px; font-weight: 500; }.summary-hint span { display: inline-block; margin-left: 4px; color: var(--accent); transition: transform .2s; }.oracle-details[open] .summary-hint span, .policy-details[open] .summary-hint span { transform: rotate(180deg); }.oracle-copy { padding-top: 10px; }.judge-panel { margin-top: 12px; }.panel-intro { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.6; }.judge-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; padding: 9px 0; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; }.judge-meta code { color: var(--accent); font-size: 8px; }.policy-copy { padding: 9px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.65; }.policy-copy p { margin: 0; }.policy-callout { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 10px; color: var(--accent); background: var(--accent-dim); border-radius: 7px; font-size: 9px; line-height: 1.5; }.policy-callout strong { flex: 0 0 auto; font-family: var(--mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }.dimension-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }.dimension-row { min-height: 112px; padding: 11px; background: var(--surface-soft); }.dimension-number { display: block; margin-bottom: 9px; color: var(--violet); font-family: var(--mono); font-size: 8px; font-weight: 700; }.dimension-row strong { display: block; color: var(--text); font-size: 10px; line-height: 1.3; }.dimension-row code { display: block; margin-top: 3px; overflow-wrap: anywhere; color: var(--violet); font-size: 8px; }.dimension-row p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.execution-strip { display: grid; grid-template-columns: minmax(210px, .82fr) minmax(0, 1.75fr); gap: 20px; align-items: center; margin-top: 30px; padding: 16px 17px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }.execution-intro strong { display: block; margin-top: 5px; font-size: 12px; }.execution-intro p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.execution-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.execution-items > div { min-width: 0; padding-left: 10px; border-left: 1px solid var(--line); }.execution-items span:first-child { display: block; margin-bottom: 4px; color: var(--quiet); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.execution-items code, .execution-items strong { display: block; overflow: hidden; color: var(--text); font-size: 8px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; }.execution-items code { color: var(--accent); }.artifact-list { border-top: 1px solid var(--line); }.artifact-row { padding: 10px 0; border-bottom: 1px solid var(--line); }.artifact-row code { color: var(--text); font-size: 9px; font-weight: 650; }.artifact-row p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.fatal-output { margin-top: 11px; }.fatal-output > span { display: block; margin-bottom: 6px; color: var(--quiet); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.fatal-output code { margin-right: 4px; padding: 4px 5px; color: var(--rose); background: var(--rose-dim); border-radius: 4px; font-size: 8px; }.metric-snapshots { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }.metric-snapshots > div { padding: 10px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; }.metric-snapshots .json-inline { border: 0; background: transparent; padding: 0; max-height: 180px; }.compact-heading { align-items: center; }
.case-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 22px; padding: 0 2px; color: var(--quiet); font-family: var(--mono); font-size: 8px; }.case-footer code { color: var(--muted); }

body.preview-open { overflow: hidden; }.preview-modal { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 22px; }.preview-modal.is-open { display: flex; }.preview-backdrop { position: absolute; inset: 0; background: rgba(8, 16, 24, .65); backdrop-filter: blur(7px); }.preview-dialog { position: relative; display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(760px, calc(100vh - 44px)); overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 25px 70px rgba(0, 0, 0, .25); }.preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }.preview-header h2 { max-width: 760px; margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.4; }.preview-subtitle { margin: 5px 0 0; color: var(--muted); font-family: var(--mono); font-size: 9px; }.preview-close { width: 29px; height: 29px; flex: 0 0 auto; font-size: 18px; line-height: 1; }.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 20px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }.preview-state { color: var(--muted); font-family: var(--mono); font-size: 9px; }.preview-state.is-truncated { color: var(--amber); }.preview-toolbar .secondary-button { min-height: 29px; font-size: 9px; white-space: nowrap; }.preview-content { min-height: 160px; margin: 0; padding: 18px 20px 24px; overflow: auto; color: var(--muted); background: var(--surface-soft); font-family: var(--mono); font-size: 10px; line-height: 1.5; tab-size: 2; white-space: pre; }.toast { position: fixed; right: 18px; bottom: 18px; z-index: 30; padding: 10px 12px; color: var(--bg-deep); background: var(--accent); border-radius: 7px; box-shadow: var(--shadow); font-size: 10px; font-weight: 750; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }

.landing-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }.landing-shell { width: min(900px, 100%); }.landing-shell h1 { max-width: 680px; margin: 8px 0 10px; font-size: clamp(38px, 7vw, 70px); letter-spacing: -.07em; line-height: 1; }.landing-lede { max-width: 620px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }.landing-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 35px; }.landing-link { display: flex; flex-direction: column; gap: 9px; padding: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; transition: border-color .18s, transform .18s, box-shadow .18s; }.landing-link:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }.landing-link-kicker { color: var(--quiet); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }.landing-link strong { font-size: 19px; }.landing-link > span:last-child { color: var(--muted); font-size: 11px; line-height: 1.55; }

@media (max-width: 1120px) { .workspace-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 30px; }.signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.execution-strip { grid-template-columns: 1fr; }.execution-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .topbar { flex-wrap: wrap; gap: 9px 16px; padding-top: 9px; padding-bottom: 8px; }.suite-switcher { order: 3; flex: 1 0 100%; gap: 8px; }.suite-switch-label { flex: 0 0 auto; }.benchmark-tabs { flex: 1 1 auto; overflow-x: auto; }.benchmark-tabs a { min-height: 32px; padding: 0 8px; font-size: 10px; }.local-badge { display: none; }.workspace-layout { display: block; padding: 20px 18px 52px; }.case-rail { position: static; min-height: 0; padding-bottom: 18px; }.rail-description, .rail-footer { display: none; }.case-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 225px; gap: 4px; }.case-nav-item { grid-template-columns: 25px minmax(0, 1fr); min-height: 52px; padding: 7px; }.case-nav-item .difficulty-dot { display: none; }.case-nav-copy strong { font-size: 9px; white-space: normal; line-height: 1.25; }.case-nav-copy span { display: none; }.hero-layout { display: block; }.hero-actions { margin-top: 18px; }.file-row { grid-template-columns: 22px 29px minmax(0, 1fr); gap: 8px; }.file-role-label { display: none; }.evaluation-grid, .contract-grid { grid-template-columns: 1fr; }.contract-schema { grid-column: auto; }.normalization-grid, .truth-grid { grid-template-columns: 1fr; }.execution-items { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 15px; }.case-footer { display: block; line-height: 1.8; }.case-footer span { display: block; } }
@media (max-width: 540px) { .brand-version, .brand-divider { display: none; }.brand { font-size: 14px; }.hero-copy h1 { font-size: 37px; }.hero-description { font-size: 11px; }.signal-grid { grid-template-columns: 1fr 1fr; }.signal-card:nth-child(3), .signal-card:nth-child(4) { grid-column: 1 / -1; }.dimension-grid { grid-template-columns: 1fr 1fr; }.dimension-row:last-child { grid-column: 1 / -1; }.option-row { grid-template-columns: 23px minmax(0, 1fr); }.option-row strong { grid-column: 2; }.preview-modal { padding: 9px; }.preview-dialog { max-height: calc(100vh - 18px); }.preview-header { padding: 15px 14px 12px; }.preview-toolbar { align-items: flex-start; flex-direction: column; padding: 9px 14px; }.preview-content { padding: 14px; font-size: 9px; }.landing-links { grid-template-columns: 1fr; margin-top: 25px; } }

/* Keep dense evaluator tables scrollable without widening the mobile page. */
.e2e-eval-block { min-width: 0; }
.table-scroll { width: 100%; max-width: 100%; }
.fatal-output > div { display: flex; flex-wrap: wrap; gap: 4px; }
.fatal-output code { display: inline-block; max-width: 100%; margin-right: 0; overflow-wrap: anywhere; }
@media (max-width: 540px) { .file-source { overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } }