: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-list{display:flex;align-items:center;justify-content:center;gap:0;margin:0;padding:0;list-style:none}.step-item{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:14px;font-weight:600;transition:color .3s}.step-item+.step-item:before{content:"";width:36px;height:2px;margin:0 12px;background:var(--border);transition:background .3s}.step-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:transparent;transition:border-color .3s,background .3s,box-shadow .3s}.step-item.is-done{color:var(--text)}.step-item.is-done .step-dot{border-color:var(--accent);background:var(--accent)}.step-item.is-done+.step-item:before{background:var(--accent)}.step-item.is-current{color:var(--text)}.step-item.is-current .step-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px #6c7bff38}.steps-compact{display:none;margin:0;text-align:center;color:var(--text);font-size:14px;font-weight:600}@media (max-width: 460px){.steps-list{display:none}.steps-compact{display:block}}.panels{position:relative}.panel{display:none}.wizard[data-step=choose] .panel[data-panel=choose],.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=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}.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-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}.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,#edit-continue{display:none}.wizard[data-step=result] #download,.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)}.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}