:root {
  color-scheme: light dark;
  --canvas:#eef3f8; --panel:#fff; --text:#18263b; --muted:#4c607a; --border:#cfd9e6;
  --surface:#f4f7fb; --accent:#174a81; --chip:#e0eefa; --leader:#e8f5ed; --focus:#206ac2;
}
@media (prefers-color-scheme:dark) {
  :root {
    --canvas:#0d1725; --panel:#192638; --text:#eaf0f9; --muted:#b7c5d9; --border:#3a4a61;
    --surface:#202e43; --accent:#b1d4ff; --chip:#254365; --leader:#204637; --focus:#a9d1ff;
  }
}
* { box-sizing:border-box }
body { margin:0; color:var(--text); background:var(--canvas); font:16px/1.5 system-ui,sans-serif }
main { width:min(1220px,100%); margin:auto; padding:clamp(16px,4vw,42px) clamp(12px,4vw,34px) 48px }
h1,p { margin:0 }
h1 { font-size:clamp(27px,5vw,46px); line-height:1.12; letter-spacing:-.033em }
.description { margin-top:10px; color:var(--muted); max-width:74ch }
.totals { margin-top:13px; font-weight:700; color:var(--accent) }
.overviews { display:grid; gap:6px }
.overview { padding:8px 12px; background:var(--panel); border:1px solid var(--border); border-radius:9px }
.overview > summary { cursor:pointer; font-weight:650 }
.overview .table-scroll { margin-top:7px }
.overview table { min-width:950px }
.ranges { font-size:.83rem; color:var(--muted); margin-top:5px }
form { display:grid; grid-template-columns:minmax(180px,2fr) minmax(115px,1fr) minmax(224px,1.2fr) minmax(115px,1fr) auto; gap:10px; align-items:end; margin:23px 0 9px }
label { display:grid; gap:4px; min-width:0; font-size:.84rem; font-weight:650; color:var(--muted) }
input,select,button { border:1px solid var(--border); border-radius:7px; padding:8px 9px; height:40px; color:var(--text); background:var(--panel); font:inherit; font-size:.91rem; width:100% }
button { cursor:pointer; background:var(--chip); color:var(--accent); font-weight:650; width:auto }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px }
.status { margin:0 0 11px; color:var(--muted); font-size:.87rem; min-height:1.3em }
.record { border:1px solid var(--border); border-radius:10px; background:var(--panel); margin:0 0 9px }
.record[open] { border-color:var(--focus) }
.record-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 13px; cursor:pointer; list-style:none }
.record-summary::-webkit-details-marker { display:none }
.record-file { font:700 .91rem/1.3 ui-monospace,monospace; white-space:nowrap }
.record-file::before { display:inline-block; content:'▸'; margin-right:7px; color:var(--accent) }
.record[open] .record-file::before { transform:rotate(90deg) }
.record-meta { color:var(--muted); font-size:.86rem }
.record-score { color:var(--accent); background:var(--chip); border-radius:5px; padding:3px 7px; font-size:.77rem; font-weight:700; white-space:nowrap }
.record-content { padding:0 13px 13px }
.listening { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr); gap:14px; background:var(--surface); border-radius:7px; padding:12px }
.eyebrow { font-weight:700; color:var(--muted); font-size:.79rem; margin-bottom:4px }
.reference p + p { overflow-wrap:anywhere }
audio { display:block; width:100%; height:43px }
.case-leader { margin:10px 0 7px; color:var(--muted); font-size:.88rem }
.case-leader strong { color:var(--text) }
.table-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:7px }
table { width:100%; min-width:610px; border-collapse:collapse; font-size:.88rem; font-variant-numeric:tabular-nums }
thead { background:var(--surface) }
th,td { padding:7px 9px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top }
tbody tr:last-child th,tbody tr:last-child td { border-bottom:0 }
td:not(:last-child),thead th { white-space:nowrap }
th[scope="row"] { font-weight:650; width:22% }
td:last-child { min-width:145px; width:35% }
td small { display:block; color:var(--muted); font-size:.73rem }
.leader { background:var(--leader) }
.transcript summary { cursor:pointer; color:var(--accent); white-space:nowrap }
.transcript p { margin-top:5px; overflow-wrap:anywhere }
footer { color:var(--muted); font-size:.85rem; margin-top:20px; max-width:85ch }
@media (max-width:860px) {
  form { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"query query" "topic topic" "length noise" "reset reset" }
  form label:has(#query) { grid-area:query }
  form label:has(#topic) { grid-area:topic }
  form label:has(#length) { grid-area:length }
  form label:has(#noise) { grid-area:noise }
  form button { grid-area:reset }
}
@media (max-width:760px) { .listening { grid-template-columns:1fr } }
@media (max-width:470px) {
  .record-summary { grid-template-columns:minmax(0,1fr) auto; gap:5px 9px }
  .record-meta { grid-row:2; grid-column:1/-1; padding-left:14px }
  .record-score { grid-row:1; grid-column:2 }
}

/* Paired technical vocabulary experiment */
a{color:var(--accent)}form{grid-template-columns:minmax(150px,1.3fr) minmax(100px,.8fr) minmax(140px,1fr) minmax(100px,.8fr) minmax(180px,1.2fr) auto}.table-scroll small{display:block;color:var(--muted);font-size:.73rem}@media(max-width:860px){form{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"query query" "topic model" "length noise" "reset reset"}form label:has(#model){grid-area:model}}
.paired-text{display:grid;grid-template-columns:1fr 1fr;gap:16px}.paired-text h4{margin:6px 0}.paired-text p{overflow-wrap:anywhere}.paired-note,.note{color:var(--muted);margin:12px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}code{overflow-wrap:anywhere}.historical{margin-top:14px}.better td:nth-child(2){background:var(--leader)}.paired-text section{min-width:0}.table-scroll td{vertical-align:top}@media(max-width:700px){.paired-text{grid-template-columns:1fr}}