:root{color-scheme:light;--ink: #121826;--muted: #667085;--line: #dfe3ea;--paper: #ffffff;--canvas: #f4f5f7;--accent: #ff4f3d;--accent-dark: #d83224;--navy: #172033;--current: #fff0ed;--selected: #fff7d8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{min-width:320px;background:var(--canvas)}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:var(--canvas)}button,input,select{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #377dff;outline-offset:2px}[hidden]{display:none!important}.offline-banner{padding:9px 16px;color:#5d4200;background:#fff1bd;text-align:center;font-size:14px;font-weight:650}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(24px,calc((100vw - 1440px)/2));color:#fff;background:var(--navy);border-bottom:1px solid rgb(255 255 255 / 12%)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{width:40px;height:40px;display:grid;place-items:center;color:#fff;background:var(--accent);border-radius:11px 11px 11px 3px;font-size:14px;font-weight:900;letter-spacing:-.03em}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:-.01em}.brand small{margin-top:2px;color:#aeb8ca;font-size:11px}.keyboard-hint{color:#aeb8ca;font-size:12px}main{width:min(1440px,100%);margin:0 auto;padding:26px 24px calc(112px + env(safe-area-inset-bottom))}.url-panel{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(460px,1.25fr);align-items:end;gap:44px;margin-bottom:24px;padding:26px 30px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px #1218260d}.eyebrow{margin:0 0 6px;color:var(--accent-dark);font-size:11px;font-weight:850;letter-spacing:.16em}h1,h2{margin:0;letter-spacing:-.035em}h1{max-width:500px;font-size:clamp(24px,2.3vw,36px);line-height:1.15}h2{font-size:22px}form label{display:block;margin-bottom:8px;font-size:13px;font-weight:750}.url-controls{display:grid;grid-template-columns:1fr auto;gap:8px}.url-controls input{min-width:0;height:48px;padding:0 15px;color:var(--ink);background:#fafbfc;border:1px solid #cfd5df;border-radius:10px}.url-controls input[aria-invalid=true]{border-color:#c9372c}.url-controls button{min-height:48px;padding:0 20px;color:#fff;background:var(--accent);border:0;border-radius:10px;font-weight:800;cursor:pointer}.url-controls button:hover{background:var(--accent-dark)}.form-help,.form-error{margin:7px 2px 0;font-size:12px}.form-help{color:var(--muted)}.form-error{color:#b42318;font-weight:650}.workspace{min-height:570px;display:grid;grid-template-columns:minmax(420px,1fr) minmax(340px,430px);gap:18px}.player-column,.transcript-panel{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px #1218260d;overflow:hidden}.player-column{align-self:start;padding:18px}.player-frame{position:relative;width:100%;min-width:200px;min-height:200px;overflow:hidden;background:#080b12;border-radius:12px;aspect-ratio:16 / 9}.player-frame iframe,.player-placeholder{width:100%;height:100%;border:0}.player-placeholder{display:grid;place-content:center;justify-items:center;color:#9ba6ba}.placeholder-art{width:74px;height:52px;display:grid;place-items:center;color:#fff;background:#2a3345;border-radius:13px}.placeholder-art span{transform:translate(2px)}.player-placeholder p{margin:15px 0 0;font-size:13px}.status-line{min-height:20px;margin:13px 2px 0;color:var(--muted);font-size:13px}.status-line[data-state=ready]{color:#287a4b}.status-line[data-state=error]{color:#b42318}.focus-note{display:flex;gap:8px;margin-top:12px;padding:10px 12px;color:#596579;background:#f5f7fa;border-radius:9px;font-size:12px;line-height:1.45}.transcript-panel{height:min(68vh,660px);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr)}.transcript-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid var(--line)}.multi-toggle{min-height:44px;display:grid;grid-template-columns:auto 34px auto;align-items:center;gap:7px;padding:6px 9px;color:var(--muted);background:#f3f5f8;border:1px solid var(--line);border-radius:10px;font-size:11px;font-weight:750;cursor:pointer}.multi-toggle:disabled{opacity:.45;cursor:default}.multi-toggle.is-on{color:#885f00;background:#fff8da;border-color:#edcf69}.switch-track{width:34px;height:20px;display:flex;align-items:center;padding:2px;background:#9ba4b4;border-radius:99px;transition:background .16s ease}.switch-knob{width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000040;transition:transform .16s ease}.is-on .switch-track{background:#cf980e}.is-on .switch-knob{transform:translate(14px)}.switch-state{min-width:23px;font-size:9px}.track-wrap{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--muted);border-bottom:1px solid var(--line);font-size:12px}.track-wrap select{flex:1;min-width:0;padding:6px 8px;color:var(--ink);background:#fff;border:1px solid #cfd5df;border-radius:7px}.transcript-status{padding:0 20px 12px}.selection-status{margin:0 14px 12px;padding:9px 12px;color:#92372e;background:#fff0ed;border:1px solid #ffc9c2;border-radius:9px;font-size:12px;font-weight:750}.selection-status[data-mode=multi]{color:#755400;background:#fff6cd;border-color:#e8c750}.transcript-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}.cue-row{position:relative;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;padding:12px 16px;color:var(--ink);text-align:left;background:transparent;border:0;border-bottom:1px solid #edf0f4;cursor:pointer}.cue-row:hover{background:#f7f8fa}.cue-row.is-current{background:var(--current);box-shadow:inset 5px 0 0 var(--accent)}.cue-row.is-selected{background:var(--selected);box-shadow:inset 5px 0 #d69b00}.cue-row.is-current:after,.cue-row.is-selected:after{position:absolute;top:9px;right:12px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:850;letter-spacing:.06em}.cue-row.is-current:after{content:"目前段落";color:#a12b20;background:#ffd7d1}.cue-row.is-selected:after{content:"已選";color:#765300;background:#f2d979}.cue-marker{padding-top:19px;color:var(--accent);font-size:11px}.is-selected .cue-marker{color:#b68100}.cue-body,.cue-time,.cue-text{display:block}.cue-time{margin-bottom:3px;color:#8a94a6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700}.cue-text{font-size:14px;line-height:1.48}.is-current .cue-body,.is-selected .cue-body{padding-right:54px}.is-current .cue-text,.is-selected .cue-text{font-weight:750}.action-bar{position:fixed;z-index:20;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:max-content;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:7px;padding:9px;color:#fff;background:#172033f5;border:1px solid rgb(255 255 255 / 14%);border-radius:16px;box-shadow:0 16px 40px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.action-bar button{min-width:74px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 11px;color:#fff;background:#2d384c;border:1px solid #414d62;border-radius:10px;font-size:12px;font-weight:750;cursor:pointer}.action-bar button:hover:not(:disabled){background:#3a475d}.action-bar button:disabled{opacity:.38;cursor:default}.action-bar kbd{min-width:23px;padding:3px 5px;color:#d8deea;background:#182133;border:1px solid #536078;border-radius:5px;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}.action-bar .primary-action{background:#3b465a}.action-bar .play-action{min-width:54px;width:54px;height:54px;padding:0;background:var(--accent);border-color:var(--accent);border-radius:50%;font-size:20px}.action-bar .play-action:hover:not(:disabled){background:var(--accent-dark)}.action-bar .minor-action{min-width:63px}.action-divider{width:1px;height:32px;margin:0 2px;background:#4b566b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.keyboard-hint{display:none}.url-panel{grid-template-columns:1fr;gap:18px}.workspace{grid-template-columns:1fr}.transcript-panel{height:min(62vh,600px)}}@media(max-width:620px){.site-header{height:64px;padding:0 16px}.brand small{display:none}main{padding:16px 12px calc(104px + env(safe-area-inset-bottom))}.url-panel{padding:20px 16px;border-radius:14px}.url-controls{grid-template-columns:1fr}.url-controls button{width:100%}.workspace{min-height:0}.player-column{padding:10px;border-radius:14px}.player-frame{min-height:200px}.transcript-panel{height:58vh;border-radius:14px}.transcript-panel>header{padding:16px}.multi-toggle>span:first-child{display:none}.action-bar{bottom:max(8px,env(safe-area-inset-bottom));gap:4px;padding:7px}.action-bar button{min-width:50px;min-height:48px;padding:5px 8px}.action-bar button>span:not(.switch-track):not(.switch-state){display:none}.action-bar .minor-action{min-width:46px}.action-divider{margin:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}