*{box-sizing:border-box}body{margin:0;background:#050914;color:#f0f6ff;font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:38px 28px 60px}a{color:#00e5ee}.back{text-decoration:none;font-size:14px}header{margin:48px 0 34px}header h1{margin:8px 0;font-size:clamp(32px,5vw,56px)}.eyebrow{font-size:12px;letter-spacing:.16em;color:#00e5ee}h2{font-size:20px;margin:0 0 8px}p{margin:8px 0}.intro,.small,footer{color:#a1b3cd}.small{font-size:13px}.panel,.clip{border:1px solid #22385c;border-radius:16px;background:#0d1425;padding:26px}.upload{text-align:center;border-style:dashed;padding:30px}.upload.drag{border-color:#00f0ff;background:#10323f}.upload-icon{font-size:36px;color:#00e5ee}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:2px solid #00e5ee}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 18px;border:1px solid #34506b;border-radius:8px;background:#14273a;color:#c4faff;font:600 14px system-ui;cursor:pointer;text-decoration:none}button:disabled{opacity:.4;cursor:default}.primary{background:#00e5ee!important;color:#05212d!important;border-color:#00e5ee!important}.button{margin:14px 0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:30px 0 8px}.section-heading h2{margin:0}#count{color:#00e5ee}.clip{display:grid;grid-template-columns:260px 1fr;gap:24px;margin:16px 0}.clip video{width:100%;height:168px;background:#000;border-radius:9px}.clip-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.clip-title h3{font-size:16px;margin:0;overflow-wrap:anywhere}.clip-actions{display:flex;gap:6px;flex-shrink:0}.clip-actions button{padding:7px 10px}.trim{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.trim label{display:block}input[type=number]{width:92px;padding:6px;border:1px solid #34506b;border-radius:6px;background:#08121f;color:white;font:inherit}input[type=range]{width:100%;accent-color:#00e5ee}input[type=checkbox]{accent-color:#00e5ee}details{margin-top:12px}summary{cursor:pointer;color:#a1b3cd;font-size:14px}.mute-range{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.mute-range button{padding:6px 10px}.export-panel{margin-top:26px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}progress{width:100%;margin-top:18px;accent-color:#00e5ee}#status{padding:12px 0;color:#aac8dc;white-space:pre-line}#status.error{color:#ffb4ac}#output{display:block;width:100%;max-height:460px;background:black}footer{text-align:center;font-size:12px;margin-top:40px}dialog{width:min(800px,92vw);border:1px solid #34506b;border-radius:16px;background:#0d1425;color:white}dialog::backdrop{background:#000b}dialog .section-heading{margin:0 0 16px}#sequence{width:100%;max-height:65vh;background:black}[hidden]{display:none!important}@media(max-width:680px){main{padding:24px 16px}.clip{grid-template-columns:1fr;padding:18px;gap:14px}.clip video{height:200px}.clip-title{align-items:flex-start}.panel{padding:20px}.trim{gap:12px}header{margin-top:28px}.clip-actions button{padding:6px 9px}}
.timeline-panel{margin-top:26px}.timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.timeline-heading h2{margin:0}.timeline-scroll{overflow-x:auto;padding:2px 0 12px;scrollbar-color:#34506b #08121f}.timeline{min-width:100%}.timeline-ruler{height:30px;position:relative;margin-right:1px;color:#9cb3ca;font:11px system-ui}.timeline-ruler>span{position:absolute;top:0;border-left:1px solid #34506b;padding-left:5px;height:25px}.timeline-ruler .timeline-end{right:0;border-left:0;border-right:1px solid #34506b;padding:0 5px 0 0}.timeline-track{display:flex;gap:0;height:86px;background:#08121f;border-radius:6px;overflow:hidden}.timeline-block{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-width:0;padding:10px 8px 22px;overflow:hidden;border:1px solid hsl(var(--clip-hue) 55% 48%);border-radius:4px;background:hsl(var(--clip-hue) 45% 16%)!important;color:#effbff!important;text-align:left;flex-shrink:0}.timeline-block:hover{filter:brightness(1.3)}.timeline-block:focus-visible{outline-offset:-3px;z-index:1}.timeline-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.timeline-length{font:11px system-ui;color:#bad1df}.timeline-audio{position:absolute;bottom:0;left:0;right:0;height:15px;background:#328d85;border-top:1px solid #78d4bf}.timeline-muted{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,#495361 0 4px,#9ca5b0 4px 6px)}.clip:focus{outline:2px solid #00e5ee;outline-offset:3px}@media(max-width:680px){.timeline-heading{align-items:flex-start;flex-direction:column}.timeline-heading .small{font-size:12px}}
.timeline-block{padding:0;display:block}.timeline-select{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;width:100%;height:100%;padding:10px 15px 22px;border:0;border-radius:0;background:transparent!important;color:inherit!important;text-align:left}.trim-handle{position:absolute;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;background:#00e5ee33;color:#e6ffff;cursor:ew-resize;touch-action:none;user-select:none;z-index:2;font-size:20px;border:1px solid #81faff66}.trim-handle-start{left:0;border-radius:3px 0 0 3px}.trim-handle-end{right:0;border-radius:0 3px 3px 0}.trim-handle:hover,.trim-handle:focus-visible,.trimming .trim-handle{background:#00c6d8;color:#03232c;outline:none}.timeline-select:focus-visible{outline-offset:-4px}.timeline-block.trimming{overflow:visible;z-index:3}.timeline-block.trimming .timeline-select{overflow:hidden}.timeline-track{overflow:visible}.timeline-scroll{padding-top:4px}
.timeline-help{margin:0 0 12px}.timeline-audio{height:23px;cursor:crosshair;touch-action:none;z-index:3;user-select:none}.timeline-audio:focus-visible{outline:2px solid white;outline-offset:-2px}.timeline-audio:hover{filter:brightness(1.2)}.mute-selection{outline:2px solid #fff;outline-offset:-2px;background:repeating-linear-gradient(135deg,#36515e 0 4px,#e5ffff 4px 6px);pointer-events:none}.trim-handle{bottom:23px}.timeline-select{padding-bottom:29px}
.frame-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.frame-actions button{font-size:12px;padding:8px 10px}
.reorder-grip{touch-action:none;cursor:grab}.reorder-grip:active{cursor:grabbing}.clip.drop-before{border-top:3px solid #00f0ff}.clip.drop-after{border-bottom:3px solid #00f0ff}.timeline-block.drop-before{box-shadow:inset 4px 0 #fff}.timeline-block.drop-after{box-shadow:inset -4px 0 #fff}
.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:5;pointer-events:none;box-shadow:0 0 5px #000}.timeline-playhead::before{content:"";position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid white}#timeline-position{align-self:center}.timeline-panel .actions{margin-bottom:12px}
#timeline-frame-preview{display:block;width:240px;max-width:100%;height:135px;object-fit:contain;background:#000;border:1px solid #34506b;border-radius:8px;margin-top:12px}
.timeline-playhead{width:14px;margin-left:-7px;background:linear-gradient(to right,transparent 6px,#fff 6px,#fff 8px,transparent 8px);pointer-events:auto;touch-action:none;cursor:ew-resize;box-shadow:none}.timeline-playhead::before{left:2px}.timeline-playhead:focus-visible{outline:2px solid #00f0ff}#timeline-frame-preview{width:320px;max-height:260px}
#timeline-preview-wrap{position:relative;width:320px;max-width:100%;margin-top:12px}#timeline-preview-wrap video{margin:0;width:100%}#close-timeline-preview{position:absolute;right:6px;top:6px;z-index:2;width:36px;height:36px;padding:0;font-size:23px;background:#08121fe6;color:white}@media(max-width:680px){#timeline-preview-wrap{width:100%;max-width:360px}.timeline-panel .actions button{min-height:44px}.timeline-playhead{width:24px;margin-left:-12px;background:linear-gradient(to right,transparent 11px,#fff 11px,#fff 13px,transparent 13px)}.timeline-playhead::before{left:7px}}
#timeline-preview-wrap{margin-left:auto;margin-right:auto}
.timeline-controls{justify-content:center;align-items:center}.timeline-controls button{width:44px;height:44px;padding:10px}.timeline-controls svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#timeline-position{flex-basis:100%;text-align:center}.timeline-controls button:focus-visible{outline-offset:3px}
.timeline-controls button[aria-pressed="true"]{background:#00e5ee!important;color:#05212d!important;border-color:#00e5ee}#timeline-preview-wrap:fullscreen{width:100vw!important;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;background:#000}#timeline-preview-wrap:fullscreen video{width:100%;height:100%;max-height:100vh;}#timeline-preview-wrap:fullscreen #close-timeline-preview{position:fixed;top:16px;right:16px}
#timeline-preview-wrap:fullscreen video{width:min(100vw,calc(100vh * var(--preview-ratio)))!important;height:auto!important;max-height:none}
.clip-undo-notice{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0;padding:12px 16px;border:1px solid #34506b;border-radius:10px;background:#0d1425}.clip-undo-notice span{overflow-wrap:anywhere;min-width:0}.clip-undo-notice button{flex-shrink:0;min-height:44px}#timeline-remove{margin-left:10px}#remove-clip-dialog{max-width:480px}#remove-clip-description{overflow-wrap:anywhere}#remove-clip-dialog button[value="remove"]{color:#ffb4ac;border-color:#9a5757}
#clip-details{margin-top:24px}.clip-details-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:12px 16px;margin:0;border:1px solid #22385c;border-radius:10px;background:#0d1425;font-size:18px;color:#f0f6ff;cursor:pointer}.clip-details-heading>span:first-child::before{content:"▸";display:inline-block;margin-right:10px;color:#00e5ee}#clip-details[open]>.clip-details-heading>span:first-child::before{content:"▾"}.clip-details-heading #duration{font-size:13px;font-weight:400}.clip-details-heading:focus-visible{outline:2px solid #00e5ee;outline-offset:3px}
#timeline-preview-wrap.preview-expanded{width:720px;max-width:100%}#timeline-preview-wrap.preview-expanded video{max-height:65vh}#timeline-enlarge[aria-pressed="true"]{background:#00e5ee!important;color:#05212d!important}
#timeline-preview-empty{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;padding:42px 20px;background:#000;border:1px solid #34506b;border-radius:8px;color:#a1b3cd}

.timeline-mobile-help{display:none}@media(max-width:680px){.timeline-mobile-help{display:block;margin:0 0 10px}}

#timeline-frame-preview.crop-draggable{touch-action:none;cursor:grab}#timeline-frame-preview.crop-draggable:active{cursor:grabbing}#crop-position-controls{text-align:center;margin:10px 0}

.timeline-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.timeline-title button{font-size:12px;padding:8px 12px;min-height:44px}

.output-ratio-control{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.output-ratio-control select{min-height:44px;max-width:100%;padding:8px;background:#08121f;color:#effbff;border:1px solid #34506b;border-radius:6px}.output-ratio-control .small{flex-basis:100%;text-align:center}#timeline-preview-wrap{width:min(100%,320px,calc(65vh * var(--preview-ratio,1)))}#timeline-preview-wrap.preview-expanded{width:min(100%,720px,calc(65vh * var(--preview-ratio,1)))}#timeline-preview-wrap video,#timeline-preview-wrap.preview-expanded video{max-height:none}

.timeline-controls #timeline-ratio{width:60px;padding:4px}.timeline-controls #timeline-ratio svg{width:48px;height:36px}.timeline-controls #timeline-ratio text{fill:currentColor;stroke:none;font:bold 7px system-ui,sans-serif;letter-spacing:0}

.timeline-controls #timeline-ratio-menu{width:28px;padding:6px 3px;margin-left:-8px}.timeline-controls #timeline-ratio-menu[aria-expanded=true]{background:#00e5ee;color:#05212d}

#output-ratio-panel{position:fixed;z-index:1000;width:280px;max-width:calc(100vw - 16px);margin:0;padding:14px;background:#101d30;border:1px solid #52708e;border-radius:10px;box-shadow:0 8px 28px #0008;box-sizing:border-box}#output-ratio-panel select{width:100%}

#extra-tools-tab{white-space:nowrap}#extra-audio-tools{border-top:1px solid #304057;margin-top:16px;padding-top:12px}#music-upload{max-width:100%}.music-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.music-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px}.music-fields input{width:100%;min-width:0;box-sizing:border-box}.music-lane{position:relative;height:48px;margin-top:12px;background:#132a29;border-radius:8px;overflow:hidden}.music-block{position:absolute;top:4px;height:40px;display:flex;min-width:8px;border:1px solid #75d8b4;border-radius:6px;background:#21534c;box-sizing:border-box}.music-block button{touch-action:none;min-width:0;padding:3px;border:0;border-radius:0;background:transparent;color:#dcfff5}.music-block .music-move{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:grab;font-size:12px}.music-start,.music-end{flex:0 0 22px;cursor:ew-resize!important;background:#397568!important}.music-block button:focus-visible{outline:2px solid white;outline-offset:-2px}@media(max-width:680px){.music-fields{grid-template-columns:repeat(2,minmax(0,1fr))}#extra-audio-tools .actions{flex-wrap:wrap}#extra-tools-tab{font-size:12px;padding:7px 10px}}

#music-upload{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}#music-upload:focus-visible{position:static;width:auto;height:auto;opacity:1}

#extra-audio-tools .actions>.button,#extra-audio-tools .actions>button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:40px;padding:9px 12px;margin:0;font:500 13px/1.4 system-ui;border-radius:8px;vertical-align:middle}#extra-audio-tools .actions>[hidden]{display:none}.music-source-picker{display:flex;flex-direction:column;gap:6px;padding:8px 0;color:#a6b5ca;font-size:12px}.music-source-picker input{width:100%;min-height:28px;accent-color:#75d8b4;cursor:ew-resize}

.timeline-controls #extra-tools-tab{padding:8px;font-size:inherit}.timeline-controls #extra-tools-tab[aria-expanded=true]{border-color:#75d8b4;background:#183c38}


.music-block.music-selected{outline:2px solid #dcfff5;outline-offset:-2px;box-shadow:0 0 8px #75d8b455}

.music-block .music-waveform{position:absolute;inset:13px 0 0;width:100%;height:26px;pointer-events:none;opacity:.65}.music-waveform path{stroke:#a4f2d9;stroke-width:1.8;fill:none}.music-block .music-move{position:relative;z-index:1;text-align:left;align-self:stretch;padding:0 6px 22px;font-size:11px;text-shadow:0 1px 3px #092c25}.music-block .music-start,.music-block .music-end{position:relative;z-index:2}
/* Give the waveform a dedicated, high-contrast area below the filename. */
.music-lane{height:86px;background:#0b2225}
.music-block{height:78px;background:#123b3d;border-color:#66e4cf}
.music-block .music-waveform{inset:25px 0 0;height:48px;opacity:1;background:#092c31}
.music-waveform path{stroke:#74ffe0;stroke-width:2.3}
.music-block .music-move{padding:3px 8px 53px;color:#effffb;font-size:12px}
.music-block .music-start,.music-block .music-end{background:#24635d!important}