:root {
  --bg:#0c0a0e; --surface:#16131a; --surface-2:#1e1a23; --line:#ffffff14; --line-strong:#ffffff26;
  --text:#efebe5; --muted:#9a95a3; --faint:#615c69;
  --warm:#f2b544; --warm-2:#e9a52f; --warm-soft:#f2b5441f; --cold:#9fb4d0; --error:#e0685c;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --radius:16px;
  color-scheme:dark; font-family:var(--sans); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; color:var(--text); background:radial-gradient(ellipse 70% 50% at 50% -10%,#f2b54418,transparent 70%),var(--bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; padding:0; }
button:disabled { opacity:.4; cursor:default; }
:focus-visible { outline:2px solid var(--warm); outline-offset:3px; }
input,textarea,select { background:#ffffff08; border:1px solid var(--line-strong); border-radius:12px; }
input:focus,textarea:focus,select:focus { border-color:#f2b54477; outline:none; }
select { width:100%; padding:12px 14px; min-height:46px; font-size:14px; }
[hidden] { display:none!important; }
h1,h2,p { margin:0; }

/* Header */
.header { position:sticky; top:0; z-index:5; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1100px)/2)); background:#0c0a0ecc; backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:10px; font:22px var(--serif); letter-spacing:-.4px; }
.mark { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 50% 40%,#ffd98a,var(--warm) 60%,#c9862a); box-shadow:0 0 18px #f2b544aa; }
.header nav { display:flex; align-items:center; gap:4px; }
.nav-button { font-size:14px; color:var(--muted); padding:8px 14px; border-radius:999px; transition:color .15s,background .15s; }
.nav-button:hover { color:var(--text); }
.nav-button.active { color:var(--text); background:#ffffff10; }
.theme-button { width:38px; height:38px; border-radius:50%; font-size:18px; color:var(--muted); }
.theme-button:hover { background:#ffffff10; color:var(--text); }

/* Layout and type */
.screen { max-width:1100px; margin:auto; padding:40px 24px 64px; animation:enter .25s ease-out; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
h1 { font:400 clamp(36px,5vw,52px)/1.1 var(--serif); letter-spacing:-1.2px; }
.muted { color:var(--muted); font-size:14px; line-height:1.6; }
.small { font-size:13px; }
.back-button { color:var(--muted); font-size:14px; margin-bottom:18px; }
.back-button:hover { color:var(--text); }

/* Buttons */
.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:12px 24px; border-radius:999px; font-size:15px; font-weight:600; transition:transform .18s,box-shadow .2s,background .15s,border-color .15s; }
.primary { color:#21170a; background:linear-gradient(180deg,#f7c766,var(--warm-2)); box-shadow:0 8px 26px -12px #f2b544cc,inset 0 1px 0 #fff6; }
.primary:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 12px 32px -12px #f2b544ee,inset 0 1px 0 #fff6; }
.secondary { border:1px solid var(--line-strong); background:#ffffff08; font-weight:500; }
.secondary:not(:disabled):hover { background:#ffffff12; border-color:#ffffff40; }
.text-button { color:var(--muted); font-size:14px; padding:10px 4px; }
.text-button:not(:disabled):hover { color:var(--text); }
.icon-button { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted); border:1px solid var(--line-strong); }
.icon-button svg { width:14px; height:14px; fill:currentColor; }
.icon-button:hover { color:var(--text); background:#ffffff10; }

/* Library */
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.script-card { position:relative; display:flex; flex-direction:column; gap:8px; min-height:170px; padding:26px; text-align:left; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(160deg,var(--surface-2),var(--surface) 70%); box-shadow:0 20px 50px -34px #000; transition:transform .22s,border-color .22s,box-shadow .22s; overflow:hidden; }
.script-card:before { content:''; position:absolute; right:-30%; top:-60%; width:80%; height:140%; background:radial-gradient(ellipse,#f2b5441c,transparent 65%); opacity:0; transition:opacity .3s; pointer-events:none; }
.script-card:hover { transform:translateY(-3px); border-color:#f2b5444d; }
.script-card:hover:before { opacity:1; }
.script-card h2 { font:400 32px/1.1 var(--serif); letter-spacing:-.6px; }
.characters { color:var(--muted); font-size:14px; }
.card-footer { margin-top:auto; display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mastery-bar { flex:1; height:5px; border-radius:999px; background:#ffffff10; overflow:hidden; }
.mastery-bar div { height:100%; border-radius:999px; background:linear-gradient(90deg,#c9862a,var(--warm)); box-shadow:0 0 10px #f2b54480; }

/* Import */
.title-input { width:100%; padding:12px 16px; font:24px var(--serif); margin-bottom:16px; }
.import-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#import-text { width:100%; height:420px; padding:18px; font:16px/1.6 var(--serif); resize:vertical; }
.import-preview { height:420px; overflow:auto; padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.import-line { margin-bottom:18px; font:16px/1.55 var(--serif); }
.import-line .speaker { display:block; font:600 11px var(--sans); letter-spacing:1.4px; color:var(--warm); margin-bottom:4px; }
.import-line .direction { display:block; font:italic 13px var(--serif); color:var(--muted); margin-top:4px; }
.bottom-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }

/* Setup */
.setup-screen h1 { margin-bottom:28px; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; }
.setting-group h2,.setting-title { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.segments { display:flex; gap:4px; padding:4px; border-radius:999px; border:1px solid var(--line); background:#ffffff06; }
.segments button { flex:1; min-height:42px; padding:8px 12px; border-radius:999px; font-size:14px; color:var(--muted); transition:background .15s,color .15s; }
.segments button:hover { color:var(--text); }
.segments button[aria-pressed=true] { color:#21170a; font-weight:600; background:linear-gradient(180deg,#f7c766,var(--warm-2)); box-shadow:0 6px 16px -8px #f2b544aa; }
.hiding-sample { margin-top:12px; font:18px/1.5 var(--serif); color:var(--text); letter-spacing:.2px; }
.hiding-sample .said { color:var(--warm); }
.setting-help { margin-top:10px; font-size:13px; color:var(--muted); }
.settings-details { grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; }
.settings-details summary { cursor:pointer; font-size:14px; color:var(--muted); }
.setting-rows { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:16px; }
.setting-rows label { font-size:13px; color:var(--muted); }
.setting-rows select { margin-top:8px; }
.start-panel { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.browser-status { color:var(--error); font-size:14px; }
.start-buttons { display:flex; align-items:center; gap:18px; margin-left:auto; }
.start-buttons .primary { min-width:170px; min-height:52px; font-size:16px; }

/* History */
.history-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; margin-bottom:10px; text-align:left; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:border-color .2s; }
.history-row:hover { border-color:#f2b5444d; }
.history-row h2 { font:400 22px var(--serif); margin-bottom:4px; }
.history-row p { font-size:13px; color:var(--muted); }
.history-score { font:28px var(--serif); color:var(--warm); }
.empty-state { padding:40px 0; font:22px var(--serif); color:var(--muted); }

/* Summary */
.summary-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.summary-heading .muted { margin-top:6px; }
.big-score { text-align:right; }
.stars { display:block; color:var(--warm); font-size:22px; letter-spacing:4px; text-shadow:0 0 18px #f2b54488; }
.big-score>#summary-score { font:72px/1 var(--serif); color:var(--warm); text-shadow:0 0 40px #f2b54455; }
.summary-stats { display:flex; flex-wrap:wrap; gap:16px 40px; padding:20px 24px; border-radius:var(--radius); border:1px solid var(--line); background:#ffffff05; }
.summary-stats strong { display:block; font:28px var(--serif); }
.summary-stats span { font-size:13px; color:var(--muted); }
.summary-actions { display:flex; gap:10px; margin:20px 0 8px; }
.diff-line { padding:22px 0; border-bottom:1px solid var(--line); }
.diff-line-head { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:10px; }
.diff-line-head .score { color:var(--warm); }
.diff-text { font:21px/1.8 var(--serif); }
.change-pair { display:inline-flex; flex-direction:column; line-height:1.25; vertical-align:middle; }
.change-pair small { font:12px var(--serif); color:var(--muted); }
.omit { color:var(--error); }
.changed { color:var(--warm); }
.added { color:var(--muted); }
.inferred { color:var(--warm); border-bottom:1px dotted var(--warm); }
.accepted-match { position:relative; display:inline-block; padding-top:20px; line-height:1.2; }
.accepted-match .correct-word { color:var(--warm); border-bottom:1px dotted var(--warm); }
.heard-bubble { position:absolute; top:0; left:50%; transform:translateX(-50%); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px 7px; border-radius:10px; border:1px solid #9fb4d045; background:var(--surface); color:var(--cold); font:11px/1.3 var(--sans); letter-spacing:0; }

/* Stage */
.stage-screen { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; overflow:hidden; outline:none; background:linear-gradient(90deg,#6e1f3326,transparent 10%,transparent 90%,#6e1f3326),var(--bg); }
.stage-screen:before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 60% 70% at 50% -10%,#f2b5441c,transparent 70%); }
.scene-progress { position:relative; display:flex; gap:3px; width:min(1180px,calc(100% - 40px)); margin:18px auto 0; }
.scene-progress span { flex:1; height:4px; border-radius:999px; background:#ffffff14; transition:background .3s; }
.scene-progress span.failed { background:#e0685c40; }
.scene-progress span.past { background:var(--warm); }
.scene-progress span.current { background:#f2b54488; box-shadow:0 0 10px #f2b54466; }
.stage-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(1180px,calc(100% - 40px)); margin:12px auto 0; font-size:13px; color:var(--muted); }
.stage-meta { display:flex; align-items:center; gap:12px; font-variant-numeric:tabular-nums; }
.streak { padding:3px 10px; border-radius:999px; color:#21170a; font-weight:700; background:linear-gradient(180deg,#f7c766,var(--warm-2)); box-shadow:0 0 16px #f2b54466; animation:pop .35s ease-out; }
.stage-content { position:relative; flex:1; min-height:0; width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:clamp(16px,4vh,44px) 0 8px; display:flex; flex-direction:column; }
.stage-cue { max-width:900px; padding:14px 18px; border-left:3px solid #9fb4d066; border-radius:0 12px 12px 0; background:#9fb4d00d; margin-bottom:clamp(18px,4vh,40px); }
.stage-cue.opening { border-left-color:var(--warm); background:var(--warm-soft); }
.cue-role { display:block; font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--cold); margin-bottom:6px; }
.stage-cue p { font:clamp(17px,1.2vw + .8vh,22px)/1.5 var(--serif); color:#c6cfdc; max-height:7.6em; overflow:hidden; }
.stage-cue.opening p { color:var(--warm); }
.stage-line { position:relative; flex:1; min-height:0; overflow:hidden; }
.stage-line.new-line { animation:turn .32s ease-out; }
.stage-direction { font:italic 15px/1.5 var(--serif); color:var(--muted); margin-bottom:10px; white-space:pre-line; }
.stage-words { font:clamp(26px,1.9vw + 1.4vh,42px)/1.45 var(--serif); letter-spacing:-.2px; overflow-wrap:break-word; }
.stage-words[data-size=long] { font-size:clamp(22px,1.4vw + 1.1vh,34px); }
.stage-words[data-size=xl] { font-size:clamp(19px,1.1vw + 1vh,28px); line-height:1.5; }
.word { display:inline; transition:color .15s; }
.word.pending { color:var(--text); }
.stage-words .word.pending { color:#efebe5d9; }
.word.said { color:var(--warm); text-shadow:0 0 20px #f2b5444d; }
.word.pop { display:inline-block; animation:pop .38s ease-out; }
.stage-page { position:absolute; right:0; bottom:0; font-size:12px; color:var(--muted); }
.mic-area { position:relative; display:flex; align-items:center; gap:14px; width:min(1180px,calc(100% - 40px)); margin:0 auto calc(18px + env(safe-area-inset-bottom)); padding-top:12px; border-top:1px solid var(--line); min-height:68px; }
.mic-orb { position:relative; flex:none; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; color:var(--warm); background:radial-gradient(circle at 50% 35%,#f2b54424,#f2b54406 70%); }
.mic-orb svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.progress-ring { position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(var(--warm) calc(var(--progress,0)*360deg),#ffffff14 0); mask:radial-gradient(transparent 64%,#000 66%); -webkit-mask:radial-gradient(transparent 64%,#000 66%); transition:background .3s; }
.stage-screen[data-phase=listening] .mic-orb { animation:breathe 2s ease-in-out infinite; }
.stage-screen[data-phase=manual] .mic-orb,.stage-screen[data-phase=paused] .mic-orb { color:var(--muted); }
#stage-status { flex:none; font-size:13px; color:var(--muted); }
#stage-status:empty { display:none; }
.stage-transcript { flex:1; min-width:0; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prompt-shell { position:absolute; left:50%; bottom:100px; transform:translateX(-50%); max-width:min(90%,700px); padding:12px 26px; border-radius:999px; border:1px solid #f2b54477; background:linear-gradient(180deg,#241f27,#18151c); box-shadow:0 20px 50px -20px #000,0 0 40px #f2b54422; animation:enter .2s ease-out; }
.prompt-shell p { font:24px var(--serif); color:var(--warm); text-align:center; }
.burst { position:absolute; left:50%; top:46%; z-index:11; transform:translate(-50%,-50%); text-align:center; pointer-events:none; opacity:0; }
.burst.show { animation:burst 1.3s ease-out forwards; }
.burst-text { display:block; font:clamp(34px,5vw,56px)/1.1 var(--serif); color:var(--text); text-shadow:0 4px 30px #000; }
.burst.good .burst-text,.burst.gold .burst-text { color:var(--warm); text-shadow:0 0 30px #f2b54499,0 4px 30px #000; }
.burst-score { display:block; margin-top:6px; font-size:15px; font-weight:600; color:var(--muted); }
.burst i { position:absolute; left:50%; top:40%; width:8px; height:8px; border-radius:50%; background:var(--warm); box-shadow:0 0 12px var(--warm); opacity:0; }
.burst.show i { animation:spark .9s ease-out forwards; }
.burst i:nth-child(3) { --x:-120px; --y:-60px; } .burst i:nth-child(4) { --x:120px; --y:-70px; } .burst i:nth-child(5) { --x:-90px; --y:60px; }
.burst i:nth-child(6) { --x:100px; --y:55px; } .burst i:nth-child(7) { --x:0px; --y:-100px; } .burst i:nth-child(8) { --x:-10px; --y:90px; }
.stage-overlay { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:20px; overflow:auto; background:#0c0a0ee6; backdrop-filter:blur(10px); }
.stage-overlay-inner { width:100%; max-width:520px; max-height:calc(100svh - 40px); overflow:auto; padding:30px 26px; text-align:center; border-radius:22px; border:1px solid var(--line-strong); background:linear-gradient(180deg,var(--surface-2),var(--surface)); box-shadow:0 40px 90px -40px #000; }
.stage-overlay-inner h2 { font:400 34px var(--serif); margin-bottom:10px; }
.stage-overlay-inner .muted { margin-bottom:12px; }
.stage-overlay-inner .primary { margin:8px 0 18px; min-width:160px; }
.stage-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:14px; }
.stage-controls .secondary { min-height:40px; padding:8px 16px; font-size:14px; }
.stage-overlay-inner>.text-button { display:block; margin:0 auto; }
.recognition-details { text-align:left; margin:6px 0 10px; padding-top:12px; border-top:1px solid var(--line); }
.recognition-details summary { cursor:pointer; font-size:13px; color:var(--muted); }
.recognition-details span { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.recognition-details p { margin-top:8px; font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.manual-next { position:absolute; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:11; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:30; max-width:90vw; padding:12px 22px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:14px; box-shadow:0 10px 40px #0007; }
.boot-error { padding:40px; color:var(--error); font-size:16px; line-height:1.6; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Light theme */
body[data-theme=light] { --bg:#f5efe5; --surface:#fbf7f1; --surface-2:#ffffff; --line:#0000000f; --line-strong:#00000021; --text:#1d1b19; --muted:#6c655e; --faint:#a39b92; --warm:#a96b17; --warm-2:#99631a; --warm-soft:#a96b1714; --cold:#3f658b; color-scheme:light; background:radial-gradient(ellipse 70% 50% at 50% -10%,#f2b54433,transparent 70%),var(--bg); }
body[data-theme=light] .header { background:#f5efe5d9; }
body[data-theme=light] .primary,body[data-theme=light] .segments button[aria-pressed=true],body[data-theme=light] .streak { color:#fff; background:linear-gradient(180deg,#b57a24,#99631a); }
body[data-theme=light] input,body[data-theme=light] textarea,body[data-theme=light] select,body[data-theme=light] .segments,body[data-theme=light] .secondary { background:#ffffffb3; }
body[data-theme=light] .stage-screen { background:linear-gradient(90deg,#b9485f17,transparent 10%,transparent 90%,#b9485f17),var(--bg); }
body[data-theme=light] .stage-cue p { color:#3c4d63; }
body[data-theme=light] .stage-words .word.pending { color:#1d1b19d9; }
body[data-theme=light] .word.said,body[data-theme=light] .stars,body[data-theme=light] .big-score>#summary-score { text-shadow:none; }
body[data-theme=light] .stage-overlay { background:#f5efe5e6; }
body[data-theme=light] .prompt-shell { background:#fff; }
body[data-theme=light] .burst-text { text-shadow:0 2px 20px #fff; }

@keyframes enter { from { opacity:0; transform:translateY(6px); } }
@keyframes turn { from { opacity:0; transform:translateY(14px); } }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.18); text-shadow:0 0 26px #f2b544; } 100% { transform:scale(1); } }
@keyframes breathe { 50% { box-shadow:0 0 0 8px #f2b5440a,0 0 34px #f2b5441c; } }
@keyframes burst { 0% { opacity:0; transform:translate(-50%,-40%) scale(.85); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } }
@keyframes spark { 0% { opacity:1; transform:translate(0,0) scale(1); } 100% { opacity:0; transform:translate(var(--x),var(--y)) scale(.3); } }

@media(max-width:760px) {
  .header { padding:0 16px; height:58px; }
  .wordmark { font-size:20px; }
  .nav-button { padding:7px 10px; font-size:13px; }
  .screen { padding:26px 16px 48px; }
  .page-heading { margin-bottom:20px; }
  .import-grid,.setup-grid,.setting-rows { grid-template-columns:1fr; }
  #import-text,.import-preview { height:280px; }
  .bottom-actions,.summary-actions { flex-direction:column; align-items:stretch; }
  .start-panel { flex-direction:column; align-items:stretch; }
  .start-buttons { flex-direction:column-reverse; gap:6px; margin-left:0; }
  .start-buttons .primary { width:100%; }
  .summary-heading { align-items:flex-start; }
  .big-score>#summary-score { font-size:52px; }
  .diff-text { font-size:19px; }
  .scene-progress,.stage-top,.stage-content,.mic-area { width:calc(100% - 28px); }
  .stage-top { font-size:12px; }
  #stage-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stage-cue { padding:10px 14px; }
  .stage-cue p { max-height:6em; }
  .mic-orb { width:42px; height:42px; }
  .prompt-shell { bottom:84px; padding:10px 20px; }
  .prompt-shell p { font-size:20px; }
  .manual-next { right:14px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }