: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}

#return-live { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:2; background:var(--accent); color:var(--bg); box-shadow:0 2px 12px #0003; }
.captions { overflow-anchor:none; }

/* A compact listener toolbar, with reading controls separate from broadcast state. */
[hidden]{display:none!important}
.listener-brand{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
header{max-width:58rem;width:100%;margin:auto;padding:24px 20px;border:0;align-items:flex-start}header h1{font-size:1.4rem;line-height:1.3;overflow-wrap:anywhere}header>div{min-width:0}
main{padding-top:8px;max-width:58rem}.controls{position:sticky;top:0;z-index:1;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;padding:12px 0;gap:8px;align-items:start}.controls button{font-size:.95rem}.controls #change{text-align:left;overflow-wrap:anywhere}.listener-settings{min-width:0}.listener-settings summary{min-height:48px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;font-weight:600}.settings-content{position:absolute;right:0;left:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 8px 24px #0002}.settings-content p{font-size:.85rem;margin-bottom:0}.settings-content label{display:flex;gap:12px;align-items:center;margin-bottom:16px}.settings-content input{min-width:0;flex:1;min-height:44px}.size{justify-content:flex-start;margin:0;gap:12px}.size button{min-width:56px}
.captions{gap:12px;line-height:1.55}.seg,.seg.old,.seg.partial{opacity:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;overflow-wrap:anywhere}.seg.partial{color:var(--muted);border-style:dashed}.seg::before{content:attr(data-time);display:block;font-size:.75rem;color:var(--muted);line-height:1.5;margin-bottom:6px}.seg[data-time=""]::before{display:none}.seg[data-playing=true]{border-color:var(--accent);box-shadow:inset 4px 0 var(--accent)}.seg[data-playing=true]::before{content:attr(data-time) ' · Playing audio';display:block;color:var(--accent)}
.skip-link{position:absolute;top:-100px;left:16px;z-index:5;background:var(--card);color:var(--fg);padding:12px}.skip-link:focus{top:12px}#return-live{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);min-width:220px}#captions:focus{outline:none}#audio-status{font-size:.9rem}
@media(max-width:700px){header{padding-top:20px}header h1{font-size:1.2rem}.controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.controls>button,.listener-settings summary{width:100%;font-size:.9rem}.pill{font-size:.75rem;padding:6px 10px}main{padding-inline:16px}.seg,.seg.old,.seg.partial{padding:16px}.langs{grid-template-columns:1fr}.captions{padding-bottom:24vh}}
button.ghost[aria-pressed=true]{background:var(--accent);color:var(--bg)}
/* Phone-first listening desk: language, audio, then optional reading tools. */
header{padding-top:max(24px,env(safe-area-inset-top));gap:16px}header .pill{font-size:.7rem;margin-top:4px}
#pick{max-width:640px;width:100%;margin:16px auto;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
#pick h2{font-size:1.8rem}#pick .eyebrow{margin-top:0}#pick>.muted{margin-bottom:20px}
.langs{grid-template-columns:1fr 1fr;gap:10px}.langs button{font-size:1rem;min-height:60px;border-radius:10px;padding:14px 36px 14px 16px}
.langs button[aria-pressed=true]:after{content:'✓';color:inherit}
.controls{grid-template-columns:minmax(0,1fr) minmax(110px,auto);gap:10px;padding:12px 0;align-items:stretch;top:0;margin-bottom:16px}
.controls #change{position:relative;background:var(--card);padding:10px 38px 10px 14px;min-height:64px;border-color:var(--line)}
.control-caption{display:block;color:var(--muted);font-size:.7rem;margin-bottom:2px}#lang-label{font-weight:600}.language-chevron{position:absolute;right:16px;top:24px}
.controls #audio{font-weight:600;background:var(--card);display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px}
#audio::before{content:'▶';font-size:.75rem}#audio[aria-pressed=true]::before{content:'Ⅱ'}
.controls #audio[aria-pressed=true]{background:var(--accent);color:var(--bg)}
.listener-settings{grid-column:1/-1}.listener-settings>summary{font-size:.85rem!important}.settings-content{position:static;box-shadow:none;margin-top:8px;padding:16px;background:var(--card)}
.settings-content #reading-pause{width:100%;margin-bottom:16px}.settings-content .size{margin-top:12px}.settings-content .size button{flex:1}.settings-content input[type=range]{accent-color:var(--accent)}
#audio-status{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:.85rem}
#audio-resume{margin-bottom:16px;border-color:var(--accent);font-weight:600;width:100%}
#waiting{padding:28px 20px;border:1px dashed var(--line);border-radius:14px;text-align:center;font-size:.95rem}
#language-dialog{width:calc(100% - 32px);max-width:520px;max-height:80dvh;overflow-y:auto;padding:24px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:18px}
#language-dialog::backdrop{background:#102c2666}.language-dialog-heading{display:flex;gap:16px;align-items:flex-start}.language-dialog-heading>div{flex:1}.language-dialog-heading .eyebrow{margin:0 0 8px;font-size:.7rem}.language-dialog-heading h2{font-size:1.3rem;line-height:1.3;margin:0}.language-dialog-heading button{min-width:48px;padding:8px;flex-shrink:0}#language-dialog>.muted{font-size:.85rem;margin:12px 0 20px}
@media(max-width:480px){.langs{grid-template-columns:1fr}#pick{padding:20px;margin-top:8px}header{flex-wrap:wrap}header h1{font-size:1.25rem}.controls #audio{font-size:.9rem;padding-inline:12px}.controls #change{font-size:.95rem}.listener-note{padding-bottom:env(safe-area-inset-bottom)}#language-dialog{padding:20px}}
@media(prefers-reduced-motion:no-preference){#language-dialog[open]{animation:listener-dialog-in 180ms ease-out}.langs button{transition:background-color 160ms ease,border-color 160ms ease}@keyframes listener-dialog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
.controls:has(#audio[hidden]) #change{grid-column:1/-1}
#change:disabled{opacity:1;cursor:default}#change:disabled .language-chevron{display:none}
@media(max-width:360px){.controls{grid-template-columns:minmax(0,1fr) 104px}header .pill{margin-top:0}#language-dialog{width:calc(100% - 24px);padding:16px}}