:root{--bg: #0e0f14;--panel: #181a22;--panel-hover: #20232e;--border: #2a2d3a;--accent: #6c7bff;--accent-2: #9b4dff;--text: #e9eaf0;--text-dim: #9aa0b0;--error: #ff6b6b;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(120% 80% at 50% -10%,#1a1d2b 0%,var(--bg) 60%);color:var(--text);display:flex;justify-content:center;padding:6vh 20px}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0px,rgba(255,255,255,.5) 1px,transparent 1px,transparent 3px),radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);background-size:100% 3px,3px 3px}@media (prefers-reduced-motion: reduce){.grain{opacity:.03}}#app{width:100%;max-width:540px;display:flex;flex-direction:column;gap:28px}header{text-align:center}h1{margin:0 0 8px;font-size:32px;letter-spacing:-.02em}.tagline{margin:0;color:var(--text-dim);font-size:15px;line-height:1.5}.steps-compact{display:block;margin:0;text-align:center;color:var(--text);font-size:14px;font-weight:600}.panels{position:relative}.panel{display:none}.wizard[data-step=choose] .panel[data-panel=choose],.wizard[data-step=trim] .panel[data-panel=trim],.wizard[data-step=edit] .panel[data-panel=edit],.wizard[data-step=process] .panel[data-panel=process],.wizard[data-step=result] .panel[data-panel=result]{display:block;animation:dither-in .42s steps(6,end) both}@property --dither{syntax: "<length>"; inherits: false; initial-value: 0px;}@keyframes dither-in{0%{--dither: 0px;opacity:.4}to{--dither: 7px;opacity:1}}.wizard[data-step] .panel{-webkit-mask-image:radial-gradient(circle at center,#000 0,#000 var(--dither),transparent var(--dither));mask-image:radial-gradient(circle at center,#000 0,#000 var(--dither),transparent var(--dither));-webkit-mask-size:4px 4px;mask-size:4px 4px;-webkit-mask-repeat:repeat;mask-repeat:repeat}@media (prefers-reduced-motion: reduce){.wizard[data-step=choose] .panel[data-panel=choose],.wizard[data-step=trim] .panel[data-panel=trim],.wizard[data-step=edit] .panel[data-panel=edit],.wizard[data-step=process] .panel[data-panel=process],.wizard[data-step=result] .panel[data-panel=result]{animation:none}.wizard[data-step] .panel{-webkit-mask-image:none;mask-image:none}}.dropzone{border:2px dashed var(--border);border-radius:18px;background:var(--panel);padding:56px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;outline:none;display:flex;align-items:center;justify-content:center}.dropzone:hover,.dropzone:focus-visible{background:var(--panel-hover);border-color:var(--accent)}.dropzone.dragover{border-color:var(--accent);background:var(--panel-hover);border-style:solid;transform:scale(1.01)}.dropzone-icon{font-size:48px;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}.dropzone-text{margin:0;font-size:19px;font-weight:600}.dropzone-hint{margin:6px 0 0;color:var(--text-dim);font-size:14px}.status{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px}.status-text{margin:0;color:var(--text);font-size:15px}.progress-track{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s ease}.result{display:flex;flex-direction:column;align-items:center;gap:16px}.trim-panel{flex-direction:column;align-items:stretch;gap:16px}.wizard[data-step=trim] .panel.trim-panel{display:flex}.trim-stage{position:relative;width:100%;height:160px;border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 20px 60px #00000080;touch-action:none}.trim-waveform{position:absolute;top:0;bottom:0;left:16px;right:16px;width:auto;height:100%}.trim-handle{position:absolute;top:0;bottom:0;width:32px;cursor:ew-resize;touch-action:none;z-index:2}.trim-handle:before{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--accent);box-shadow:0 0 0 1px #0006}.trim-handle:after{content:"";position:absolute;top:50%;width:13px;height:30px;margin-top:-15px;background:var(--accent);box-shadow:0 2px 6px #00000080}.trim-handle.is-in{margin-left:-29px}.trim-handle.is-in:before{right:0}.trim-handle.is-in:after{right:3px;border-radius:5px 0 0 5px}.trim-handle.is-out{margin-left:0}.trim-handle.is-out:before{left:0}.trim-handle.is-out:after{left:3px;border-radius:0 5px 5px 0}.trim-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff5a5a;box-shadow:0 0 4px #ff5a5acc;pointer-events:none;z-index:3}.trim-playhead[hidden]{display:none}.trim-play{--play-size: 48px;--play-opacity: 1;position:absolute;top:50%;left:50%;width:var(--play-size);height:var(--play-size);transform:translate(-50%,-50%);opacity:var(--play-opacity);border:none;border-radius:50%;background:#00000080;cursor:pointer;z-index:4;transition:background .15s,transform .1s}.trim-play:hover{background:#000000a6;transform:translate(-50%,-50%) scale(1.05)}.trim-play[data-state=paused]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:0;height:0;border-style:solid;border-width:calc(var(--play-size) * .19) 0 calc(var(--play-size) * .19) calc(var(--play-size) * .31);border-color:transparent transparent transparent #fff;transform:translate(calc(var(--play-size) * .04))}.trim-play[data-state=playing]:before,.trim-play[data-state=playing]:after{content:"";position:absolute;top:50%;width:calc(var(--play-size) * .1);height:calc(var(--play-size) * .38);margin-top:calc(var(--play-size) * -.19);background:#fff}.trim-play[data-state=playing]:before{left:calc(var(--play-size) * .33)}.trim-play[data-state=playing]:after{right:calc(var(--play-size) * .33)}.trim-play[data-state=loading]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:calc(var(--play-size) * .46);height:calc(var(--play-size) * .46);border-radius:50%;border:calc(var(--play-size) * .08) solid rgba(255,255,255,.3);border-top-color:#fff;animation:trim-spin .7s linear infinite}@keyframes trim-spin{to{transform:rotate(360deg)}}.trim-pill{position:absolute;bottom:8px;font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;padding:0 7px;height:24px;display:inline-flex;align-items:center;border-radius:7px;background:#0000008c;z-index:4}.trim-pill.is-start{left:20px}.trim-pill.is-end{right:20px}.trim-gauge{--fill: 0;position:absolute;top:8px;right:20px;width:36px;height:36px;border-radius:50%;background:#0000008c;z-index:4}.trim-gauge[hidden]{display:none}.trim-gauge:before{content:"";position:absolute;left:18px;top:20.25px;width:22.5px;height:22.5px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--accent) calc(var(--fill) * 360deg),transparent 0)}.trim-gauge svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.trim-reset,.trim-fit{position:absolute;top:8px;width:36px;height:36px;border:none;border-radius:50%;background:#0000008c;cursor:pointer;z-index:4;background-repeat:no-repeat;background-position:center;background-size:19px 19px}.trim-reset:not(:disabled):hover,.trim-fit:not(:disabled):hover{background-color:#000000b3}.trim-reset:disabled,.trim-fit:disabled{opacity:.35;cursor:default}.trim-reset[hidden],.trim-fit[hidden]{display:none}.trim-reset{left:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M9 9 4 4M15 9l5-5M9 15l-5 5M15 15l5 5'/%3E%3C/svg%3E")}.trim-fit{left:64px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E")}@keyframes trim-limit-blink{0%,to{opacity:1}25%,75%{opacity:.15}50%{opacity:1}}.trim-handle.limit-blink:before{animation:trim-limit-blink .4s ease-in-out 2}.trim-gauge.limit-blink{animation:trim-limit-blink .4s ease-in-out 2}.edit-panel{flex-direction:column;align-items:center;gap:16px}.wizard[data-step=edit] .panel.edit-panel{display:flex}.edit-stage{position:relative;width:100%;aspect-ratio:2 / 1;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 60px #00000080}.edit-stage .frame-root{position:absolute;top:0;left:0;transform:scale(var(--scale, .28));transform-origin:top left}.edit-stage .frame-text[contenteditable],.edit-stage .frame-art[data-drop]{cursor:text;outline:none;transition:box-shadow .12s ease}.edit-stage .frame-text[contenteditable]:hover,.edit-stage .frame-text[contenteditable]:focus{box-shadow:inset 0 -.08em #ffffff73}.edit-stage .frame-art[data-drop]{cursor:pointer}.edit-stage .frame-art[data-drop].dragover{box-shadow:0 0 0 6px var(--accent)}.edit-stage .frame-art .frame-art-remove{position:absolute;top:28px;right:28px;width:84px;height:84px;padding:0;border:none;border-radius:50%;background:#0c0d12b8;color:#fff;font-size:44px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 6px 20px #0006;transition:background .12s ease,transform .12s ease}.edit-stage .frame-art .frame-art-remove:hover{background:#000000e0;transform:scale(1.06)}.edit-stage .frame-text[data-empty]:before{content:attr(data-placeholder);opacity:.4;font-style:italic}.edit-stage .frame-text[data-empty]{min-width:2em}.edit-hint{margin:0;text-align:center;font-size:13px;color:var(--text-dim);line-height:1.5}.edit-stage .frame-text[data-edit-mode=modal]{cursor:pointer}.field-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#0009;display:flex;align-items:center;justify-content:center;padding:24px}.field-modal-backdrop[hidden]{display:none}.field-modal{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px #0009}.field-modal-label{font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.field-modal-field{position:relative;display:flex;align-items:center}.field-modal-input{width:100%;font-size:17px;font-family:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 40px 12px 14px;outline:none}.field-modal-input:focus{border-color:var(--accent)}.field-modal-clear{position:absolute;right:8px;width:22px;height:22px;border:none;border-radius:50%;background:var(--border);color:var(--text);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.field-modal-clear:hover{background:var(--panel-hover)}.field-modal-clear[hidden]{display:none}.field-modal-done{align-self:stretch;text-align:center}.player{position:relative;width:100%;aspect-ratio:2 / 1;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 60px #00000080;cursor:pointer}.preview{display:block;width:100%;height:100%;object-fit:cover}.player-big-play{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:84px;height:84px;border:none;border-radius:50%;background:#00000073;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s}.player-big-play:hover{background:#0009;transform:scale(1.04)}.player-big-play .tri{width:0;height:0;margin-left:6px;border-style:solid;border-width:16px 0 16px 27px;border-color:transparent transparent transparent #fff}.player-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;pointer-events:none}.player-bar .player-mute{pointer-events:auto}.player-bar-left{display:flex;align-items:center;gap:8px}.player-state,.player-mute{width:30px;height:30px;border-radius:50%;background:#00000073}.player-state{display:inline-block;position:relative}.player[data-state=paused] .player-state:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;transform:translate(1px)}.player[data-state=playing] .player-state:before,.player[data-state=playing] .player-state:after{content:"";position:absolute;top:50%;width:3.5px;height:12px;margin-top:-6px;background:#fff}.player[data-state=playing] .player-state:before{left:10px}.player[data-state=playing] .player-state:after{right:10px}.player-time{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;padding:0 7px;height:30px;display:inline-flex;align-items:center;border-radius:7px;background:#00000073}.player-mute{border:none;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:18px 18px}.player-mute:not(.is-muted){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9v6h3l5 4V5L7 9H4z'/%3E%3Cpath d='M16 8.5a4.5 4.5 0 010 7M18.5 6a8 8 0 010 12'/%3E%3C/svg%3E")}.player-mute.is-muted{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 9v6h3l5 4V5L9 9H6z'/%3E%3Cpath d='M20 4L4 20'/%3E%3C/svg%3E")}.player[data-state=initial] .player-bar{display:none}.player:not([data-state=initial]) .player-big-play{display:none}.result-note{margin:0;color:var(--text-dim);font-size:14px;text-align:center}.wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:20px;border-top:1px solid var(--border)}#download,#trim-continue,#edit-continue{display:none}.wizard[data-step=result] #download{display:inline-block}.wizard[data-step=trim] #trim-continue{display:inline-flex}.wizard[data-step=edit] #edit-continue{display:inline-block}.btn-primary,.btn-secondary{font:inherit;font-size:15px;font-weight:600;padding:12px 22px;border-radius:11px;border:none;cursor:pointer;text-decoration:none;transition:filter .15s,background .15s}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.btn-primary:hover{filter:brightness(1.1)}.segmented{position:relative;display:inline-flex;align-items:stretch}.segmented-main{border-radius:11px 0 0 11px;padding-right:18px}.segmented-toggle{border-radius:0 11px 11px 0;padding:12px;font-size:13px;line-height:1;border-left:1px solid rgba(0,0,0,.25)}.segmented-menu{position:absolute;right:0;bottom:calc(100% + 6px);min-width:100%;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px #00000080;padding:4px;z-index:50}.segmented-menu[hidden]{display:none}.segmented-item{display:block;width:100%;white-space:nowrap;font:inherit;font-size:14px;font-weight:600;text-align:left;color:var(--text);background:transparent;border:none;border-radius:7px;padding:9px 12px;cursor:pointer}.segmented-item:hover{background:var(--panel-hover)}.btn-secondary{background:var(--panel-hover);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-secondary:disabled{opacity:.4;cursor:default}.btn-secondary:disabled:hover{background:var(--panel-hover)}.error{margin:0;padding:14px 16px;background:#ff6b6b1f;border:1px solid rgba(255,107,107,.4);border-radius:10px;color:var(--error);font-size:14px;text-align:center}.warning{margin:0;color:var(--text-dim);font-size:13px;text-align:center}