:root{color:#f7f8fb;background:#07090d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #07090d;--panel: #11151d;--panel-raised: #171c26;--line: rgba(255, 255, 255, .1);--muted: #8f99aa;--soft: #c1c8d3;--white: #f7f8fb;--accent: #b7f36b;--accent-strong: #8fd93e;--warning: #f7c968;--danger: #ff7f78}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 85% 0%,rgba(102,130,50,.14),transparent 31rem),var(--bg)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{width:min(1180px,calc(100% - 40px));min-height:100vh;margin:0 auto;padding:40px 0 28px}.topbar,.page-footer,.caption-toolbar,.panel-heading,.room-share,.caption-toolbar-actions,.status-row,.room-form-row,.home-actions{display:flex;align-items:center}.topbar,.page-footer,.caption-toolbar,.room-share,.status-row{justify-content:space-between}.topbar{gap:24px;margin-bottom:34px}.eyebrow{margin:0 0 8px;color:var(--muted);font-size:.68rem;font-weight:750;letter-spacing:.17em;text-transform:uppercase}h1,h2,p{margin-top:0}h1,h2{margin-bottom:0;letter-spacing:-.04em}h1{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1}h2{font-size:1.18rem}.language-pill,.caption-room{color:var(--soft);font-size:.82rem;font-weight:650}.language-pill{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#ffffff08}.language-pill span{margin:0 8px;color:var(--accent)}.speaker-layout{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:18px}.panel{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#ffffff0b,#ffffff04),var(--panel);box-shadow:0 22px 80px #00000030}.speaker-control-panel,.speaker-preview{min-height:540px;padding:28px}.speaker-control-panel{display:flex;flex-direction:column}.panel-heading{gap:16px}.compact-heading{align-items:flex-start}.mic-orb{display:grid;width:62px;height:62px;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:#202631;font-size:1.55rem;filter:grayscale(1);transition:.18s ease}.mic-orb.active{border-color:#b7f36ba6;background:#b7f36b24;filter:none;box-shadow:0 0 0 8px #b7f36b0f,0 0 36px #b7f36b2e}.status-stack{display:grid;gap:12px;margin:40px 0 28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.status-row{gap:12px;font-size:.86rem}.status-label{color:var(--soft)}.status-value{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700}.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.status-success{color:var(--accent)}.status-warning{color:var(--warning)}.status-danger{color:var(--danger)}.status-neutral{color:var(--muted)}.direction-control{display:grid;gap:8px;margin-bottom:24px}.direction-control label{color:var(--soft);font-size:.8rem;font-weight:700}.direction-control select{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:11px;outline:none;background:#0b0e14;color:var(--white)}.direction-control select:focus{border-color:#b7f36ba6}.direction-control p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.4}.soniox-endpoint-heading,.soniox-endpoint-scale{display:flex;align-items:center;justify-content:space-between;gap:12px}.soniox-endpoint-heading output{color:var(--accent);font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.soniox-endpoint-control input[type=range]{width:100%;min-width:0;height:44px;margin:0;accent-color:var(--accent);cursor:pointer}.soniox-endpoint-control input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}.soniox-endpoint-control input:disabled{cursor:not-allowed;opacity:.45}.soniox-endpoint-scale{color:var(--soft);font-size:.68rem}.soniox-endpoint-scale span:last-child{text-align:right}.toggle-row{display:flex;gap:8px}.toggle-row button{flex:1;height:40px;border:1px solid var(--line);border-radius:11px;background:#0b0e14;color:var(--soft);font-weight:700;font-size:.8rem}.toggle-row button.active{border-color:#b7f36ba6;background:#b7f36b24;color:var(--white)}.toggle-row button:disabled{opacity:.45}.start-button,.secondary-button,.room-form button{border:0;border-radius:13px;font-weight:750;transition:transform .16s ease,background .16s ease,border-color .16s ease}.start-button{display:inline-flex;min-height:58px;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#0b1207;letter-spacing:.04em}.start-button:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-1px)}.start-button.stop-mode{background:#2a303b;color:var(--white)}.start-button-icon{font-size:1rem}.secondary-button{min-height:40px;padding:0 14px;border:1px solid var(--line);background:transparent;color:var(--soft);font-size:.78rem}.secondary-button:hover{border-color:#b7f36b73;color:var(--white)}.helper-text,.error-message,.share-url,.muted-copy{color:var(--muted);font-size:.78rem;line-height:1.55}.helper-text{margin:16px 0 0}.warning-text{color:var(--warning)}.error-message{margin:15px 0 0;color:var(--danger)}.error-log{flex:0 0 auto;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);outline:none}.error-log:focus-visible{border-radius:12px;box-shadow:0 0 0 3px #b7f36b33}.error-log-heading,.error-log-item-heading,.error-log-item-service,.error-log-fields{display:flex;align-items:center}.error-log-heading,.error-log-item-heading{justify-content:space-between;gap:12px}.error-log-heading h3{margin:4px 0 0;color:var(--white);font-size:1rem;letter-spacing:-.03em}.error-log-count{display:inline-grid;min-width:28px;height:28px;place-items:center;padding:0 8px;border:1px solid rgba(255,127,120,.28);border-radius:999px;background:#ff7f781a;color:var(--danger);font-size:.75rem;font-weight:800}.error-log-session-start,.error-log-empty{margin:8px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}.error-log-list{display:grid;max-height:290px;gap:8px;margin:14px 0 0;padding:0 4px 0 0;overflow-y:auto;list-style:none;scrollbar-color:rgba(255,255,255,.2) transparent}.error-log-item{padding:12px;border:1px solid rgba(255,127,120,.2);border-left:3px solid var(--danger);border-radius:12px;background:#ff7f780b}.error-log-item-heading{align-items:flex-start}.error-log-item-service{min-width:0;flex-wrap:wrap;gap:6px;color:var(--white);font-size:.75rem}.error-log-item-service strong{font-weight:800}.error-log-item-service span:last-child{color:var(--muted)}.error-log-indicator{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--danger);box-shadow:0 0 8px #ff7f78a6}.error-log-item time,.error-toast-copy time{flex:0 0 auto;color:var(--muted);font-size:.64rem;font-variant-numeric:tabular-nums}.error-log-message,.error-log-details{margin:9px 0 0;overflow-wrap:anywhere;font-size:.78rem;line-height:1.45}.error-log-message{color:var(--soft)}.error-log-details{color:var(--muted)}.error-log-fields{flex-wrap:wrap;gap:6px;margin-top:10px}.error-log-fields span{padding:3px 7px;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:var(--muted);font-size:.63rem;font-variant-numeric:tabular-nums}.error-toast{position:fixed;z-index:30;top:20px;right:20px;width:min(420px,calc(100vw - 40px));padding:14px;border:1px solid rgba(255,127,120,.46);border-radius:16px;background:#1c1318f7;box-shadow:0 18px 54px #0000006b,0 0 0 5px #ff7f780f;animation:error-toast-in .18s ease-out}.error-toast-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px}.error-toast-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--danger);color:#231013;font-size:.85rem;font-weight:900}.error-toast-copy{min-width:0}.error-toast-copy .eyebrow-small{color:var(--danger)}.error-toast-message{margin:5px 0 4px;overflow-wrap:anywhere;color:var(--white);font-size:.82rem;line-height:1.4}.error-toast-dismiss{display:grid;width:28px;height:28px;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1}.error-toast-dismiss:hover{background:#ffffff14;color:var(--white)}.error-toast-link{margin:12px 0 0 34px;padding:0;border:0;background:transparent;color:var(--accent);font-size:.72rem;font-weight:800}.error-toast-link:hover{color:var(--white);text-decoration:underline}@keyframes error-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}code{color:var(--soft);font-size:.72rem}.speaker-preview{display:flex;flex-direction:column}.preview-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 7px #b7f36b14,0 0 20px #b7f36b40}.caption-display{display:block;min-height:280px;padding:28px 10px;overflow-y:auto;color:var(--muted);font-size:clamp(1.55rem,4vw,3.1rem);font-weight:550;letter-spacing:-.035em;line-height:1.2;text-align:left;overflow-anchor:none;overscroll-behavior:contain;scroll-behavior:auto;scrollbar-width:none}.caption-display::-webkit-scrollbar{display:none}.caption-content{display:flex;width:100%;min-height:100%;flex-direction:column;align-items:stretch;justify-content:center}.caption-display.has-caption .caption-content{justify-content:flex-end}.caption-line{display:block;width:100%;flex:0 0 auto;white-space:pre-line;overflow-wrap:break-word}.speaker-preview .caption-display{flex:1;max-height:350px}.tts-debug-panel{flex:0 0 auto;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.tts-debug-heading,.tts-debug-item-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.tts-debug-heading h3{margin:4px 0 0;color:var(--white);font-size:1rem;letter-spacing:-.03em}.tts-debug-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.tts-debug-clock{display:inline-flex;align-items:baseline;gap:6px;min-height:32px;padding:5px 8px;border:1px solid rgba(183,243,107,.24);border-radius:8px;background:#b7f36b0f}.tts-debug-clock span{color:var(--muted);font-size:.62rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase}.tts-debug-clock strong{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap}.tts-debug-badge{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.tts-debug-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px #b7f36bbf}.tts-debug-download,.tts-debug-mark,.tts-debug-clear{min-height:32px;padding:0 10px;border-radius:8px;font-size:.7rem}.tts-debug-note,.tts-debug-empty{margin:8px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}.tts-latency-summary{margin-top:14px;padding:12px;border:1px solid rgba(183,243,107,.18);border-radius:10px;background:#b7f36b09}.tts-latency-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.tts-latency-grid>div{min-width:0;padding:8px;border-radius:7px;background:#00000024}.tts-latency-grid span,.tts-latency-grid strong{display:block}.tts-latency-grid span{color:var(--muted);font-size:.59rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase}.tts-latency-grid strong{margin-top:4px;overflow-wrap:anywhere;color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.72rem;font-variant-numeric:tabular-nums}.tts-latency-grid small{color:var(--muted);font-family:inherit;font-size:.62rem;font-weight:500}.tts-latency-summary>p{margin:10px 0 0;color:var(--muted);font-size:.66rem;line-height:1.45}.tts-debug-list{display:grid;max-height:350px;gap:8px;margin:14px 0 0;padding:0 4px 0 0;overflow-y:auto;list-style:none;scrollbar-color:rgba(255,255,255,.2) transparent}.tts-debug-item{padding:10px;border:1px solid rgba(130,192,255,.2);border-left:3px solid #82c0ff;border-radius:10px;background:#82c0ff0b}.tts-debug-item.is-send{border-color:#b7f36b33;border-left-color:var(--accent);background:#b7f36b0b}.tts-debug-item.is-error{border-color:#ff7f7833;border-left-color:var(--danger);background:#ff7f780b}.tts-debug-item.is-mark{border-color:#f7c9684d;border-left-color:var(--warning);background:#f7c9680f}.tts-debug-item-heading{align-items:center}.tts-debug-item-heading code{min-width:0;overflow-wrap:anywhere;color:var(--white);font-size:.7rem;font-weight:800}.tts-debug-item-heading time{flex:0 0 auto;color:var(--muted);font-size:.64rem;font-variant-numeric:tabular-nums}.tts-debug-item pre{max-height:160px;margin:8px 0 0;padding:8px;overflow:auto;border-radius:7px;background:#0003;color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.66rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}.session-downloads{flex:0 0 auto;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.session-downloads-heading,.download-provider-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.session-downloads-heading h3{margin:4px 0 0;color:var(--white);font-size:1rem;letter-spacing:-.03em}.download-ready-badge,.download-provider-state{color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.download-ready-badge{padding:5px 8px;border:1px solid rgba(183,243,107,.28);border-radius:999px;background:#b7f36b14}.session-downloads-note,.download-provider-meta{color:var(--muted);font-size:.72rem;line-height:1.45}.session-downloads-note{margin:8px 0 12px}.download-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.download-provider-card{min-width:0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#ffffff06}.download-provider-gemini{border-color:#b7f36b33}.download-provider-soniox{border-color:#82c0ff38}.download-provider-heading{align-items:center}.download-provider-heading h4{margin:0;color:var(--white);font-size:.82rem;letter-spacing:-.02em}.download-provider-state{color:var(--muted);font-size:.62rem}.download-provider-state.is-captured{color:var(--accent)}.download-actions{display:flex;gap:7px;margin-top:10px}.download-actions .secondary-button{min-width:0;flex:1;padding:0 9px;font-size:.7rem}.download-provider-meta{min-height:1.45em;margin:9px 0 0;overflow-wrap:anywhere}.caption-display.has-caption{color:var(--white)}.caption-placeholder{color:#667080;font-size:.95rem;font-weight:500;letter-spacing:0}.room-share{gap:20px;padding-top:18px;border-top:1px solid var(--line)}.room-share strong{color:var(--white);font-size:1.2rem;letter-spacing:.08em}.share-url{margin:12px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-footer{gap:16px;margin-top:18px;color:#667080;font-size:.7rem}.setup-page{display:grid;place-items:center}.setup-card{width:min(520px,100%);padding:34px}.setup-card h1{margin-bottom:14px}.home-actions{flex-wrap:wrap;gap:10px;margin-top:28px}.link-button{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:48px;padding:0 18px;text-decoration:none}.room-form{margin-top:28px}.room-form label{display:block;margin-bottom:8px;color:var(--soft);font-size:.8rem;font-weight:700}.room-form-row{gap:8px}.room-form input{min-width:0;flex:1;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;outline:none;background:#0b0e14;color:var(--white)}.room-form input:focus{border-color:#b7f36ba6}.room-form button{height:46px;padding:0 14px;background:var(--accent);color:#0b1207;font-size:.78rem}.caption-page{display:flex;min-height:100vh;flex-direction:column;padding:24px 30px 30px;background:#000}.caption-toolbar{gap:20px;color:var(--muted)}.caption-toolbar-actions{gap:20px}.caption-wake-lock-status{max-width:100%;flex-wrap:wrap}.audio-toolbar{display:flex;width:min(1300px,100%);margin:14px auto 0;padding:10px 14px;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#ffffff09}.audio-toolbar-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.audio-toolbar-title{color:var(--white);font-size:.8rem;font-weight:750}.audio-toolbar-note{color:var(--muted);font-size:.7rem}.audio-toolbar-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px}.audio-volume-control{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.7rem;white-space:nowrap}.audio-volume-control input{width:92px;accent-color:var(--accent)}.speaker-audio-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.worklet-rate-control{display:grid;gap:9px;margin-top:12px;padding:12px;border:1px solid rgba(183,243,107,.18);border-radius:11px;background:#b7f36b09}.worklet-rate-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.worklet-rate-heading label{color:var(--soft);font-size:.76rem;font-weight:750}.worklet-mode-pill{padding:3px 7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.05em}.worklet-mode-pill.is-on{border-color:#b7f36b80;background:#b7f36b1f;color:var(--accent)}.worklet-rate-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.worklet-rate-readout span{display:grid;gap:3px;min-width:0;padding:8px;border-radius:7px;background:#00000029}.worklet-rate-readout small{color:var(--muted);font-size:.6rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase}.worklet-rate-readout strong{overflow-wrap:anywhere;color:var(--white);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem;font-variant-numeric:tabular-nums}.worklet-rate-note{margin:0;color:var(--muted);font-size:.68rem;line-height:1.4}.audio-error{flex-basis:100%;margin:0;color:var(--danger);font-size:.72rem}.audio-backlog{flex-basis:100%;margin:0;color:var(--muted);font-size:.72rem}.audio-backlog strong{color:var(--soft);font-variant-numeric:tabular-nums}.audio-backlog.is-catching-up,.audio-backlog.is-catching-up strong{color:var(--warning)}.caption-toolbar .status-row{gap:8px}.projector-stage{display:grid;min-height:0;flex:1;place-items:center;padding:5vh 7vw}.projector-stage .caption-display{width:min(1300px,100%);height:clamp(280px,58vh,760px);min-height:0;max-height:none;overflow-y:auto;color:var(--white);font-size:clamp(2rem,5vw,5.6rem);font-weight:600;line-height:1.16;text-align:left}.projector-stage .caption-content{align-items:stretch}.projector-stage .caption-placeholder{display:block;width:100%;color:#444;font-size:clamp(1rem,2vw,1.6rem);text-align:center}.is-fullscreen .caption-toolbar{opacity:.12;transition:opacity .18s ease}.is-fullscreen .caption-toolbar:hover{opacity:1}@media(max-width:760px){.app-shell{width:min(100% - 28px,600px);padding-top:24px}.topbar,.room-share,.page-footer{align-items:flex-start;flex-direction:column}.topbar{margin-bottom:22px}.speaker-layout{grid-template-columns:1fr}.speaker-control-panel,.speaker-preview{min-height:auto;padding:22px}.speaker-preview .caption-display{min-height:260px}.download-provider-grid{grid-template-columns:1fr}.caption-page{padding:18px}.caption-toolbar,.caption-toolbar-actions,.audio-toolbar{align-items:flex-start;flex-direction:column}.caption-toolbar-actions{width:100%;gap:12px}.caption-toolbar-actions .secondary-button{width:100%}.audio-toolbar{align-items:stretch}.audio-toolbar-actions{width:100%;justify-content:flex-start}.audio-toolbar-actions .secondary-button{flex:1}.projector-stage{padding:8vh 0}.error-toast{top:12px;right:12px;width:calc(100vw - 24px)}.error-log-item-heading{flex-direction:column;gap:7px}.error-log-item time{align-self:flex-start}.tts-debug-heading{flex-direction:column}.tts-debug-actions{justify-content:flex-start}.tts-latency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.speaker-bilingual-preview{display:flex;flex-direction:column;gap:16px;flex:1}.preview-section{display:flex;flex-direction:column;gap:6px}.eyebrow-small{margin:0;color:var(--muted);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.speaker-preview-display .caption-display{min-height:120px;max-height:150px;font-size:clamp(1.1rem,2vw,1.5rem);padding:14px 10px;border-radius:12px;background:#ffffff05;border:1px solid rgba(255,255,255,.04)}.preview-separator{height:1px;background:var(--line);margin:4px 0}.comparison-preview-grid{display:grid;min-height:0;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:hidden}.comparison-card{display:flex;min-width:0;min-height:0;flex-direction:column;gap:14px;padding:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#ffffff06}.comparison-card-gemini{border-color:#b7f36b38}.comparison-card-soniox{border-color:#82c0ff3d}.comparison-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.comparison-card-heading h3{margin:4px 0 0;color:var(--white);font-size:1rem;letter-spacing:-.03em}.comparison-card-status{min-width:0;flex:0 0 auto}.comparison-card-status .status-row{gap:6px;font-size:.7rem}.comparison-card-status .status-label{color:var(--muted);font-size:.68rem}.comparison-card-section{display:flex;min-height:0;flex:1;flex-direction:column;gap:5px}.comparison-card .caption-display{min-height:96px;max-height:170px;flex:1;padding:12px 8px;border:1px solid rgba(255,255,255,.04);border-radius:10px;background:#0000001f;font-size:clamp(.95rem,1.7vw,1.35rem)}.comparison-card-section+.comparison-card-section{border-top:1px solid var(--line);padding-top:14px}.comparison-note{flex:0 0 auto;margin:12px 0 0;color:var(--muted);font-size:.7rem;line-height:1.45}.bilingual-caption-display{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:3vh;width:min(1300px,100%);height:min(78vh,860px);max-height:78vh;min-height:0}.original-caption,.translation-caption{display:flex;min-height:0;flex-direction:column;gap:12px;padding:3.5vh 4vw;border-radius:24px;box-shadow:0 16px 48px #00000059;transition:all .25s cubic-bezier(.16,1,.3,1);word-break:keep-all;overflow-wrap:break-word;overflow:hidden}.original-caption{color:var(--muted);background:linear-gradient(145deg,#ffffff05,#ffffff01),#11151d66;border:1px solid rgba(255,255,255,.06)}.translation-caption{color:var(--white);background:linear-gradient(145deg,#ffffff0d,#ffffff04),var(--panel);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px #00000073}.bilingual-label{align-self:center;font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);opacity:.8;background:#ffffff0d;padding:4px 10px;border-radius:6px;margin-bottom:4px}.translation-caption .bilingual-label{color:var(--accent);background:#b7f36b1a}.bilingual-caption-display .caption-display{width:100%;height:100%;min-height:0;max-height:none;flex:1;padding:.5vh 1vw 1.5vh;color:inherit;font-size:clamp(1.4rem,3.2vw,3.4rem);font-weight:500;line-height:1.25}.bilingual-caption-display .translation-caption .caption-display{font-size:clamp(1.8rem,4.2vw,4.6rem);font-weight:600;line-height:1.2}.bilingual-caption-display .caption-placeholder{font-size:clamp(1rem,2vw,1.6rem)}.bilingual-placeholder{opacity:.35;font-style:italic}.secondary-button.active-toggle{background:#b7f36b26;border-color:var(--accent);color:var(--accent)}@media(max-width:900px){.comparison-preview-grid{overflow-y:auto}.comparison-card{overflow:visible}}@media(max-width:760px){.bilingual-caption-display{height:min(64vh,620px);gap:12px}.original-caption,.translation-caption{gap:8px;padding:14px 16px;border-radius:16px}.bilingual-caption-display .caption-display{padding:2px 4px 8px}}@media(max-width:760px){.comparison-preview-grid{grid-template-columns:1fr;overflow:visible;flex:0 0 auto}.comparison-card{min-height:330px}}.caption-tabs{display:flex;background:#ffffff0d;border:1px solid var(--line);border-radius:12px;padding:2px;gap:2px}.tab-button{background:transparent;border:none;color:var(--muted);padding:6px 14px;font-size:.78rem;font-weight:650;border-radius:10px;transition:all .15s ease;cursor:pointer}.tab-button:hover{color:var(--white);background:#ffffff08}.tab-button.active{background:var(--accent);color:#0b1207}.vocab-helper-layout{display:grid;grid-template-columns:minmax(0,1.6fr) 340px;gap:24px;width:100%;max-width:1300px;height:76vh}.vocab-main-section{display:flex;flex-direction:column;gap:16px;min-height:0}.vocab-speech-display{flex:0 0 clamp(250px,42vh,480px);height:clamp(250px,42vh,480px);min-height:0;display:flex;flex-direction:column;gap:12px;padding:3vh 3.5vw;border-radius:24px;background:linear-gradient(145deg,#ffffff05,#ffffff01),#11151d66;border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 48px #00000059;overflow:hidden;transition:height .18s ease,flex-basis .18s ease,padding .18s ease}.vocab-speech-display.is-collapsed{flex-basis:76px;height:76px;gap:8px;padding:14px 20px}.vocab-speech-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px}.vocab-speech-header-main{display:flex;min-width:0;align-items:center;flex-wrap:wrap;gap:8px}.vocab-speech-header-actions{display:flex;flex:0 0 auto;align-items:center;gap:6px}.vocab-speech-header .bilingual-label{align-self:auto;margin:0}.vocab-speech-toggle{flex:0 0 auto;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:#ffffff0a;color:var(--soft);font-size:.7rem;font-weight:750;cursor:pointer;transition:.15s ease}.vocab-speech-toggle:hover{border-color:#b7f36b73;background:#b7f36b1a;color:var(--accent)}.vocab-speech-toggle.active-toggle{border-color:var(--accent);background:#b7f36b1f;color:var(--accent)}.vocab-processing-summary,.vocab-speech-status{display:inline-flex;align-items:center;gap:5px;color:var(--warning);font-size:.72em;font-style:normal;font-weight:700;letter-spacing:.03em;white-space:nowrap}.vocab-speech-status{margin-left:.55em;vertical-align:middle;opacity:.86}.vocab-processing-dot{display:inline-block;width:.55em;height:.55em;flex:0 0 auto;border-radius:50%;background:var(--warning);box-shadow:0 0 8px #f7c968a6;animation:vocabProcessingPulse 1.2s ease-in-out infinite}@keyframes vocabProcessingPulse{0%,to{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}.vocab-speech-text{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scroll-behavior:auto;scrollbar-width:none;font-size:clamp(1.6rem,3.6vw,3.8rem);font-weight:550;line-height:1.25;color:var(--white);word-break:keep-all;overflow-wrap:break-word}.vocab-speech-text::-webkit-scrollbar{display:none}.vocab-speech-content{display:flex;min-height:100%;flex-direction:column;justify-content:flex-end}.vocab-speech-sentence{display:block;flex:0 0 auto}.vocab-speech-sentence.is-processing{font-style:italic;color:var(--soft);text-decoration:underline dotted rgba(247,201,104,.55);text-decoration-thickness:1px;text-underline-offset:.18em}.vocab-speech-sentence.is-live{color:var(--soft);font-style:italic}.vocab-speech-collapsed-preview{min-width:0;overflow:hidden;color:var(--soft);font-size:.82rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.highlighted-vocab-word{color:var(--accent);border-bottom:2px dotted var(--accent);cursor:pointer;padding:0 2px;border-radius:4px;transition:all .18s ease}.highlighted-vocab-word:hover{background:#b7f36b26;text-shadow:0 0 8px rgba(183,243,107,.4)}.highlighted-vocab-ruby{ruby-position:over;ruby-align:center}.highlighted-vocab-ruby rt{color:var(--soft);font-size:.34em;font-weight:650;line-height:1;-webkit-user-select:none;user-select:none}.active-vocab-card{padding:20px 24px;display:flex;flex-direction:column;gap:12px;border-radius:20px;background:linear-gradient(145deg,#ffffff0f,#ffffff05),var(--panel-raised);border-color:#b7f36b4d;box-shadow:0 12px 36px #0006;animation:slideUp .2s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.active-vocab-header{display:flex;align-items:center;gap:12px}.active-vocab-word-heading{display:flex;min-width:0;align-items:baseline;gap:9px}.active-vocab-word-title{font-size:1.35rem;font-weight:750;color:var(--white)}.active-vocab-pos{font-size:.76rem;font-style:italic;color:var(--muted)}.active-vocab-reading{color:var(--soft);font-size:.88rem;font-weight:600}.vocab-level-badge{font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.05em}.vocab-level-badge.level-a1{background:#7ed3ff26;color:#8edcff;border:1px solid rgba(126,211,255,.3)}.vocab-level-badge.level-a2{background:#5bdcb826;color:#7de0c1;border:1px solid rgba(91,220,184,.3)}.vocab-level-badge.level-b1{background:#f7c96826;color:var(--warning);border:1px solid rgba(247,201,104,.3)}.vocab-level-badge.level-b2{background:#ffa65c26;color:#ffb36d;border:1px solid rgba(255,166,92,.3)}.vocab-level-badge.level-c1{background:#ff7f7826;color:var(--danger);border:1px solid rgba(255,127,120,.3)}.vocab-level-badge.level-c2{background:#c18eff26;color:#c99bff;border:1px solid rgba(193,142,255,.3)}.active-vocab-close{margin-left:auto;background:transparent;border:none;color:var(--muted);font-size:1rem;padding:4px;line-height:1;cursor:pointer}.active-vocab-close:hover{color:var(--white)}.active-vocab-body{display:flex;flex-direction:column;gap:6px}.active-vocab-meaning{font-size:1.05rem;font-weight:650;color:var(--accent);margin:0}.active-vocab-explanation{font-size:.85rem;color:var(--soft);margin:0;line-height:1.45}.vocab-sidebar{display:flex;flex-direction:column;padding:20px;min-height:0;border-radius:20px;background:#11151d99}.vocab-sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.vocab-sidebar-header h3{margin:0;font-size:.95rem;font-weight:750;letter-spacing:.02em;color:var(--white)}.vocab-count{display:inline-flex;min-width:1.6em;height:1.6em;align-items:center;justify-content:center;margin-left:4px;padding:0 5px;border-radius:999px;background:#b7f36b1f;color:var(--accent);font-size:.72em;vertical-align:.08em}.clear-vocab-button{background:#ff7f781a;color:var(--danger);border:1px solid rgba(255,127,120,.2);padding:4px 10px;font-size:.72rem;font-weight:700;border-radius:6px;transition:all .15s ease;cursor:pointer}.clear-vocab-button:hover{background:#ff7f7833;border-color:var(--danger)}.vocab-filter-controls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;background:#0003;padding:3px;border-radius:8px}.filter-button{flex:1 0 calc(25% - 6px);min-width:34px;background:transparent;border:none;color:var(--muted);font-size:.72rem;font-weight:700;padding:6px;border-radius:6px;transition:all .15s ease;cursor:pointer}.filter-button:hover{color:var(--white)}.filter-button.active{background:#ffffff14;color:var(--white);box-shadow:0 2px 6px #00000026}.vocab-list-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}.vocab-list-scroll::-webkit-scrollbar{width:4px}.vocab-list-scroll::-webkit-scrollbar-track{background:transparent}.vocab-list-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.vocab-empty-placeholder{color:var(--muted);font-size:.78rem;text-align:center;margin:32px 0;font-style:italic}.vocab-list-item{padding:10px 12px;border-radius:12px;background:#ffffff05;border:1px solid rgba(255,255,255,.04);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:all .15s ease}.vocab-list-item:hover{background:#ffffff0a;border-color:#ffffff14}.vocab-list-item.selected{background:#b7f36b0f;border-color:#b7f36b4d}.vocab-item-meta{display:flex;align-items:center;gap:8px}.vocab-item-word{font-weight:700;font-size:.88rem;color:var(--white)}.vocab-item-reading{color:var(--soft);font-size:.76rem;font-weight:600}.vocab-item-pos{font-size:.7rem;font-style:italic;color:var(--muted)}.vocab-item-meaning{font-size:.82rem;font-weight:650;color:var(--accent)}@media(max-width:820px){.vocab-helper-layout{grid-template-columns:1fr;height:auto}.vocab-sidebar{height:clamp(600px,78vh,900px)}}.caption-line-speaking{background:#4dd3b324;border-radius:6px;box-shadow:inset 3px 0 #4dd3b3}.caption-spoken-word{background:#a7f3d0;color:#102c24;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.audio-follow-note{flex-basis:100%;margin:0;color:var(--muted);font-size:.8rem}