html{visibility:visible}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex;flex-direction:column}header{padding:8px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);flex:0 0 auto}.logo{font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;display:flex;align-items:center;gap:6px}.logo-icon{font-size:1.1em;line-height:1;display:inline-flex;align-items:center;justify-content:center}.logo-icon{color:var(--accent)}.logo-icon svg{width:1em;height:1em;display:block}.header-spacer{flex:1}.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.workspace{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:0}.top-area{display:flex;flex:1 1 0;min-height:0;gap:0}.params-sidebar{width:260px;flex:0 0 var(--params-sidebar-width, 260px);display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;background:var(--surface);position:relative}.params-resize-handle{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:ew-resize;z-index:5;background:transparent}.params-resize-handle:after{content:"";position:absolute;top:0;right:2px;width:1px;height:100%;background:transparent;transition:background .15s}body.is-resizing-params{cursor:ew-resize;-webkit-user-select:none;user-select:none}.params-sidebar::-webkit-scrollbar{width:4px}.params-sidebar::-webkit-scrollbar-track{background:transparent}.params-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.params-body{padding:8px 14px;flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden}.params-body::-webkit-scrollbar{width:4px}.params-body::-webkit-scrollbar-track{background:transparent}.params-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.params-actions{flex:0 0 auto;padding:10px 14px;border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:8px}.params-action-group{display:flex;gap:8px;width:100%}.params-action-group .params-action-btn{width:auto;flex:1 1 0}.params-actions #size-info{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);text-align:center}.params-action-btn{width:100%;height:34px;padding:0 12px;border-radius:var(--control-radius);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--text-body);font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:opacity .2s,background .2s,border-color .2s,color .2s}.params-action-btn.primary{background:var(--accent);color:#0d0d0f;border:none;letter-spacing:.02em}.params-action-btn.primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);pointer-events:none}.params-action-btn.primary:hover:not(:disabled){background:#b9d22c}.params-action-btn.primary.is-loading,.params-action-btn.primary.is-loading:disabled{opacity:.92;cursor:wait;box-shadow:none}.params-action-btn.primary.is-loading:after{content:"";width:10px;height:10px;margin-left:6px;border-radius:50%;border:2px solid rgba(13,13,15,.28);border-top-color:#0d0d0f;display:inline-block;animation:spin .75s linear infinite;vertical-align:-2px}.params-action-btn.secondary.is-loading,.params-action-btn.secondary.is-loading:disabled{opacity:.92;cursor:wait;box-shadow:none}.params-action-btn.secondary.is-loading:after{content:"";width:10px;height:10px;margin-left:6px;border-radius:50%;border:2px solid rgba(245,245,246,.28);border-top-color:#f5f5f6;display:inline-block;animation:spin .75s linear infinite;vertical-align:-2px}.params-action-btn.primary:disabled{opacity:.4;cursor:not-allowed}.params-action-btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:600}.params-action-btn.secondary:hover:not(:disabled){background:#e8ff470f;border-color:var(--accent);color:var(--accent)}.params-action-btn.secondary:disabled{opacity:.45;cursor:not-allowed}.btn-bg-remove{width:100%;height:34px;padding:0 12px;border-radius:var(--control-radius);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--text-body);font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--text);background:transparent;border:1px solid var(--border);transition:opacity .2s,background .2s,border-color .2s,color .2s}.btn-bg-remove:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-bg-remove:disabled{opacity:.45;cursor:not-allowed}.btn-bg-remove.is-loading{opacity:.92;cursor:wait;border-color:var(--border);color:var(--text)}.btn-bg-remove.is-loading:after{content:"";width:10px;height:10px;margin-left:6px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent);display:inline-block;animation:spin .75s linear infinite;vertical-align:-2px}.preview-main{flex:1 1 0;min-width:0;display:flex;flex-direction:row;background:var(--border);gap:0;padding:0}.preview-pane{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.pane-header{flex:0 0 auto;min-height:var(--panel-header-height);height:auto;padding:4px var(--panel-header-padding-x);border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:8px}.pane-title{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0}.pane-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);overflow:hidden;white-space:normal;flex:1 1 0}.pane-meta-item{white-space:nowrap}.preview-surface{flex:1 1 0;min-height:0;background:repeating-conic-gradient(#1a1a1e,#1a1a1e 25%,#0f0f12 25%,#0f0f12 50%) 0 0 / 20px 20px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}#preview-area{flex:1 1 0;min-height:0}.timeline-panel{flex:0 0 auto;height:160px;border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}.timeline-header{flex:0 0 auto;height:var(--panel-header-height);padding:0 var(--panel-header-padding-x);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}.timeline-header h2{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0}.timeline-header-meta{display:none;align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);flex-shrink:0}.timeline-header-meta.visible{display:flex}.timeline-sample-control{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}.sample-control-row{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;width:100%}.sample-control-row .sample-picker{flex:1 1 auto;min-width:0;width:auto}.sample-control-row .num-input-sm{flex:1 1 auto;min-width:0;display:flex;align-items:center}.sample-control-row .num-input-sm input{width:100%;min-width:0}.sample-control-row label{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0}.timeline-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.timeline-body{flex:1 1 0;min-height:0;display:flex;align-items:stretch}#drop-zone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;flex:1 1 0;border:1px dashed transparent;margin:6px 10px;border-radius:8px;padding:0 24px;background:transparent;cursor:default;transition:border-color .2s,background .2s;position:relative}#drop-zone.drag-over,#preview-area.drag-over{box-shadow:inset 0 0 0 2px var(--accent)}.drop-indicator{display:none;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:var(--text-body);color:var(--muted);z-index:10}.drop-indicator svg{width:24px;height:24px;opacity:.6}#drop-zone.drag-over>.drop-indicator,#preview-area.drag-over>.drop-indicator{display:flex}#drop-zone.drag-over>:not(.drop-indicator){display:none}#preview-area.drag-over>:not(.drop-indicator){display:none}#drop-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-cards{position:relative;width:64px;height:48px;flex-shrink:0;pointer-events:none}.drop-card{position:absolute;top:50%;left:50%;width:34px;height:44px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);transform-origin:center center}.drop-card-left{transform:translate(-50%,-50%) translate(-15px) translateY(3px) rotate(-12deg) scale(.86);opacity:.55;z-index:1;box-shadow:none}.drop-card-right{transform:translate(-50%,-50%) translate(15px) translateY(3px) rotate(12deg) scale(.86);opacity:.55;z-index:1;box-shadow:none}.drop-card-center{transform:translate(-50%,-50%) translateY(-1px) rotate(0) scale(1);opacity:1;z-index:2;box-shadow:0 2px 14px #0006;border-color:#ffffff1a}.drop-copy{display:flex;flex-direction:column;gap:10px;pointer-events:auto}.drop-title{font-size:var(--text-body);font-weight:700;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;line-height:1.35}.drop-formats{display:flex;gap:4px;flex-wrap:wrap;pointer-events:none}.drop-formats span{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-micro);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#ffffff0a;border:1px solid var(--border);color:var(--muted)}.drop-note{font-size:var(--text-body);color:var(--muted);line-height:1.3;letter-spacing:-.01em}.drop-link-btn{display:inline-flex;align-items:baseline;border:none;background:transparent;color:var(--accent);font:inherit;font-weight:800;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:opacity .15s,color .15s;flex-shrink:0}.drop-link-btn:hover{opacity:.86;color:#f3ff9e}.drop-link-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #e8ff4729;border-radius:4px}#frames-section{display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0}#frame-scroll{flex:1 1 0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column;position:relative;background:#0000001a}#frame-scroll::-webkit-scrollbar{height:4px}#frame-scroll::-webkit-scrollbar-track{background:transparent}#frame-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}#timeline-ruler{flex:0 0 22px;display:block;border-bottom:1px solid rgba(255,255,255,.06)}#frame-grid{flex:1 1 0;min-height:0;display:flex;flex-direction:row;gap:4px;align-items:stretch;padding:4px 10px;width:max-content}.drop-line{position:absolute;top:22px;bottom:0;width:2px;background:var(--accent);border-radius:2px;pointer-events:none;display:none;z-index:10;box-shadow:0 0 8px #e8ff478c}.frame-thumb{flex:0 0 auto;width:var(--thumb-size, 72px);aspect-ratio:1 / 1;align-self:stretch;border-radius:6px;overflow:hidden;border:2px solid transparent;position:relative;cursor:grab;transition:border-color .15s,transform .15s;background:var(--surface2)}.frame-thumb:hover{border-color:var(--accent)}.frame-thumb.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px #e8ff4729}.frame-thumb.is-dragging{opacity:.35;transform:scale(.98);cursor:grabbing}.frame-thumb.is-disabled{opacity:.45;border-color:#ff6b358c}.frame-thumb.is-disabled:hover{border-color:var(--accent2)}.frame-thumb.is-disabled:after{content:"OFF";position:absolute;inset:auto 4px 4px 4px;padding:3px 0;border-radius:4px;background:#000000ad;color:#fff;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);line-height:1;text-align:center;letter-spacing:.04em;pointer-events:none}.frame-thumb.is-placeholder{border-color:#ffffff14;background:linear-gradient(135deg,#ffffff08,#ffffff03)}.frame-thumb.is-placeholder:after{content:"...";position:absolute;inset:auto 0 8px 0;color:#fff6;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);text-align:center;pointer-events:none}.frame-thumb.is-blank{background:var(--surface2)}.frame-empty{width:100%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08)),linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%,rgba(255,255,255,.08));background-position:0 0,6px 6px;background-size:12px 12px;opacity:.65}.frame-thumb img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none}.frame-drag{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:var(--text-control);cursor:grab;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:1}.frame-drag:active{cursor:grabbing}.frame-num{position:absolute;bottom:3px;right:4px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:#fff;background:#0000008c;padding:1px 4px;border-radius:3px}.frame-del{position:absolute;top:2px;right:2px;width:18px;height:18px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:var(--text-control);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}.frame-thumb:hover .frame-del{opacity:1}.frame-bg{position:absolute;top:2px;right:24px;width:18px;height:18px;background:#0009;color:#fff;border:none;border-radius:50%;font-size:var(--text-control);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s}.frame-bg svg{width:12px;height:12px}.frame-thumb:hover .frame-bg{opacity:1}.frame-bg:hover{background:var(--accent);color:#0d0d0f}.frame-thumb.is-bg-removed:before{content:"✓";position:absolute;left:3px;top:3px;width:14px;height:14px;background:var(--accent);color:#0d0d0f;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2}.frame-thumb.is-bg-processing{position:relative}.frame-thumb.is-bg-processing>*{opacity:.4}.frame-thumb.is-bg-processing:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;z-index:3}.clear-btn,.setting-reset-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--panel-header-button-height);padding:0 var(--panel-header-button-padding-x);font-size:var(--text-control);font-weight:500;color:var(--text);background:none;border:none;cursor:pointer;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;transition:color .15s}.clear-btn:hover{color:var(--accent2)}.setting-reset-btn:hover{color:var(--accent)}.setting-row{display:flex;flex-direction:column;gap:4px;padding:12px 0;position:relative}.setting-row:not(:last-child):after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:1px;background:var(--border)}.setting-label{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:var(--panel-header-button-height)}.setting-label-text{display:inline-flex;align-items:center;gap:6px;min-width:0}.setting-reset-btn{flex:0 0 auto;height:auto;padding:0}.setting-label small{font-size:var(--text-micro);color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}.fps-picker{position:relative;width:100%;height:32px;border:none;border-radius:0;background:transparent;overflow:visible;cursor:default}.fps-picker.is-dragging{cursor:default}.fps-picker:before,.fps-picker:after{content:"";position:absolute;top:0;bottom:0;width:12px;z-index:2;pointer-events:none;opacity:1}.fps-picker:before{left:0;background:linear-gradient(to right,var(--surface) 0%,transparent 100%)}.fps-picker:after{right:0;background:linear-gradient(to left,var(--surface) 0%,transparent 100%)}.fps-picker-scroll{height:100%;display:flex;align-items:center;gap:2px;padding:0 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-user-select:none;user-select:none;cursor:default}.fps-picker-scroll::-webkit-scrollbar{display:none}.fps-picker-scroll.is-dragging{scroll-behavior:auto}.fps-picker-scroll:before,.fps-picker-scroll:after{content:"";flex:0 0 calc(50% - 10px)}.fps-option{flex:0 0 auto;min-width:20px;height:24px;padding:0 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);line-height:1;display:inline-flex;align-items:center;justify-content:center;scroll-snap-align:center;transition:color .15s,border-color .15s,background .15s,transform .15s;cursor:default}.fps-option:hover{color:var(--text);background:#ffffff08}.fps-option.active{color:var(--text);border-color:var(--border);background:#ffffff08;font-weight:600}.fps-option.editing{border-color:var(--accent);background:#e8ff4714}.fps-option-input{width:2ch;min-width:1ch;height:18px;padding:0;border:0;outline:none;background:transparent;color:var(--text);font:inherit;font-weight:600;line-height:1;text-align:center;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.fps-option-input::-webkit-inner-spin-button,.fps-option-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fps-picker.is-dragging .fps-option{transition:none}.num-input{display:flex;align-items:center;gap:0;height:var(--control-height);border:1px solid var(--border);border-radius:var(--control-radius);overflow:hidden;width:100%}.num-input button{width:var(--control-height);height:var(--control-height);background:var(--surface2);border:none;color:var(--text);font-size:var(--text-glyph);cursor:pointer;line-height:1;flex:0 0 auto;transition:background .15s,color .15s}.num-input button:hover{background:var(--border);color:var(--accent)}.num-input input{flex:1;height:var(--control-height);background:transparent;border:none;color:var(--text);font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);text-align:center;outline:none}.num-input input[type=number]::-webkit-inner-spin-button,.num-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.num-input-sm{display:flex;align-items:center;height:26px;border:1px solid var(--border);border-radius:6px;overflow:hidden}.num-input-sm button{width:22px;height:26px;background:var(--surface2);border:none;color:var(--text);font-size:var(--text-glyph);cursor:pointer;line-height:1;flex:0 0 auto;transition:background .15s,color .15s}.num-input-sm button:hover{background:var(--border);color:var(--accent)}.num-input-sm input{flex:1 1 auto;min-width:0;width:auto;height:26px;background:transparent;border:none;color:var(--text);font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);text-align:center;outline:none}.num-input-sm input[type=number]::-webkit-inner-spin-button,.num-input-sm input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--border);outline:none;cursor:pointer;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s;box-shadow:0 0 0 3px #e8ff4726}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.sample-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.sample-tag{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);white-space:nowrap}.sample-hint{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--accent);padding:3px 6px;border-radius:4px;background:#e8ff470f;border:1px solid rgba(232,255,71,.15)}.size-compact{display:flex;align-items:center;gap:4px;min-height:32px}.size-field-wrap{position:relative;display:flex;align-items:center;flex:1 1 0;min-width:0}.size-label{position:absolute;left:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-micro);font-weight:600;color:var(--muted);pointer-events:none;z-index:1;line-height:1;letter-spacing:.04em}.size-field-compact{width:100%;height:28px;padding:0 6px 0 18px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);text-align:right;outline:none}.size-field-compact[type=number]::-webkit-inner-spin-button,.size-field-compact[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.lock-btn-sm{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,opacity .15s;font-size:var(--text-control);line-height:1;flex-shrink:0}.lock-btn-sm:hover,.lock-btn-sm.on{color:var(--accent);background:transparent}.lock-btn-sm svg{width:14px;height:14px;display:block;fill:currentColor}.format-options{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:32px}.format-option{display:inline-flex;align-items:center;gap:4px;cursor:pointer;height:24px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--text-control);font-weight:600;letter-spacing:.02em;transition:all .15s}.format-option:hover{border-color:var(--accent);background:#e8ff470d}.format-option input[type=radio]{display:none}.format-option:has(input[type=radio]:checked){border-color:var(--accent);background:#e8ff4714}.format-label{-webkit-user-select:none;user-select:none}.quality-control{display:flex;align-items:center;gap:8px;width:100%;min-height:32px}.quality-control input[type=range]{flex:1;height:4px;border-radius:4px;background:var(--border);outline:none;cursor:pointer}.quality-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s;box-shadow:0 0 0 2px #e8ff471a}.quality-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.quality-value{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--accent);min-width:28px;text-align:right;font-weight:600}#preview-canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:none;object-fit:contain;image-rendering:auto}#preview-image{max-width:100%;max-height:100%;width:auto;height:auto;display:none;object-fit:contain}.preview-placeholder{text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:24px}#convert-btn{display:inline-flex}#progress-wrap{margin-top:0;display:none}.progress-bar-bg{height:4px;background:var(--border);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent);border-radius:4px;width:0;transition:width .1s}.progress-label{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);margin-top:6px;text-align:center}#download-btn,#download-frames-btn{display:none}#size-info{font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--muted);text-align:center;margin-top:6px;display:none}#render-canvas{display:none}#toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--border);padding:10px 20px;border-radius:8px;font-size:var(--text-body);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;z-index:9998}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}#toast.error{border-color:var(--accent2);color:var(--accent2)}#toast.success{border-color:var(--accent);color:var(--accent)}#import-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;gap:14px;background:#0d0d0f8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9999;font-size:var(--text-body);font-weight:700;color:var(--text, #f5f5f7);letter-spacing:-.01em;cursor:progress}#import-overlay.is-active{display:flex}.import-spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:spin .7s linear infinite;flex-shrink:0}.stop-import-btn{border:none;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-control);font-weight:600;cursor:pointer;padding:0}.stop-import-btn:hover:not(:disabled){color:var(--text)}.stop-import-btn:disabled{opacity:.45;cursor:wait}#import-overlay .import-msg{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);padding:10px 18px;border-radius:10px;box-shadow:0 8px 30px #00000059}#import-overlay.is-error{cursor:default}#import-overlay.is-error .import-spinner{display:none}#import-overlay.is-error .import-msg{border-color:var(--color-warning);color:var(--color-warning)}#bg-model-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#0d0d0f8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10000}#bg-model-dialog.is-active{display:flex}.bg-model-card{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;max-width:420px;box-shadow:0 10px 30px #0006}.bg-model-card h3{margin:0 0 10px;font-size:15px}.bg-model-desc{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--text)}.bg-model-hint{margin:0 0 16px;font-size:12px;color:var(--text);opacity:.7}.bg-model-actions{display:flex;justify-content:flex-end;gap:8px}.bg-model-btn{padding:6px 14px;border-radius:var(--control-radius);font-size:13px;cursor:pointer}.bg-model-btn.primary{background:var(--color-accent);color:var(--color-canvas);border:none}.bg-model-btn.primary:hover{background:var(--color-accent-strong)}.bg-model-btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.bg-model-btn.secondary:hover{background:var(--surface)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}header{animation:fadeUp .35s ease both}.workspace>*{animation:fadeUp .35s ease both}#frames-section{display:flex;flex-direction:column;min-height:0;flex:1 1 0}.header-add-btn{display:none;align-items:center;justify-content:center;gap:4px;height:var(--panel-header-button-height);padding:0 var(--panel-header-button-padding-x);border:none;background:none;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--text-control);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:color .15s}.header-add-btn:hover{color:var(--accent)}.header-add-btn .plus{font-size:var(--text-control);line-height:1}.preview-surface{flex:1 1 0;min-height:0;background:repeating-conic-gradient(#1a1a1e,#1a1a1e 25%,#0f0f12 25%,#0f0f12 50%) 0 0 / 20px 20px;border-radius:0;overflow:hidden;position:relative;border:none}#preview-area{min-height:0}#preview-canvas,#preview-image{max-width:100%;max-height:100%;width:auto;height:auto;display:none;object-fit:contain}#preview-canvas{image-rendering:auto}#preview-video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px;display:none;background:#000;object-fit:contain}.preview-placeholder{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--muted);-webkit-user-select:none;user-select:none}.fan-cards{position:relative;width:170px;height:132px;margin-bottom:18px}.fan-card{position:absolute;top:10px;left:50%;width:84px;height:112px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);animation:fan-carousel 3s ease-in-out infinite}.fan-card:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:4px;border:1px dashed rgba(255,255,255,.06)}@keyframes fan-carousel{0%,to{transform:translate(calc(-50% - 58px)) translateY(8px) rotate(-10deg) scale(.82);opacity:.5;z-index:1;box-shadow:none;border-color:var(--border)}33.33%{transform:translate(-50%) translateY(0) rotate(0) scale(1);opacity:1;z-index:2;box-shadow:0 2px 22px #0006;border-color:#ffffff1a}66.66%{transform:translate(calc(-50% + 58px)) translateY(8px) rotate(10deg) scale(.82);opacity:.5;z-index:1;box-shadow:none;border-color:var(--border)}}.placeholder-text{font-size:var(--text-body);font-weight:500;color:var(--muted);letter-spacing:.02em;line-height:1.4;margin:0}.pane-play-btn{display:none;align-items:center;justify-content:center;width:var(--panel-header-button-height);height:var(--panel-header-button-height);padding:0;border:none;border-radius:6px;background:none;color:var(--text);cursor:pointer;transition:color .15s,background .15s;flex-shrink:0}.pane-play-btn.visible{display:inline-flex}.pane-play-btn:hover{color:var(--accent);background:#e8ff470f}.pane-play-btn svg{width:14px;height:14px;display:block;fill:currentColor}.pane-play-btn.is-replaying{color:var(--accent);animation:panePlayPulse .4s ease}@keyframes panePlayPulse{0%{transform:scale(1)}45%{transform:scale(.82)}to{transform:scale(1)}}.frame-thumb.is-previewing{border-color:var(--accent);box-shadow:0 0 0 2px #e8ff4738}#preview-frame-badge{position:absolute;top:8px;left:8px;display:none;align-items:center;padding:4px 10px;background:#000000a6;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-family:ui-monospace,SFMono-Regular,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-mono);color:var(--accent);font-weight:600;letter-spacing:.04em;pointer-events:none;z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;gap:5px}#preview-frame-badge.visible{display:flex}:root{--palette-ink-0: #050506;--palette-ink-1: #0b0b0d;--palette-ink-2: #151518;--palette-ink-3: #1d1d21;--palette-ink-4: #28282d;--palette-ink-5: #333338;--palette-white: #f4f4f5;--palette-white-strong: #ffffff;--palette-gray-1: #88888f;--palette-gray-2: #737379;--palette-gray-3: #55555b;--palette-accent: #e9ae16;--palette-accent-strong: #ffc52d;--palette-warning: #f0a11a;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--size-header: 48px;--size-sidebar: 276px;--size-sidebar-compact: 220px;--size-timeline: 172px;--size-control: 32px;--size-button: 28px;--size-header-button: 22px;--size-panel-padding: 10px;--radius-control: 3px;--radius-panel: 4px;--radius-selection: 4px;--border-width: 1px;--font-ui: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;--text-title: 20px;--text-label: 12px;--text-body: 14px;--text-control: 12px;--text-mono: 12px;--text-micro: 10px;--text-glyph: 16px;--tracking-label: .14em;--tracking-control: .04em;--ease-standard: .15s ease;--focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);--color-canvas: var(--palette-ink-0);--color-panel: var(--palette-ink-1);--color-panel-raised: var(--palette-ink-2);--color-line: var(--palette-ink-4);--color-line-subtle: var(--palette-ink-3);--color-line-strong: var(--palette-ink-5);--color-content: var(--palette-white);--color-content-strong: var(--palette-white-strong);--color-content-muted: var(--palette-gray-2);--color-content-quiet: var(--palette-gray-1);--color-content-faint: var(--palette-gray-3);--color-accent: var(--palette-accent);--color-accent-strong: var(--palette-accent-strong);--color-warning: var(--palette-warning);--color-accent-muted: color-mix(in srgb, var(--color-accent) 72%, var(--color-canvas));--color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, transparent);--color-accent-hover: color-mix(in srgb, var(--color-accent) 4%, transparent);--bg: var(--color-canvas);--surface: var(--color-panel);--surface2: var(--color-panel-raised);--border: var(--color-line);--accent: var(--color-accent);--accent2: var(--color-accent);--text: var(--color-content);--muted: var(--color-content-muted);--radius: var(--radius-panel);--control-radius: var(--radius-control);--control-height: var(--size-control);--panel-header-height: var(--size-control);--panel-header-padding-x: var(--space-3);--panel-header-button-height: var(--size-header-button);--panel-header-button-padding-x: var(--space-2);--control-padding-x: var(--space-3);--control-font-size: var(--text-control)}html[data-theme=instrument]{--color-canvas: var(--palette-ink-0);--color-panel: var(--palette-ink-1);--color-panel-raised: var(--palette-ink-2);--color-accent: var(--palette-accent)}body{font-family:var(--font-ui);letter-spacing:.01em}header{height:var(--size-header);padding:0 var(--space-4);background:var(--color-canvas);border-bottom-color:var(--color-line-subtle)}.logo{font-size:var(--text-title);font-weight:600;letter-spacing:.16em;text-transform:uppercase}.logo-icon{width:auto;height:auto;border-radius:0;background:transparent;font-size:1.1em;box-shadow:none}.params-sidebar,.pane-header,.timeline-panel{background:var(--color-panel)}.params-sidebar{width:var(--size-sidebar);flex-basis:var(--params-sidebar-width, var(--size-sidebar))}.params-body{padding:var(--space-2) var(--space-4)}.params-actions{padding:var(--space-3) var(--space-4);background:var(--color-panel)}.setting-row{padding:14px 0;gap:var(--space-2)}.setting-row:not(:last-child):after{left:calc(var(--space-4) * -1);right:calc(var(--space-4) * -1);background:var(--color-line-subtle)}.setting-label,.pane-title,.timeline-header h2{font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-content-quiet)}.setting-reset-btn,.clear-btn{color:var(--color-content-faint)}.setting-reset-btn:hover,.clear-btn:hover{color:var(--color-content-strong)}.fps-option,.num-input input,.num-input-sm input,.size-field-compact,.params-actions #size-info,.pane-meta,.timeline-header-meta{font-family:var(--font-mono)}.fps-option.active,.fps-option.editing,.format-option:has(input[type=radio]:checked){color:var(--accent);border-color:var(--accent);background:var(--color-accent-soft)}.fps-option.active{font-weight:700}.fps-option,.format-option,.size-field-compact,.num-input,.num-input-sm{border-radius:var(--radius-selection)}.format-option input[type=radio]:checked+.format-label{color:var(--accent)}.size-field-compact:focus{border-color:var(--accent)}.lock-btn-sm:hover,.lock-btn-sm.on{color:var(--accent)}input[type=range]{background:var(--color-line)}input[type=range]::-webkit-slider-thumb{width:14px;height:14px;background:var(--color-accent);box-shadow:var(--focus-ring)}.params-action-btn{border-radius:var(--radius-control)}.params-action-btn.primary{background:var(--color-accent);color:var(--color-canvas)}.params-action-btn.primary:hover:not(:disabled){background:var(--color-accent-strong)}.params-action-btn.secondary{color:var(--text);border-color:var(--border);background:transparent}.preview-surface{background:var(--color-canvas)}.timeline-panel{height:var(--size-timeline);border-top-color:var(--color-line)}.timeline-header,.pane-header{border-bottom-color:var(--color-line-subtle)}#drop-zone{margin:var(--space-2) var(--space-4);border-color:transparent;border-radius:3px}.drop-title{font-weight:500;color:var(--color-content-muted)}.drop-link-btn{color:var(--color-accent)}.drop-formats{color:var(--color-content-faint)}.header-add-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.params-resize-handle:hover:after,body.is-resizing-params .params-resize-handle:after{background:var(--accent)}.clear-btn,.setting-reset-btn,.header-add-btn,.params-action-btn{height:28px;padding:0 10px;border:none;background:transparent!important;border-radius:var(--radius-control);font-family:var(--font-ui);font-size:var(--text-control);font-weight:600;letter-spacing:var(--tracking-control);line-height:1;box-shadow:none;transition:color .15s,opacity .15s}.clear-btn,.setting-reset-btn,.header-add-btn{color:var(--color-content-quiet);background:transparent}.clear-btn:hover,.setting-reset-btn:hover,.header-add-btn:hover{color:var(--color-content-strong);background:transparent;border:none}.setting-reset-btn{min-height:0;height:auto;padding:0;border-radius:0;display:inline}.clear-btn,.header-add-btn{height:auto;padding:0;border-radius:0}.header-add-btn{display:none}.params-action-btn.primary{height:var(--size-control);padding:0 var(--control-padding-x);border-radius:var(--radius-control);display:inline-flex;background:var(--color-accent)!important;color:var(--color-canvas)}.params-action-btn.primary:hover:not(:disabled){background:var(--color-accent-strong)!important;color:var(--color-canvas)}.params-action-btn.primary,.params-action-btn.secondary{height:var(--size-control);border-radius:var(--radius-control);border:none;background:transparent}.params-action-btn.secondary{color:var(--color-content-quiet)}.params-action-btn.secondary:hover:not(:disabled){color:var(--color-content-strong);background:transparent;border:none}.params-action-btn.primary{color:var(--color-canvas)!important}.params-action-btn.primary:hover:not(:disabled){color:var(--color-canvas)!important;background:var(--color-accent-strong)!important;border:none}.params-action-btn.primary:before{display:none}.drop-link-btn{height:auto;padding:0;border:0;border-radius:0;letter-spacing:0}.drop-link-btn:hover{color:var(--color-accent-muted);opacity:1}@media(max-width:760px){.params-sidebar{width:var(--size-sidebar-compact);flex-basis:var(--size-sidebar-compact)}header{padding:0 var(--space-3)}}