:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#202821;background:#f7f7f2}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.topbar{height:68px;display:flex;align-items:center;gap:20px;max-width:1280px;padding:0 28px;margin:auto}.brand{text-decoration:none;font-size:23px;font-weight:800;letter-spacing:-1.5px}.top-note{font-size:13px;color:#667565;margin-right:auto}main{max-width:1280px;margin:auto;padding:0 28px}.intro{padding:50px 0 34px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#69806b}.intro h1{font-size:clamp(43px,6vw,72px);line-height:1.04;letter-spacing:-3px;margin:16px 0;font-weight:750}.intro em{font-style:normal;color:#ec754e}.intro p{color:#6d776c;font-size:17px;max-width:660px;line-height:1.6}.workspace{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:22px;align-items:start}.preview-column{position:sticky;top:16px}.drop{background:#dfe9dc;border:2px dashed #a7baa6;border-radius:20px;min-height:370px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;cursor:pointer;padding:24px}.drop.drag{border-color:#ed754e;background:#e9eddf}.drop input,.import input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.drop-icon{font-size:52px;color:#ef7650}.drop strong{font-size:24px}.drop small{font-size:13px;color:#67766a}.player-wrap{position:relative;background:#141914;border-radius:20px;overflow:hidden;min-height:300px;display:grid;place-items:center}.player-wrap video{width:100%;max-height:65vh;display:block}.caption-overlay{position:absolute;left:7%;right:7%;bottom:15%;color:#ffda58;font-weight:800;font-size:34px;text-align:center;line-height:1.22;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;text-shadow:0 2px 2px #000,2px 0 2px #000,-2px 0 2px #000;display:none}.video-details{display:flex;align-items:center;gap:12px;margin:12px 0 18px;font-size:13px;flex-wrap:wrap}.video-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}.video-details span{color:#6b756b}.text-button{border:0;background:none;text-decoration:underline;color:#506b54;padding:4px}.notice{border-radius:14px;background:#e9eee4;padding:19px;margin-top:16px;display:flex;gap:10px;flex-direction:column;color:#5b6d5c;font-size:13px;line-height:1.5}.notice strong{color:#324735}.panel{background:#fff;border:1px solid #e0e5dc;border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 8px 30px #2b402009}.panel h2{font-size:24px;letter-spacing:-.7px;margin:6px 0 15px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.small-button,.ghost{border:1px solid #d7e0d2;background:#f6f9f3;padding:9px 12px;border-radius:9px;font-size:13px;color:#435846}.tools{display:flex;gap:8px;flex-wrap:wrap}.import{cursor:pointer;position:relative}.hint{font-size:13px;color:#738070;line-height:1.5}.rows{display:grid;gap:11px;max-height:440px;overflow:auto}.row{background:#f8f9f5;border:1px solid #e6e9e1;border-radius:12px;padding:12px}.row-top{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}.row label{font-size:11px;font-weight:700;color:#657566}.row input[type=number]{width:100%;padding:9px;border:1px solid #d5ddd0;border-radius:8px;background:#fff;margin-top:4px}.row textarea{width:100%;min-height:58px;margin-top:9px;padding:10px;border:1px solid #d5ddd0;border-radius:8px;resize:vertical;background:#fff}.row button{border:0;background:transparent;color:#b64d3b;font-size:19px;padding:8px}.empty{padding:32px 18px;background:#f7f9f5;text-align:center;border-radius:10px;color:#728071;font-size:14px}.field{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:10px;padding:13px 0;border-top:1px solid #edf0e9;font-size:14px}.field select{border:1px solid #d5ddd0;background:#fff;border-radius:8px;padding:8px}.field input{width:100%}.field output{min-width:2ch;text-align:right}.checkbox{display:flex;gap:9px;align-items:center;font-size:14px;margin-top:12px}.actions{display:flex;gap:10px;flex-wrap:wrap}.button{border:0;border-radius:10px;padding:13px 17px;font-weight:750}.primary{background:#ec754e;color:#222}.secondary{background:#e6ede2;color:#263a29}.button:disabled{opacity:.5;cursor:not-allowed}progress{width:100%;height:11px;accent-color:#ec754e;margin-top:15px}#progress-label{font-size:12px;color:#5e6d5d;display:block}.limits{padding:45px 0;max-width:850px}.limits h2{font-size:27px}.limits p{line-height:1.7;color:#687568}footer{display:flex;justify-content:space-between;gap:16px;max-width:1280px;margin:auto;padding:25px 28px;border-top:1px solid #dfe5db;color:#6b776a;font-size:12px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#26392b;color:white;padding:13px 18px;border-radius:10px;box-shadow:0 10px 30px #0003;max-width:min(90vw,560px);z-index:10}[hidden]{display:none!important}@media(max-width:850px){.workspace{grid-template-columns:1fr}.preview-column{position:static}.drop{min-height:270px}.intro{padding:26px 0}.intro h1{letter-spacing:-2px}.player-wrap video{max-height:48vh}.panel{padding:18px}.top-note{display:none}}@media(max-width:460px){main,.topbar,footer{padding-left:16px;padding-right:16px}.row-top{grid-template-columns:1fr 1fr auto}.row input[type=number]{padding:7px}.field{grid-template-columns:1fr 1fr auto}.caption-overlay{font-size:26px}}
.generate-panel{border-color:#edc7b7;background:linear-gradient(150deg,#fff 68%,#fff2e9)}.generate-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.generate-options label{font-size:12px;font-weight:700;color:#556556;display:grid;gap:6px}.generate-options select{border:1px solid #d5ddd0;border-radius:8px;background:#fff;padding:10px;width:100%;color:#29372b}#asr-status{display:block;font-size:13px;color:#526653;margin:7px 0}#asr-progress progress{margin-top:16px}@media(max-width:560px){.generate-options{grid-template-columns:1fr}}
.player-wrap{display:flex;align-items:center;justify-content:center;min-height:0}.video-stage{position:relative;display:inline-block;max-width:100%;line-height:0}.video-stage video{max-width:100%;width:auto;max-height:65vh;height:auto}.caption-overlay{bottom:17%;left:6%;right:6%;font-size:clamp(18px,4vw,34px);line-height:1.18;max-height:55%;overflow:hidden;text-wrap:balance}.subtitle-settings{margin-top:18px;padding-top:12px;border-top:1px solid #e8d8cf}.subtitle-settings h3{font-size:16px;margin:3px 0 12px}.subtitle-settings .field{grid-template-columns:minmax(105px,1fr) minmax(80px,1fr) auto}.subtitle-settings .field input[type=color]{width:100%;height:40px;border:1px solid #d5ddd0;border-radius:8px;padding:3px;background:#fff}.timing-shift{display:flex;align-items:center;gap:9px;margin-top:17px;flex-wrap:wrap;font-size:13px}.timing-shift label{flex:1 0 100%}.timing-shift input{width:100px;padding:8px;border:1px solid #d5ddd0;border-radius:8px}.row-time{font-size:11px;color:#5d6e5f;margin:4px 0 0;font-variant-numeric:tabular-nums}@media(max-width:850px){.video-stage video{max-height:48vh}}@media(max-width:460px){.subtitle-settings .field{grid-template-columns:1fr 1fr auto}.caption-overlay{font-size:clamp(18px,5vw,28px)}}

/* Keep the overlay and video in the same coordinate system. */
.video-stage video{display:block}
.caption-overlay{right:auto;bottom:auto;top:83%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:86%;max-height:none;overflow:visible;pointer-events:auto;cursor:move;touch-action:none;user-select:none;overflow-wrap:anywhere}
.fullscreen-button{position:absolute;right:8px;top:8px;z-index:4;background:#171b19;color:white}
video::-webkit-media-controls-fullscreen-button{display:none!important}
.video-stage:fullscreen,.video-stage.expanded{background:#000;width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center}
.video-stage.expanded{position:fixed;inset:0;z-index:1000}
.video-stage:fullscreen video,.video-stage.expanded video{width:100%;height:100%;max-height:100%;object-fit:contain}

#video-frame{position:relative;overflow:hidden;background:#141914;max-width:100%}
.video-stage #video{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover}
#video-frame .caption-overlay{text-wrap:wrap}
#export-result{margin-top:20px;padding-top:12px;border-top:1px solid #d5ddd0}
#result-video,#export-canvas{display:block;width:100%;max-height:65vh;object-fit:contain;background:#141914;margin:12px 0}
#export-canvas{position:fixed;bottom:12px;right:12px;width:180px;max-height:240px;z-index:8;border:2px solid #ec754e}
body.exporting #video{pointer-events:none}