:root{--bg: #0c0d12;--bg-stage: #08090d;--panel: #14161f;--panel-2: #1b1e29;--line: #262a38;--line-soft: #1e2230;--text: #e6e8f0;--text-dim: #8a90a6;--text-faint: #5b6178;--accent: #3dd2a0;--accent-2: #6c7bff;--accent-ink: #04140d;--shadow: 0 8px 30px rgba(0, 0, 0, .45);--radius: 12px;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#16181f,#101218)}.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(61,210,160,.45),rgba(108,123,255,.35),transparent)}.brand{display:flex;align-items:baseline;gap:10px}.brand-mark{width:15px;height:15px;border-radius:4px;align-self:center;background:conic-gradient(from 45deg,var(--accent),var(--accent-2),var(--accent));box-shadow:0 0 14px #3dd2a080;animation:markspin 14s linear infinite}@keyframes markspin{to{transform:rotate(360deg)}}.brand h1{font-size:16px;font-weight:800;letter-spacing:.2px;margin:0;background:linear-gradient(92deg,#eef1f8 10%,var(--accent) 55%,var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.brand-title{display:inline-flex;align-items:baseline;cursor:default}.brand-title .word{display:inline-flex;align-items:baseline}.brand-title .rest{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:pre;background:linear-gradient(92deg,#eef1f8 10%,var(--accent) 55%,var(--accent-2));background-size:400% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transition:max-width .45s cubic-bezier(.33,1,.68,1),opacity .5s ease}.brand-title .word:nth-child(1) .rest{background-position:0% 0}.brand-title .word:nth-child(2) .rest{background-position:33.33% 0}.brand-title .word:nth-child(3) .rest{background-position:66.66% 0}.brand-title .word:nth-child(4) .rest{background-position:100% 0}.brand:hover .rest,.brand:focus-within .rest{opacity:1}.brand:hover .word:nth-child(1) .rest,.brand:focus-within .word:nth-child(1) .rest{max-width:1.45em}.brand:hover .word:nth-child(2) .rest,.brand:focus-within .word:nth-child(2) .rest{max-width:3.75em;transition-delay:.08s}.brand:hover .word:nth-child(3) .rest,.brand:focus-within .word:nth-child(3) .rest{max-width:2.85em;transition-delay:.16s}.brand:hover .word:nth-child(4) .rest,.brand:focus-within .word:nth-child(4) .rest{max-width:1.45em;transition-delay:.24s}@media(prefers-reduced-motion:reduce){.brand-title .rest{transition:none}}.brand-sub{font-size:12px;color:var(--text-faint)}.topbar-actions{display:flex;align-items:center;gap:10px}.topbar-divider{width:1px;height:22px;background:var(--line);margin:0 2px}.btn{font:inherit;font-size:13px;font-weight:600;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.btn:hover:not(:disabled){background:#232735;border-color:#323748}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-accent{background:linear-gradient(135deg,#4ee3b1,var(--accent) 70%);color:var(--accent-ink);border-color:transparent;box-shadow:0 0 0 1px #3dd2a066,0 4px 16px #3dd2a038}.btn-accent:hover:not(:disabled){background:linear-gradient(135deg,#5cf0bf,#46dcaa 70%);box-shadow:0 0 0 1px #3dd2a099,0 6px 22px #3dd2a057}.btn-sm{padding:6px 10px;font-size:12px;width:100%}.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.btn-chip{padding:4px 9px;font-size:12px;border-radius:999px;line-height:1.4}.btn-chip.active{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 0 0 1px #3dd2a073}.btn-chip.active:hover:not(:disabled){background:#46dcaa}.btn-chip-edit{color:var(--text-dim);border-style:dashed}.crop-stage{display:flex;gap:8px;align-items:stretch}.crop-view{display:block;flex:1;min-width:0;height:auto;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);cursor:grab;touch-action:none}.crop-view.grabbing{cursor:grabbing}.crop-zoom{flex:0 0 auto;width:22px;margin:0;writing-mode:vertical-lr;direction:rtl;accent-color:var(--accent);cursor:ns-resize}.crop-hint{margin:6px 0 8px;font-size:11px;text-align:center;color:var(--text-faint)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060ca8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);width:min(360px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:18px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-title{margin:0;font-size:15px;font-weight:600}.modal-close{background:none;border:none;color:var(--text-dim);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1}.modal-close:hover{background:var(--panel-2);color:var(--text)}.modal-sub{margin:6px 0 14px;font-size:12px;color:var(--text-dim)}.preset-edit-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.preset-edit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 12px}.preset-edit-val{font-size:13px;font-variant-numeric:tabular-nums}.preset-del{background:none;border:none;color:var(--text-faint);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1}.preset-del:hover{background:#ff5a5a24;color:#ff7a7a}.preset-empty{font-size:12px;color:var(--text-faint);text-align:center;padding:10px 0}.preset-add{display:flex;gap:8px;margin-bottom:16px}.preset-add-input{flex:1;width:auto}.preset-add .btn-sm{width:auto;flex:0 0 auto}.modal-actions{display:flex;gap:8px}.palette-select{margin-bottom:8px}.modal-field-label{font-size:12px;color:var(--text-dim)}.palette-name-row{display:flex;flex-direction:column;gap:5px;margin:4px 0 14px}.palette-name-input{width:100%}.palette-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.palette-anim{display:flex;width:100%;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--line);margin-bottom:12px}.cycle-strip{height:22px;margin:2px 0 10px}.palette-anim-cell{flex:1 1 0;min-width:0;position:relative}.palette-anim-cell.in-band:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 1.5px #ffffff8c}.palette-cycle-controls{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin-bottom:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}.palette-swatch-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow-y:auto;margin-bottom:12px}.swatch-cell{position:relative;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:7px;cursor:grab;transition:transform .06s,box-shadow .12s}.swatch-cell:hover{transform:translateY(-1px)}.swatch-cell.selected{box-shadow:0 0 0 2px var(--accent);border-color:transparent}.swatch-cell.dragging{opacity:.35}.swatch-cell.drop-target{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 1px var(--accent)}.swatch-cell-idx{position:absolute;bottom:1px;right:2px;font-size:9px;line-height:1;color:#ffffffbf;text-shadow:0 0 2px rgba(0,0,0,.9);pointer-events:none}.palette-detail{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:12px}.palette-detail-label{flex:0 0 auto;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}.palette-detail-hint{font-size:12px;color:var(--text-faint)}.palette-color-pick{flex:0 0 auto;width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer}.palette-color-pick::-webkit-color-swatch-wrapper{padding:3px}.palette-color-pick::-webkit-color-swatch{border:none;border-radius:5px}.palette-color-hex{flex:1;width:auto;font-variant-numeric:tabular-nums;text-transform:lowercase}.palette-delete{margin-top:10px;color:#ff7a7a;border-color:#ff5a5a4d}.palette-delete:hover:not(:disabled){background:#ff5a5a24;border-color:#ff5a5a80}.layout{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0}.stage{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.5px) 0 0 / 7px 7px,radial-gradient(circle at 50% 38%,#12141d,var(--bg-stage));overflow:hidden}.stage.dragging:after{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border:2px dashed var(--accent);border-radius:var(--radius);pointer-events:none}.drop-hint{position:absolute;top:14px;right:14px;bottom:14px;left:14px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:#08090d8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;opacity:0;transition:opacity .12s}.stage.dragging .drop-hint{opacity:1}.drop-hint-card{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--accent);font-size:15px;font-weight:600}#view{max-width:100%;max-height:100%;border-radius:4px;box-shadow:var(--shadow);background:#000}.dropzone{width:min(560px,80%);border:1.5px dashed var(--line);border-radius:var(--radius);background:#ffffff03;cursor:pointer;transition:border-color .15s,background .15s}.dropzone:hover{border-color:var(--accent);background:#3dd2a00a}.dropzone-inner{padding:56px 24px;text-align:center}.dropzone-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:12px;background:repeating-conic-gradient(var(--panel-2) 0 25%,#2a2f40 0 50%) 0 0 / 14px 14px;border:1px solid var(--line)}.dropzone-title{margin:0 0 6px;font-size:16px;font-weight:600}.dropzone-hint{margin:0;font-size:12.5px;color:var(--text-faint)}.dropzone-sample{margin-top:20px;width:auto}.stage-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#08090db8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:13px;color:var(--text-dim)}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.decode-bar{position:absolute;left:50%;top:16px;transform:translate(-50%);display:flex;align-items:center;gap:10px;width:min(360px,60%);height:26px;padding:0 12px;border-radius:999px;background:#14161fe6;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;z-index:5}.decode-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 55%,transparent));transition:width .12s linear}.decode-bar-label{position:relative;margin:0 auto;font-size:11px;letter-spacing:.02em;color:var(--text);white-space:nowrap}.perf-warning{position:absolute;top:14px;right:14px;z-index:6;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#281e08eb;border:1px solid color-mix(in srgb,#f5b53d 60%,transparent);color:#f5b53d;cursor:help;outline:none;animation:perf-pulse 1.6s ease-in-out infinite}.perf-warning-mark{font-size:14px;font-weight:800;line-height:1}@keyframes perf-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,#f5b53d 38%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,#f5b53d 0%,transparent)}}.perf-warning-tip{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:max-content;max-width:min(260px,calc(100vw - 32px));padding:9px 11px;border-radius:10px;background:#101117f7;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);font-size:11px;line-height:1.5;white-space:pre-line;text-align:left;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .12s ease,transform .12s ease}.perf-warning:hover .perf-warning-tip,.perf-warning:focus-visible .perf-warning-tip{opacity:1;transform:translateY(0)}.transport{position:absolute;left:50%;bottom:18px;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:8px 14px;background:#14161fe6;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);width:min(560px,70%)}.btn-icon{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);font-size:13px;cursor:pointer}.btn-icon-ghost{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text-dim);font-size:15px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.btn-icon-ghost:hover{color:var(--text);border-color:#323748}.btn-icon-ghost.active{color:var(--accent);border-color:var(--accent);background:#3dd2a01f}.scrub-wrap{flex:1;position:relative;display:flex;align-items:center}.scrub{flex:1;position:relative;z-index:1}.scrub-band{position:absolute;top:50%;height:6px;transform:translateY(-50%);border-radius:3px;background:#3dd2a047;box-shadow:inset 0 0 0 1px #3dd2a08c;pointer-events:none;z-index:0}.time{flex:none;font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}.panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:6px 0 40px;user-select:none;-webkit-user-select:none}.panel input,.panel textarea{user-select:text;-webkit-user-select:text}.group{border-bottom:1px solid var(--line-soft);padding:16px 18px}.group-title{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:none;background:none;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;text-align:left;margin-bottom:12px;transition:color .15s,margin-bottom .28s cubic-bezier(.33,1,.68,1)}.group.collapsed .group-title{margin-bottom:0}.group-title:hover{color:var(--text-dim)}.group-title:before{content:"";width:3px;height:11px;border-radius:2px;background:linear-gradient(var(--accent),var(--accent-2));flex:none}.group-chevron{margin-left:auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .25s ease;opacity:.8}.group.collapsed .group-chevron{transform:translate(-1px) rotate(-45deg)}.group-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.33,1,.68,1)}.group.collapsed .group-body-wrap{grid-template-rows:0fr}.group-body{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden}@media(prefers-reduced-motion:reduce){.group-body-wrap,.group-chevron{transition:none}}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.ctl-label{font-size:12.5px;color:var(--text)}.ctl-value{font-size:11.5px;color:var(--accent);font-variant-numeric:tabular-nums}.val-edit{display:flex;align-items:baseline;gap:3px}.val-input{font:inherit;font-size:11.5px;color:var(--accent);font-variant-numeric:tabular-nums;background:transparent;border:1px solid transparent;border-radius:5px;padding:1px 4px;width:56px;text-align:right;cursor:text;-moz-appearance:textfield}.val-input::-webkit-outer-spin-button,.val-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.val-input:hover{border-color:var(--line)}.val-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}.val-unit{font-size:11px;color:var(--text-faint)}input.range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:15px;background:transparent;outline:none;cursor:pointer}input.range::-webkit-slider-runnable-track{height:5px;border-radius:4px;background-color:var(--line);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:var(--fill, 0%) 100%}input.range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0c1712;box-shadow:0 0 0 1px var(--accent),0 0 10px #3dd2a08c;transition:box-shadow .15s,transform .1s}input.range::-webkit-slider-thumb:hover{transform:scale(1.12);box-shadow:0 0 0 1px var(--accent),0 0 14px #3dd2a0d9}input.range:active::-webkit-slider-thumb{transform:scale(1.12)}input.range::-moz-range-track{height:5px;border-radius:4px;background:var(--line)}input.range::-moz-range-progress{height:5px;border-radius:4px;background:var(--accent)}input.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0c1712;box-shadow:0 0 10px #3dd2a08c}.select{width:100%;font:inherit;font-size:12.5px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}.select:focus{border-color:var(--accent);outline:none}.ctl-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.switch{position:relative;width:38px;height:22px;flex:none}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-knob{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--line);border-radius:999px;transition:background .15s}.switch-knob:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#c6cad8;transition:transform .15s}.switch input:checked+.switch-knob{background:var(--accent)}.switch input:checked+.switch-knob:after{transform:translate(16px);background:var(--accent-ink)}.segmented{display:flex;gap:4px;background:var(--panel-2);padding:4px;border-radius:8px;border:1px solid var(--line)}.seg{flex:1;font:inherit;font-size:12px;color:var(--text-dim);background:transparent;border:none;border-radius:6px;padding:6px 4px;cursor:pointer}.seg.active{background:var(--accent);color:var(--accent-ink);font-weight:600}.conditional{display:flex;flex-direction:column;gap:12px}.swatches{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.12)}.swatch-count{font-size:11px;color:var(--text-faint);margin-left:4px}.dims{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}.dims-emphasis{margin-top:6px;color:var(--accent);font-weight:600}.dims-emphasis.stale{color:var(--text-faint);font-weight:500;font-style:italic}.panel::-webkit-scrollbar{width:10px}.panel::-webkit-scrollbar-thumb{background:#232838;border-radius:8px;border:2px solid var(--panel)}@media(max-width:720px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(240px,45vh) 1fr}.panel{border-left:none;border-top:1px solid var(--line)}.brand-sub{display:none}.crop-view{flex:0 1 auto;width:auto;height:auto;max-width:calc(100% - 30px);max-height:30vh;touch-action:pan-y}}@media(max-width:560px){.topbar{flex-wrap:wrap;gap:10px;padding:10px 12px}.topbar-actions{width:100%;justify-content:flex-end}.btn{padding:7px 11px;font-size:12px}.transport{width:min(560px,88%)}}