:root {
  color-scheme: dark;
  --bg: #07090d;
  --card: rgba(18, 24, 34, .82);
  --card-strong: rgba(24, 33, 47, .96);
  --line: rgba(220, 232, 255, .15);
  --line-strong: rgba(123, 169, 255, .42);
  --text: #f7f9fd;
  --muted: #a8b3c7;
  --subtle: #748197;
  --blue: #92bbff;
  --cyan: #70ecff;
  --green: #90e8b4;
  --amber: #ffd47d;
  --radius: 26px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 5%, rgba(112,236,255,.17), transparent 32rem),
    radial-gradient(circle at 90% 0%, rgba(146,187,255,.18), transparent 36rem),
    linear-gradient(140deg, #06080c, #0c1118 58%, #07090d);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
a { color: inherit; }
.benchmark-hero, main { width: min(1760px, calc(100% - 32px)); margin: 0 auto; }
.benchmark-hero { min-height: 58vh; padding: 44px 0 28px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: end; }
.eyebrow { margin: 0 0 .8rem; color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; font-size: .76rem; }
h1 { margin: 0; max-width: 1000px; font-size: clamp(2.8rem, 7vw, 7.6rem); line-height: .88; letter-spacing: -.075em; }
.lede { max-width: 870px; margin: 1.4rem 0 0; color: #c7d1e3; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.62; }
.winner-card, .method-card, .score-card, .preview-card, .rubric {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(22, 29, 41, .86), rgba(10, 14, 20, .86));
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(20px);
}
.winner-card { padding: 1.25rem; }
.label, .method-grid span, .preview-head span { color: var(--subtle); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 850; }
.winner-card strong { display:block; margin:.35rem 0; font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing:-.07em; color: var(--green); }
.winner-card p, .method-grid p, .score-card li { color: var(--muted); line-height: 1.55; }
.method-card, .scoreboard, .comparison, .rubric { margin-top: 24px; }
.method-card { padding: 1.25rem; }
h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.8rem); letter-spacing: -.055em; }
.method-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; }
.method-grid div { border:1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(255,255,255,.035); }
.method-grid strong { display:block; margin:.35rem 0; }
.section-head { margin-bottom: 1rem; display:flex; justify-content:flex-start; gap: 1rem; align-items:flex-start; }
.scores { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.score-card { padding: 1.2rem; }
.score-card.winner { border-color: rgba(144,232,180,.42); box-shadow: 0 20px 80px rgba(91, 219, 146, .08); }
.score-top { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.score-top h3, .preview-head h3 { margin:0; font-size:1.35rem; }
.score-top strong { font-size: 4rem; letter-spacing: -.08em; line-height:.9; }
.claude .score-top strong { color: var(--blue); }
.codex .score-top strong { color: var(--green); }
ul { padding-left: 1.1rem; margin: 1rem 0 0; }
li + li { margin-top:.45rem; }
.preview-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items:start; }
.preview-card { overflow:hidden; }
.preview-card.highlight { border-color: rgba(144,232,180,.46); }
.preview-head { min-height: 78px; display:flex; justify-content:space-between; align-items:center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.035); }
.preview-head a { text-decoration:none; border:1px solid var(--line-strong); border-radius:999px; padding:.58rem .8rem; color:#dbe6fb; white-space:nowrap; }
iframe { width:100%; height: 760px; border:0; background:#06080c; display:block; }
.rubric { padding: 1.2rem; overflow:auto; }
table { width:100%; border-collapse: collapse; min-width: 780px; }
th, td { text-align:left; padding: .95rem; border-bottom:1px solid var(--line); vertical-align: top; }
th { color: var(--cyan); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
td { color:#dbe3f2; }
td:nth-child(2), td:nth-child(3) { font-weight:850; color: var(--text); white-space:nowrap; }
@media (max-width: 1000px) {
  .benchmark-hero, .method-grid, .scores, .preview-grid { grid-template-columns: 1fr; }
  .benchmark-hero { min-height: auto; align-items:start; }
  iframe { height: 680px; }
}
@media (max-width: 560px) {
  .benchmark-hero, main { width: min(100% - 20px, 1760px); }
  h1 { font-size: 2.9rem; }
  .preview-head { flex-direction: column; align-items: flex-start; }
  iframe { height: 620px; }
}