*{box-sizing:border-box}body{margin:0;background:#f6f5f1;color:#252b28;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif}button,a{touch-action:manipulation}button{cursor:pointer;font:inherit;border:0}a{color:inherit;text-decoration:none}header{height:74px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dedfd7}header b{font-size:21px}header span{font-size:13px;font-weight:400;color:#7c8279}header a{font-size:13px}main{max-width:1320px;margin:32px auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:52px;padding:0 36px}.preview{position:sticky;top:28px;align-self:start}.phone{position:relative;border-radius:22px;overflow:hidden;background:#121713;aspect-ratio:9/16;box-shadow:0 16px 42px #25342a1c}video{width:100%;height:100%;display:block}#caption{position:absolute;bottom:14%;left:5%;right:5%;color:white;text-align:center;font-size:21px;font-weight:700;line-height:1.5;text-shadow:0 2px 3px #000,1px 0 2px #000,-1px 0 2px #000;pointer-events:none;white-space:pre-line}#bigPlay{position:absolute;top:43%;left:40%;width:64px;height:64px;border-radius:50%;background:#ffffffe0;color:#294737;font-size:24px}.previewFoot{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#7b827c;margin:16px}.dot{width:6px;height:6px;background:#628c72;border-radius:50%}.heading{display:flex;justify-content:space-between;gap:16px}small{font-size:12px;color:#778479}h1{font-size:32px;line-height:1.4;font-weight:650;letter-spacing:-1px;margin:12px 0 22px}.badge{font-size:11px;white-space:nowrap;background:#e6ede1;color:#50664a;padding:7px 10px;border-radius:20px;height:fit-content}.stats{display:flex;gap:26px;margin-bottom:28px;font-size:12px;color:#7b827c}.stats strong{font-size:23px;display:block;color:#304536;margin-bottom:5px;font-variant-numeric:tabular-nums}.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px}.switch{padding:4px;background:#e9ebe4;border-radius:10px;display:flex;gap:4px}.switch button{padding:9px 14px;border-radius:7px;background:none;color:#717b71;font-size:12px}.switch .on{background:#fff;color:#263d2e;box-shadow:0 1px 4px #0001}#play{background:none;font-size:13px;color:#385540}#clock{margin-left:auto;color:#7a837b;font-size:12px;font-variant-numeric:tabular-nums}.timelineScroll{overflow-x:auto;background:#eeeee8;border:1px solid #dcdfd5;border-radius:14px;padding:16px 12px}#timeline{height:170px;position:relative;min-width:700px;touch-action:none;cursor:crosshair}#ruler{height:24px;position:relative;font-size:10px;color:#8a9389}#ruler span{position:absolute}#captions,#waves{position:absolute;left:0;right:0}#captions{top:30px;height:58px}#waves{top:96px;height:64px}.cap{position:absolute;height:58px;background:#dce9a9;border:1px solid #baca8e;border-radius:5px;padding:5px;font-size:10px;line-height:1.45;overflow:hidden;color:#31442c;display:flex;align-items:center;justify-content:center;text-align:center}.wave{position:absolute;height:64px;background:#dde6dc;border-radius:5px;overflow:hidden;border:1px solid #bdcebd}.wave svg{width:100%;height:100%}.silence{position:absolute;top:30px;height:130px;background:repeating-linear-gradient(135deg,#e9bdba55 0px,#e9bdba55 3px,#e9bdba99 3px,#e9bdba99 5px)}#playhead{position:absolute;top:22px;bottom:0;width:2px;background:#d86851;z-index:4;pointer-events:none}#playhead:before{content:'';position:absolute;left:-4px;top:-4px;width:10px;height:10px;background:#d86851;border-radius:3px}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;color:#7e877c;margin-top:12px}.legend span{display:flex;align-items:center;gap:4px}i{height:7px;width:7px;background:#a5bda4;border-radius:2px}i.gap{background:#dfaaa4}.sectionTitle{display:flex;align-items:center;justify-content:space-between;margin-top:26px}.sectionTitle h2{font-size:16px}.sectionTitle span{font-size:11px;color:#8a9286}.sentence{display:grid;grid-template-columns:27px 1fr 85px;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 12px;border-radius:10px;background:transparent;margin:3px 0;color:#384536;border:1px solid transparent}.sentence:hover{background:#ebeee5}.sentence.active{background:#e5ecd9;border-color:#cbd8b9}.num{color:#86917e;font-size:11px}.words{font-size:13px;line-height:1.6}.times{font-size:10px;color:#8b9385;text-align:right}details{margin-top:24px;font-size:12px;color:#7f8879;line-height:1.8}summary{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #567b43;outline-offset:3px}@media(max-width:800px){header{height:58px}main{grid-template-columns:1fr;padding:0 16px;margin:20px auto;gap:22px}.preview{position:relative;top:0}.phone{width:205px;margin:auto;border-radius:16px}#caption{font-size:14px}#bigPlay{width:48px;height:48px;left:38%}.previewFoot{margin-bottom:0}.heading h1{font-size:25px;line-height:1.2}.heading h1 br{display:none}.stats{margin-bottom:18px}.toolbar{gap:5px}#clock{font-size:10px}.switch button{padding:8px 10px}.sectionTitle span{font-size:10px}#gapLegend{display:none}}

#mediaStatus{position:absolute;top:14px;left:12px;right:12px;text-align:center;color:#fff;background:#15231cd9;padding:8px;border-radius:8px;font-size:12px;pointer-events:none}#mediaStatus[hidden],#retryVideo[hidden]{display:none}#retryVideo{position:absolute;bottom:24px;left:20%;right:20%;padding:12px;border-radius:9px;background:white;color:#294737}video{object-fit:contain;background:transparent}

/* Shared source colors across captions, waveform and sentence groups. */
.source-first{--source-ink:#347555;--source-bg:#dfede3;--source-border:#a2c6ae}
.source-second{--source-ink:#365fac;--source-bg:#e0e9fa;--source-border:#a8bfe7}
.source-third{--source-ink:#956013;--source-bg:#f8ebd0;--source-border:#dec18e}
.cap,.wave{background:var(--source-bg);border-color:var(--source-border);color:var(--source-ink)}
#sourceLegend{display:flex;flex-wrap:wrap;gap:14px}#sourceLegend span{color:var(--source-ink);font-size:11px;font-weight:600}#sourceLegend i{background:var(--source-ink);width:9px;height:9px}
.sourceHeading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 8px;padding:10px 12px;border-radius:8px;background:var(--source-bg);color:var(--source-ink);border-left:4px solid var(--source-ink);font-size:12px}.sourceHeading span{font-size:11px}
.sentence{border-left:3px solid var(--source-border)}.sentence .num{color:var(--source-ink);font-weight:600}.sentence:hover,.sentence.active{background:var(--source-bg)}.sentence.active{border-color:var(--source-ink)}

/* A decoded frame survives native video compositor loss on pause/scroll. */
.phone{background:#121713 url('poster.jpg') center/contain no-repeat}
#videoFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;visibility:hidden}
#videoFrame.has-frame{visibility:visible}
#mediaStatus,#retryVideo{z-index:5}

.source-fourth{--source-ink:#8050a6;--source-bg:#eee2f6;--source-border:#c4a5dc}

.source-fourth{--source-ink:#8050a6;--source-bg:#eee2f6;--source-border:#c4a5dc}
#sttLive{position:absolute;top:10px;left:10px;right:10px;z-index:3;color:white;font-size:12px}#sttLive label{display:block;font-size:10px;margin-bottom:4px;text-shadow:0 1px 2px #000}.stt-row{display:flex;align-items:center;gap:10px;background:#101c27de;border-left:3px solid #62c8ee;padding:7px 10px;margin:4px 0;border-radius:7px;min-height:36px}.stt-row.whisper{border-color:#e9af64}.stt-row small{font-size:9px;width:86px;flex-shrink:0}.stt-row div{font-size:21px;font-weight:700}.stt-row[hidden]{display:none}#sttFull{margin-top:30px;border-top:1px solid #ddd;padding-top:16px}#sttFull h2{font-size:18px}#sttFull p{font-size:12px;color:#6b756f;line-height:1.7}#sttFull article{padding:14px;border-radius:12px;background:#eaf4f9;margin:14px 0}#sttFull article.whisper{background:#f8f0e3}#sttFull h3{font-size:14px;margin:0 0 8px}.stt-links{font-size:11px;margin-bottom:12px}.stt-words{line-height:2.1}.stt-words button{background:transparent;padding:1px 0;color:#33434c;border-radius:3px;font-size:14px}.stt-words button:hover{background:#cee4f1}.stt-words button.speaking{background:#1f7197;color:#fff}.whisper .stt-words button.speaking{background:#985f1b}@media(max-width:800px){.stt-row{padding:5px;gap:4px}.stt-row small{width:61px;font-size:8px}.stt-row div{font-size:16px}}

#caption span.spoken{color:#ffe34d}
/* Scale only the image; captions and player controls retain their original size. */
#video,#videoFrame{transform-origin:50% 38%;will-change:transform}
.camera-control{display:flex;justify-content:center;align-items:center;gap:16px;font-size:12px;color:#50664a;margin:10px 0}.camera-control label{display:flex;align-items:center;gap:6px;cursor:pointer}.camera-control output{min-width:40px;font-variant-numeric:tabular-nums}

#video,#videoFrame{transition:none;animation:none}

.camera-control{flex-wrap:wrap;gap:10px 14px;padding:12px 8px;border:1px solid #dce2d8;border-radius:12px;background:#fff}.camera-control input{accent-color:#50664a;width:16px;height:16px}.phone.picture-hidden{background-image:none}.phone.picture-hidden #video,.phone.picture-hidden #videoFrame{visibility:hidden!important}.phone.captions-hidden #caption{visibility:hidden}

.shake-panel{padding:12px;border:1px solid #dce2d8;border-radius:12px;background:white;font-size:12px;display:grid;gap:10px}.shake-panel select{width:100%;min-width:0;padding:8px;border:1px solid #ccd7cc;border-radius:8px;background:#f7faf5;color:#304536}.shake-strength{display:flex;align-items:center;gap:8px}.shake-strength input{width:100%;min-width:0;accent-color:#50664a}.shake-panel small{font-size:10px;line-height:1.5}

#topicCard{position:absolute;top:8%;left:7%;right:7%;width:fit-content;max-width:86%;margin:0 auto;padding:12px 18px;border-radius:13px;background:#080808;color:#fff;font-size:22px;font-weight:750;line-height:1.45;text-align:center;letter-spacing:.025em;pointer-events:none} @media(max-width:800px){#topicCard{font-size:14px;padding:8px 12px;border-radius:9px}}

#topicCard{font-size:17px;white-space:nowrap;line-height:1.4;padding:9px 12px;letter-spacing:0;max-width:94%;left:3%;right:3%;border-radius:10px}.topic-keyword{color:#ffe34d}.title-control{margin:10px 0;display:flex;align-items:center;gap:10px;font-size:12px;color:#50664a}.title-control select{flex:1;min-width:0;padding:8px;border:1px solid #ccd7cc;border-radius:8px;background:white;color:#304536}@media(max-width:800px){#topicCard{font-size:12px;padding:7px 8px;border-radius:8px}}

#topicCard[hidden]{display:none}.title-toggle{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.title-toggle input{accent-color:#50664a;width:16px;height:16px}.title-font-label{white-space:nowrap}

.caption-effects{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;margin:10px 0;border:1px solid #dce2d8;border-radius:12px;background:#fff;font-size:12px;color:#50664a}.caption-effects select{flex:1;min-width:120px;padding:8px;border:1px solid #ccd7cc;border-radius:8px;background:#f7faf5}.caption-effects label{display:flex;align-items:center;gap:6px}.caption-effects input{accent-color:#50664a;width:16px;height:16px}.caption-effects small{flex-basis:100%;font-size:10px;line-height:1.5}#caption .caption-char{display:inline-block;transform-origin:center 65%;}#caption .emphasis-word{display:inline-block;color:#ffe34d;transform-origin:center 65%;margin:0 .1em}#caption{line-height:1.65}

#caption .emphasis-word{font-size:1.38em;margin:0 .12em;letter-spacing:.02em;vertical-align:baseline;line-height:1.4}
#footageLayer{position:absolute;inset:0;overflow:hidden;pointer-events:none}#footageLayer[hidden]{display:none}#footageLayer img{width:100%;height:100%;object-fit:cover;transform-origin:50% 38%}#topicCard,#caption{z-index:2}#bigPlay,#mediaStatus,#retryVideo{z-index:3}.footage-control{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:10px 0;padding:12px;border:1px solid #dce2d8;background:white;border-radius:12px}.footage-control label{display:flex;gap:6px;align-items:center;white-space:nowrap}.footage-control input{accent-color:#50664a}.footage-control span{font-size:10px;color:#778479}
/* Keep the growing preview/settings column reachable on desktop. */
@media(min-width:801px){.preview{max-height:calc(100dvh - 56px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-right:10px;padding-bottom:20px;scroll-padding-bottom:20px}.preview .phone{flex-shrink:0}}
.shake-strength{white-space:nowrap}

#footageLayer img{position:absolute;inset:0}#footageLayer img[hidden]{display:none}
.timeline-zoom{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:12px;color:#637460;flex-wrap:wrap}.timeline-zoom input{width:150px;accent-color:#50664a}.timeline-zoom span{margin-left:auto;color:#8a9389}.timelineScroll{max-width:100%;overscroll-behavior-x:contain}.editor{min-width:0}#timeline{height:256px;min-width:0}#captions .cap{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:38px;padding:0 8px;font-size:12px;height:40px;text-align:left}#captions{height:40px;top:30px}#waves{top:80px;height:64px}#footageTrack{position:absolute;top:156px;left:0;right:0;height:80px;background:#e2e5de;border-radius:6px}#footageTrack:before{content:'情境素材';position:absolute;top:3px;left:5px;font-size:9px;color:#858d80}.footage-clip{position:absolute;top:0;height:80px;border:1px solid #c39c5b;border-radius:6px;background:#f4e7cf;overflow:hidden;padding:7px 8px 7px 44px;text-align:left;color:#705225}.footage-clip img{position:absolute;left:4px;top:5px;width:33px;height:68px;object-fit:cover;border-radius:3px}.footage-clip span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.footage-clip small{display:block;font-size:9px;margin-top:8px;white-space:nowrap;color:#8b744b}#playhead{z-index:5}.silence{height:114px}

.footage-control{flex-wrap:wrap}.footage-control #footageStatus{flex-basis:100%}
.music-control{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;margin:10px 0;border:1px solid #dce2d8;background:white;border-radius:12px;font-size:12px;color:#50664a}.music-control label{display:flex;gap:6px;align-items:center;white-space:nowrap}.music-control input{accent-color:#50664a}.music-control>span{font-size:10px;color:#778479}.music-volume{width:100%}.music-volume input{flex:1;min-width:0}.music-volume output{min-width:48px}.music-control small{font-size:10px;line-height:1.5}

#speakerCat{position:absolute;z-index:2;height:auto;pointer-events:none;object-fit:contain}#speakerCat[hidden]{display:none}.phone.captions-hidden #speakerCat{visibility:hidden}

#speakerCat{transform:rotate(-10deg);transform-origin:center}

/* Raise the subtitle group; the speaker IP measures this same caption position. */
#caption{bottom:18%}

.subtitle-position{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:white;border:1px solid #dce2d8;border-radius:12px;padding:12px;margin:10px 0;font-size:12px;color:#50664a}.subtitle-position input{flex:1;min-width:100px;accent-color:#50664a}.subtitle-position output{min-width:36px;text-align:right}.subtitle-position small{flex-basis:100%;font-size:10px}
.fx-library{padding:18px;border:1px solid #ccd8cb;border-radius:16px;background:#fff;margin-bottom:28px}.fx-heading,.fx-tools,.fx-footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.fx-heading{justify-content:space-between}.fx-heading label,.fx-tools label{display:flex;align-items:center;gap:5px;font-size:12px}.fx-tools{margin-top:14px}.fx-tools select,.fx-tools input:not([type=checkbox]){max-width:200px;border:1px solid #cdd6cc;border-radius:7px;padding:8px;background:#f8faf7}.fx-library input{accent-color:#50664a}#fxSelection{font-size:12px;color:#51684c}.fx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px;max-height:310px;overflow:auto;padding:4px}.fx-card{border:1px solid #dce2d8;border-radius:10px;padding:6px;background:#f7f8f4;min-width:0;text-align:left}.fx-card img{width:100%;height:72px;object-fit:cover;border-radius:5px}.fx-card b{display:block;font-size:12px;margin-top:6px}.fx-card small{font-size:9px;display:block;overflow:hidden;text-overflow:ellipsis}.fx-card.applied{border:2px solid #688a50;background:#edf4df}.text-sample{display:block;padding:22px 0;text-align:center;background:#263d38;color:white;border-radius:6px;font-weight:bold}.text-bounce,.text-emphasis,.text-karaoke,.text-scale{color:#ffe34d}.fx-stack{padding:10px 0;border-top:1px solid #eee;display:flex;flex-wrap:wrap;gap:5px}.fx-stack>b{flex-basis:100%;font-size:12px}.fx-tag{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px;background:#e2ecfc;color:#345787;border-radius:5px;padding:3px}.fx-tag.text{background:#f3e4fd;color:#6d4789}.fx-tag button{background:transparent;color:inherit;padding:1px 3px;font-size:12px}.fx-tag button:disabled{opacity:.25}.fx-footer{margin-top:10px}.fx-footer button{font-size:11px;padding:7px;border-radius:6px;background:#edf0e7}.fx-footer span{font-size:11px;color:#63745f}.fx-library>small{display:block;font-size:10px;margin-top:10px;line-height:1.6}.fx-selected{outline:2px solid #365eae!important;outline-offset:1px}.block-tags{display:flex;position:absolute;bottom:2px;left:2px;right:2px;overflow:auto;gap:3px;z-index:2;line-height:1.2}.block-tags .fx-tag{font-size:9px;padding:1px 3px}.fx-disabled .fx-cards{opacity:.5}#effectsCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}#effectsCanvas[hidden]{display:none}

.phone.fx-rendering{background-image:none!important}.phone.fx-rendering #video,.phone.fx-rendering #videoFrame,.phone.fx-rendering #footageLayer{visibility:hidden!important}
.block-tags{height:16px;max-height:16px;align-items:center;overflow-y:hidden}.block-tags .fx-tag{height:14px;line-height:12px}.block-tags .fx-tag button{height:12px;line-height:12px;padding:0 2px;font-size:11px}

#restart{background:#e4ebdd;color:#385540;border-radius:7px;padding:8px 10px;font-size:12px;white-space:nowrap}.toolbar{flex-wrap:wrap}
.vb-card-preview{display:block;width:100%;height:72px;object-fit:contain;background:#243330;border-radius:5px}#vueCaptionCanvas{position:absolute;z-index:2;pointer-events:none}#vueCaptionCanvas[hidden]{display:none}.phone.vb-active #caption{opacity:0}.vb-notice{margin-top:8px;font-size:10px}.vb-notice p{margin:6px 0}.vb-notice a{text-decoration:underline}
#vueCaptionCanvas{filter:drop-shadow(0 1px 1px rgba(0,0,0,.75))}

/* Keep the effect library next to the timeline; secondary information stays collapsed. */
.edit-info{padding:14px 16px;border:1px solid #dcdfd5;border-radius:12px;background:#eeeee8}
.edit-info summary{font-weight:600;color:#50664a}
.edit-info .heading{margin-top:16px}
.edit-info .heading h1{font-size:18px;letter-spacing:0;margin:6px 0 16px}
.edit-info .heading h1 br{display:none}
.edit-info .stats{flex-wrap:wrap;gap:20px;margin:0 0 16px}
.edit-info .stats strong{font-size:20px}
.editor>.fx-library{margin-bottom:16px}

#exportVideo,#beginExport,#exportDownload{background:#385540;color:white;border-radius:9px;padding:10px 16px;font-size:13px}header{gap:16px}header a{margin-left:auto}.export-dialog{border:1px solid #dce2d8;border-radius:18px;padding:26px;max-width:460px;width:90%;color:#304536;background:#f6f5f1}.export-dialog::backdrop{background:#15221988}.export-dialog h2{margin-top:0}.export-dialog p{font-size:14px;line-height:1.7}.export-note{color:#7b827c}.export-dialog progress{width:100%;accent-color:#50664a}.export-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.export-actions button{padding:10px 16px;border-radius:9px}button:disabled{opacity:.5;cursor:default}

@font-face{font-family:"Editor JinXuan";src:url("fonts/jinxuan-medium.otf") format("opentype");font-weight:100 500;font-style:normal;font-display:block}
@font-face{font-family:"Editor JinXuan";src:url("fonts/jinxuan-heavy.otf") format("opentype");font-weight:600 900;font-style:normal;font-display:block}
#caption,#topicCard{font-family:"Editor JinXuan",sans-serif;font-synthesis:none}