*{box-sizing:border-box} :root{color-scheme:light;--ink:#20232b;--muted:#777d8b;--line:#e3e6ec;--blue:#345beb;--soft:#edf1ff}
body{margin:0;background:#f6f7f9;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit;color:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:white;border-radius:7px;padding:9px 13px;font-size:12px;font-weight:550;white-space:nowrap}button:hover{background:#f2f4f8}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}a{color:inherit;text-decoration:none}p{margin:0;color:var(--muted)}h1,h2{margin:0;font-weight:650;letter-spacing:-.6px}h1{font-size:25px}h2{font-size:17px}input,textarea,select{border:1px solid var(--line);border-radius:6px;padding:9px;background:white;min-width:0}label{display:block;font-size:12px;color:#616875}label>select,label>input:not([type=checkbox]):not([type=color]){display:block;width:100%;margin-top:5px}.hidden{display:none!important}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#2546bf}.button{display:inline-block;border-radius:7px;padding:10px 16px;font-size:13px;font-weight:600}.app-header{display:flex;align-items:center;gap:25px;height:76px;padding:0 34px;border-bottom:1px solid var(--line);background:white}.brand{font-size:24px;font-weight:750;letter-spacing:-1px}.brand span{font-size:10px;letter-spacing:0;color:var(--muted);font-weight:400;display:block}.app-header nav{display:flex;align-items:center;gap:23px;font-size:12px}.app-header nav button{border:0;padding:0}.app-header #saveState{margin-left:auto;font-size:11px;color:var(--muted)}.app-header .primary{min-width:110px}main{max-width:1320px;margin:auto;padding:24px 34px 16px}.project-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:15px}.project-bar p{font-size:11px;margin-top:3px}.steps{display:flex;gap:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}.steps button{border:0;border-radius:0;background:none;padding:7px 0 13px;color:#8a909b}.steps button.active{border-bottom:2px solid var(--blue);color:var(--ink)}.steps b{display:inline-grid;place-items:center;width:21px;height:21px;font-size:11px;border-radius:50%;background:#e9ecf1;margin-right:6px}.steps .active b{background:var(--soft);color:var(--blue)}
.editor-layout{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.2fr);gap:28px;align-items:start}.preview{min-width:0}.preview-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#687080;margin:0 0 11px}.preview-heading label{font-size:11px;display:flex;align-items:center;gap:5px}.preview-heading input{accent-color:var(--blue)}.screens{display:flex;justify-content:center;gap:12px;background:#e8ebef;padding:16px;border-radius:10px}.screen-column{min-width:0;width:min(100%,calc(58vh * 9 / 16))}.screen-label{display:none;font-size:10px;color:#626b78;margin-bottom:7px}.screens.comparing .screen-column{width:50%}.screens.comparing .screen-label{display:block}.stage{position:relative;aspect-ratio:9/16;background:#14161a;border-radius:4px;overflow:hidden}.stage video{width:100%;height:100%;display:block;object-fit:contain}.stage img{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}#textBox{position:absolute;left:50%;top:63.28%;width:72%;min-height:20px;transform:translate(-50%,-50%);border:1px dashed #ffffff75;touch-action:none;cursor:grab}#textBox span{position:absolute;right:-3px;bottom:-3px;width:5px;height:5px;background:white;border:1px solid #43506b}.transport{display:flex;align-items:center;justify-content:center;gap:12px;margin:13px 0 7px}.transport button{border:0;background:none;padding:5px;font-weight:500}.transport .play{border-radius:50%;background:var(--ink);color:white;width:35px;height:35px}.transport output{font:11px ui-monospace,monospace;margin-left:auto}.transport select{font-size:11px;padding:5px;width:70px}input[type=range]{accent-color:var(--blue);padding:0;width:100%;cursor:pointer;height:16px;border:0;background:none}.caption-help{font-size:10px;text-align:center;margin:7px 0 16px}.style-panel{border:1px solid var(--line);border-radius:8px;background:white;padding:13px 15px}.style-panel summary{cursor:pointer;font-size:12px;font-weight:600}.style-panel summary span{float:right;color:var(--muted);font-size:10px;font-weight:400}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:17px}.style-grid output{float:right;color:var(--muted);font-variant-numeric:tabular-nums}.color-label{display:flex;align-items:center;gap:15px}input[type=color]{padding:0;border:0;width:30px;height:24px;background:none}.position-presets{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.position-presets button{font-size:11px;flex:1}
.lyrics-panel{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}.lyrics-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 14px;gap:12px}.lyrics-heading p{font-size:11px;margin-top:3px}.lyrics-heading button{font-size:11px;color:#728095;border:0;background:#f3f5f8}.lyrics-heading button[aria-pressed=true]{color:var(--blue);background:var(--soft)}.lyrics-actions{display:flex;flex-wrap:wrap;padding:0 22px 12px;gap:8px}.lyrics-actions button{font-size:11px}.lyrics-actions #undo{margin-left:auto}.source-note{font-size:10px;margin:0 22px 10px;min-height:15px}.prompter{height:clamp(230px,37vh,450px);overflow:auto;overscroll-behavior:contain;padding:50px 16px 100px;scrollbar-width:thin;scrollbar-color:#c8ceda transparent;position:relative;scroll-behavior:auto;border-block:1px solid #f0f1f4}.lyric-line{display:grid;grid-template-columns:27px 46px 1fr;gap:9px;align-items:baseline;padding:11px 10px;border-radius:7px;color:#9a9eaa;min-height:52px;transition:background .12s}.lyric-line.active{background:#f1f4ff;color:var(--ink)}.line-number{font-size:10px;color:#b0b6c1;font-variant-numeric:tabular-nums}.line-time{border:0;background:none;font-size:10px;font-weight:400;color:#929bab;padding:2px 0;font-variant-numeric:tabular-nums}.line-words{line-height:1.7}.lyric-word{display:inline;border:0;font-size:21px;line-height:1.7;padding:1px 3px;background:transparent;border-radius:3px;font-weight:450;color:inherit;white-space:normal}.lyric-word:hover{background:#e5eaf6}.lyric-word.current{color:var(--blue);background:#dde5ff}.lyric-word.selected{box-shadow:inset 0 -2px 0 #4865bb}.word-editor{padding:15px 22px 16px;background:#fafbfd}.word-editor-heading{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:12px}.word-editor-heading>span:last-child{font-size:10px;color:#969eab}.word-fields{display:grid;grid-template-columns:1fr 85px 85px;gap:9px}.word-fields label{font-size:10px}.word-fields input{font-size:13px;padding:7px 9px}.word-tools,.line-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.word-tools button,.line-tools button{font-size:10px;padding:7px 9px;font-weight:450}.line-tools{border-top:1px solid var(--line);padding-top:10px}.line-tools button{color:#546277;border:0;background:none;padding:4px 0;margin-right:10px}#editHint{font-size:10px;margin-top:11px}footer{display:flex;align-items:center;gap:20px;font-size:10px;color:#8c93a0;margin-top:22px}footer>span{margin-right:auto}footer button{border:0;background:none;padding:0;font-size:10px;color:#7e8795}.job{display:flex;align-items:center;gap:12px;background:#eaf0ff;border:1px solid #d8e3ff;border-radius:8px;padding:12px 18px;margin-bottom:18px;font-size:12px;color:#365caa}.job #jobElapsed{margin-left:auto}.spinner{display:inline-block;border:2px solid #b7c7eb;border-top-color:#345beb;width:17px;height:17px;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
dialog{border:1px solid var(--line);border-radius:12px;padding:25px;width:calc(100% - 28px);max-width:590px;max-height:90vh;overflow:auto;color:var(--ink);background:white}dialog::backdrop{background:#1017247a;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.dialog-heading h2{font-size:23px}.dialog-heading button{border:0;font-size:24px;padding:0 5px;font-weight:400}dialog>p{font-size:12px;margin-bottom:16px}textarea{display:block;width:100%;resize:vertical;min-height:180px;max-height:40vh;line-height:1.7;font-size:16px;padding:14px}dialog>label{margin-top:15px}dialog label select{margin-top:6px}dialog .help{font-size:11px;margin-top:12px;line-height:1.7}.dialog-tools{display:flex;justify-content:space-between;margin-top:10px;gap:8px}.dialog-tools button{font-size:11px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.error{color:#b44236;font-size:12px;margin:12px 0 0}.error:empty{display:none}#exportPreview{display:block;width:100%;max-height:45vh;margin:18px 0;background:#17191d}#projectList button{display:block;width:100%;text-align:left;margin-top:10px;white-space:normal;padding:13px}#projectList small{display:block;font-weight:400;color:var(--muted)}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:30;background:#242a37;color:white;padding:12px 18px;border-radius:8px;max-width:calc(100% - 30px);width:max-content;font-size:12px;box-shadow:0 3px 15px #0002}.toast.error{background:#963f34}
@media(min-width:1450px){.screen-column{width:min(100%,360px)}}@media(max-width:900px){.app-header{padding:0 20px;gap:18px}.app-header nav{gap:14px}.brand span{display:none}main{padding:22px 20px}.editor-layout{gap:18px;grid-template-columns:minmax(280px,.85fr) minmax(350px,1.15fr)}.lyrics-heading,.word-editor{padding-left:16px;padding-right:16px}.lyrics-actions{padding-left:16px;padding-right:16px;flex-wrap:wrap}.source-note{margin-inline:16px}.lyric-line{grid-template-columns:20px 38px 1fr;gap:5px;padding-inline:6px}.lyric-word{font-size:19px}.word-editor-heading>span:last-child{display:none}.word-fields{grid-template-columns:1fr 73px 73px}.transport{gap:7px}.app-header #saveState{font-size:9px}}
@media(max-width:680px){.app-header{height:64px;padding:0 14px;gap:12px}.brand{font-size:22px}.app-header nav{gap:10px;font-size:10px}.app-header nav button{font-size:10px}.app-header #saveState{display:none}.app-header .primary{min-width:0;margin-left:auto;padding:8px 12px;font-size:11px}main{padding:18px 14px}.project-bar{gap:10px}h1{font-size:21px}.project-bar button{font-size:10px;padding:7px 9px}.steps{gap:20px;margin-bottom:16px}.steps button{font-size:11px}.editor-layout{display:flex;flex-direction:column;gap:18px}.preview,.lyrics-panel{width:100%}.screens{padding:12px}.screen-column{width:min(100%,210px)}.screens.comparing .screen-column{width:50%}.transport{justify-content:center;gap:15px}.transport output{margin-left:0}.style-panel summary span{font-size:9px}.lyrics-heading{padding:16px}.lyrics-heading h2{font-size:16px}.lyrics-heading button{font-size:10px;padding:7px}.lyrics-actions{padding-bottom:10px}.lyrics-actions button{font-size:10px;padding:7px 9px}.prompter{height:280px;padding:60px 10px 90px}.lyric-word{font-size:21px}.word-fields{grid-template-columns:1fr 78px 78px}.word-editor{padding:14px}.word-tools{gap:5px}.word-tools button{font-size:10px}.line-tools{gap:8px}footer{flex-wrap:wrap;gap:12px}footer>span{width:100%;font-size:9px}.dialog-heading h2{font-size:21px}dialog{padding:20px}.dialog-actions{flex-direction:column}.dialog-tools button{font-size:10px;padding:7px 9px}.preview-heading{font-size:10px}.preview-heading label{font-size:10px}}
.stage video{position:absolute;inset:0}.video-surface{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;visibility:hidden}.video-surface.ready{visibility:visible}
.case-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 22px 12px}.case-toolbar button,.case-toolbar select{font-size:11px;padding:6px 9px}.case-toolbar select{max-width:100%}.case-toolbar span{font-size:11px;color:var(--muted)}.case-toolbar button[aria-pressed=true]{color:var(--blue);background:var(--soft)}.line-check{display:none;margin:0;width:18px;height:18px;accent-color:var(--blue)}.prompter.selecting .line-check{display:block}.prompter.selecting .line-number{display:none}.lyric-line.checked{background:#edf1ff;box-shadow:inset 2px 0 var(--blue)}.word-text-label{font-size:11px}.word-text-label input{font-size:15px}.timing-editor{margin-top:15px}.timing-editor>label{display:flex;justify-content:space-between;font-size:11px}.timing-editor output{font-variant-numeric:tabular-nums;color:var(--blue)}.wave-zoom{height:64px;position:relative;margin-top:8px;border-radius:5px;overflow:hidden;background:#edf0f5}#wordWaveform{width:100%;height:100%;display:block}.onset-marker,.wave-playhead{position:absolute;inset:0 auto 0 0;width:2px;background:var(--blue);pointer-events:none}.wave-playhead{background:#6f7788;width:1px}.onset-marker{z-index:1}#onsetSlider{height:30px;display:block;margin:0;touch-action:pan-y}#onsetSlider::-webkit-slider-thumb{width:22px;height:22px}.wave-labels{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#7d8594;font-variant-numeric:tabular-nums}.wave-labels span:nth-child(2){text-align:center;font-size:9px}.audition-tools{display:flex;gap:8px;margin-top:11px}.audition-tools button{font-size:11px}.audition-tools [aria-pressed=true]{background:var(--soft);color:var(--blue);border-color:#b8c6fd}.exact-timing{margin-top:14px}.exact-timing summary{font-size:10px;color:#747e8e;cursor:pointer}.exact-timing .word-fields{grid-template-columns:1fr 1fr;margin-top:10px}.text-export-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.text-export-actions a{font-size:11px;color:var(--muted);padding-left:0}#copyStatus{margin:10px 0 0;font-size:12px}#saveState[data-error=true],#projectDetail[data-error=true]{color:#a63d2d}
@media(max-width:680px){.case-toolbar{padding-inline:16px}.word-editor input[type=number]{font-size:16px}.audition-tools button{min-height:40px}.line-check{width:22px;height:22px}.prompter.selecting .lyric-line{grid-template-columns:24px 38px 1fr}}
.partial-text{padding:12px 18px;margin:-7px 0 18px;border-left:2px solid var(--blue);font-size:13px;max-height:130px;overflow:auto;background:white}
@media(max-width:680px){
  html{scroll-padding-top:calc(30vh + 200px)}
  /* Keep the picture and playback controls in view while editing the lyrics. */
  .preview{position:sticky;top:0;z-index:3;background:#f6f7f9;padding:9px 0 12px;border-bottom:1px solid var(--line)}
  .preview:has(#stylePanel[open]){position:relative}
  .screen-column{width:min(100%,calc(30vh * 9 / 16));max-width:calc(30vh * 9 / 16)}
  .screens{padding:9px}
  .caption-help{display:none}
  .style-panel{margin-top:9px;padding:10px 13px}
  .prompter{height:240px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.text-export-actions .download-link{padding:9px 13px;border:1px solid var(--line);color:var(--ink);font-size:12px}.download-link:not([href]){opacity:.4;pointer-events:none}
.case-actions{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;padding-top:4px}
.lyric-word.needs-review{text-decoration:underline dotted #bd7a21;text-underline-offset:5px}
.case-actions button{min-height:36px;background:#f8f9fc}.case-actions button:hover{background:var(--soft);color:var(--blue);border-color:#b7c6ff}
.timing-values{display:flex;justify-content:space-between;gap:10px;font-size:11px}.timing-values output{margin-left:5px}
.wave-zoom{height:90px;margin:12px 12px 7px;overflow:visible;cursor:crosshair}
#wordWaveform{border-radius:5px}.word-range{position:absolute;top:0;bottom:0;background:#5276eb20;border-block:2px solid #5276eb70;pointer-events:none}
.time-handle{position:absolute;width:28px;height:50%;transform:translateX(-50%);z-index:2;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.time-handle.start{top:0}.time-handle.end{bottom:0}
.time-handle::before{content:"";position:absolute;left:13px;width:2px;height:200%;background:var(--blue);pointer-events:none}
.time-handle.start::before{top:0}.time-handle.end::before{bottom:0}
.time-handle span{position:absolute;left:4px;width:20px;height:28px;display:grid;place-items:center;background:var(--blue);color:white;border-radius:4px;font-size:18px;box-shadow:0 1px 3px #243c7830}
.time-handle.start span{top:0}.time-handle.end span{bottom:0}
.time-handle:hover span,.time-handle:focus span{background:#1e3fae}.wave-playhead{z-index:1}
.wave-tools{display:flex;align-items:center;gap:8px;margin-top:10px}.wave-tools button{font-size:10px;padding:6px 9px;min-height:32px}.wave-tools [aria-pressed=true]{color:var(--blue);background:var(--soft)}
.wave-zoom-tools{display:flex;gap:4px;margin-left:auto}.wave-zoom-tools button{width:33px;padding-inline:0;font-size:15px}
.audition-tools{flex-wrap:wrap}.audition-tools #resetDisplayEnd{margin-left:auto;font-size:10px}
@media(max-width:680px){.case-actions button{min-height:40px}.wave-tools button{min-height:38px}.timing-values{font-size:10px}}
.onset-limits,.wave-boundaries{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:5px}
.word-boundary{position:absolute;top:0;bottom:0;border-left:1px dashed #69758b80}
.word-boundary>span{position:absolute;left:3px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:15px;padding:0 3px;border-radius:3px;background:#fafbfdde;color:#5d687c}
.word-boundary.selected{border-color:var(--blue)}.word-boundary.selected>span{color:var(--blue);font-weight:650}
.word-tracks{margin:14px 12px 0;max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0 14px;position:relative}
/* The rail, waveform and word boundaries share exactly the same horizontal scale. */
.word-tracks{margin-inline:0;padding-inline:12px}
.word-track{position:relative;padding-top:20px;margin-bottom:8px}
.track-label{position:absolute;top:0;left:0;padding:0 4px;border:0;background:transparent;font-size:11px;line-height:18px;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.track-time{position:absolute;right:0;top:1px;font:9px/16px ui-monospace,monospace;color:#8a93a3}
.track-rail{position:relative;height:36px;background:#eef1f6;border-radius:4px}
.track-range{position:absolute;top:7px;height:22px;background:#dce3f4;border:1px solid #b8c4df;border-radius:4px;pointer-events:none}
.word-track.selected .track-label{color:var(--blue);font-weight:700}
.word-track.selected .track-range{background:#dbe4ff;border-color:#5879df}
.track-handle{position:absolute;transform:translateX(-50%);width:28px;height:50%;z-index:1;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.track-handle.start{top:0}.track-handle.end{bottom:0}
.track-handle>span{position:absolute;left:8px;width:12px;height:18px;border-radius:3px;display:grid;place-items:center;background:#899abf;color:white;font-size:16px;line-height:1}
.track-handle.start>span{top:0}.track-handle.end>span{bottom:0}
.word-track.selected .track-handle>span,.track-handle:hover>span,.track-handle:focus>span{background:var(--blue)}
.track-handle.outside{opacity:.25;pointer-events:none}
.link-ends{display:flex;align-items:center;justify-content:flex-start!important;gap:8px;margin:10px 0;font-size:11px!important;color:#4e5e79}
.link-ends input{margin:0;accent-color:var(--blue);width:18px;height:18px;flex-shrink:0}
.timing-constraint,.timing-feedback{font-size:10px;line-height:1.6;margin-top:7px}.timing-feedback{color:#a33c31}.timing-feedback:empty{display:none}
.word-tools button.outside-time{border-style:dashed;color:#7c5a38}
.automatic-note{margin-top:18px;color:#425c8c;font-size:12px}
@media(min-width:681px){.preview{position:sticky;top:18px}}
@media(max-width:680px){.link-ends{min-height:40px}.track-rail{height:44px}.track-handle>span{height:22px}.word-tracks{max-height:300px}.timing-constraint{font-size:11px}}
@media(max-width:680px){body:has(#timingEditor:not(.hidden)) .screen-column{width:min(100%,calc(22vh * 9 / 16));max-width:calc(22vh * 9 / 16)}}
.saved-styles{display:flex;align-items:flex-end;gap:10px;margin-top:17px}.saved-styles label{flex:1;min-width:0}.saved-styles button{font-size:10px;white-space:normal;min-height:36px}.saved-styles select{font-size:11px}
.readability{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.readability summary{font-size:11px;font-weight:500}.readability summary span{font-size:9px}
.color-swatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.color-swatches button{width:23px;height:23px;border:1px solid #b6bec9;padding:0;border-radius:50%}.color-swatches button:hover{outline:2px solid #7082ad;outline-offset:2px}
.preset-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:12px}.preset-row button{font-size:10px}
#shareVideo{display:block;margin-top:10px;min-height:44px}
@media(max-width:680px){.saved-styles{align-items:stretch;flex-direction:column}.color-swatches button{height:44px;width:44px}.saved-styles button{min-height:44px}dialog input,dialog select{font-size:16px}}

@font-face{font-family:"Nunito";src:url("/fonts/Nunito.ttf") format("truetype");font-weight:200 1000;font-display:swap}