:root { --bg:#f6f7f2; --fg:#182d2b; --muted:#586763; --accent:#176453; --card:#fff; --line:#e4e0d6; --ok:#1f7a3d; --warn:#b36b00; --bad:#b3261e; --size:1.5rem; }
@media (prefers-color-scheme: dark) { :root { --bg:#121110; --fg:#f1eee8; --muted:#a29d92; --accent:#8cd5b5; --card:#1b1a18; --line:#2e2c28; --ok:#5ed08a; --warn:#f0b04a; --bad:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100dvh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
h1 { font-size:1.05rem; margin:0; font-weight:650; }
main { flex:1; width:100%; max-width:46rem; margin:0 auto; padding:1rem; display:flex; flex-direction:column; }
h2 { font-size:1.4rem; margin:.5rem 0 1rem; }
.pill { font-size:.8rem; padding:.2rem .65rem; border-radius:99px; border:1px solid var(--line); background:var(--card); white-space:nowrap; }
.pill::before { content:"●"; margin-right:.4rem; color:var(--warn); }
.pill[data-state=live]::before { color:var(--ok); } .pill[data-state=offline]::before { color:var(--bad); }
.langs { display:grid; gap:.75rem; }
.langs button { font-size:1.35rem; padding:1.1rem 1.25rem; text-align:left; }
button { font:inherit; cursor:pointer; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:.55rem .9rem; min-height:44px; }
button:hover { border-color:var(--accent); } button[aria-pressed=true] { background:var(--accent); color:var(--bg); border-color:var(--accent); }
button.ghost { background:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.size { margin-left:auto; display:flex; gap:.25rem; }
.captions { display:flex; flex-direction:column; gap:1rem; font-size:var(--size); line-height:1.35; padding-bottom:30vh; }
.seg { margin:0; transition:opacity .15s; } .seg.partial { opacity:.6; } .seg.old { opacity:.55; }
.muted { color:var(--muted); } .error { color:var(--bad); font-weight:600; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .seg { transition:none; } }

.eyebrow{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:30px 0 14px}
#pick h2{font-size:clamp(2rem,6vw,2.8rem);letter-spacing:-.04em;font-weight:550;line-height:1.15}
#pick>.muted{margin-bottom:30px}.langs{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.langs button{border-radius:14px;min-height:76px;position:relative;padding-right:40px}.langs button:after{content:'→';position:absolute;right:20px;color:var(--accent)}
header{padding:20px max(20px,calc((100vw - 1050px)/2))}main{padding:28px 20px}.listener-note{font-size:.75rem;text-align:center;margin-top:auto;padding-top:30px}.controls{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:24px}button{min-height:48px}.pill{padding:6px 12px}button:active{opacity:.8}

.captions:empty{display:none}