:root{--c-side:#0f1114;--c-top:#15181c;--c-panel:#181b1f;--c-stage:#24282d;--c-raised:#21252a;--c-raised-2:#2a2f35;--c-hover:#2f353c;--c-text:#e6e8eb;--c-dim:#8d949d;--c-faint:#5a6068;--c-accent:#f08a4b;--c-accent-ink:#1a1009;--c-accent-soft:#f08a4b29;--c-danger:#e5484d;--r:8px;--r-sm:5px;--shadow-soft:0 6px 18px #00000059;--shadow-pop:0 14px 40px #0000008c;--cw:24px;--rh:32px;--lw:200px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}:focus{outline:none}html,body{background:var(--c-side);height:100%;color:var(--c-text);font:13px/1.35 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default;opacity:.32}input{font:inherit;color:inherit;-webkit-user-select:text;user-select:text;background:0 0;border:0}.ic{flex:none;display:block}#app{height:100dvh;padding-bottom:env(safe-area-inset-bottom);grid-template:"side top top"46px"side stage panel"minmax(0,1fr)"side tl tl"/56px minmax(0,1fr) 256px;display:grid}#app.no-panel{grid-template-columns:56px minmax(0,1fr) 0}.sidebar{grid-area:side}.topbar{grid-area:top}.stage{grid-area:stage}.panel{grid-area:panel}.timeline{grid-area:tl}.ib{border-radius:var(--r-sm);width:34px;height:34px;color:var(--c-dim);flex:none;place-items:center;transition:background .12s,color .12s;display:grid}.ib:hover:not(:disabled),.ib:focus-visible{background:var(--c-hover);color:var(--c-text)}.ib.on{color:var(--c-accent);background:var(--c-accent-soft)}.ib.sm{width:26px;height:26px}.ib.sm .ic{width:16px;height:16px}.ib.dim{opacity:.4}.ib.dim:hover{opacity:1}.sidebar{background:var(--c-side);scrollbar-width:none;flex-direction:column;align-items:center;gap:4px;padding:10px 0 12px;display:flex;overflow-y:auto}.sidebar::-webkit-scrollbar{display:none}.tool{border-radius:var(--r);width:42px;height:42px;color:var(--c-dim);place-items:center;transition:background .12s,color .12s;display:grid}.tool:hover:not(:disabled),.tool:focus-visible{color:var(--c-text);background:#1b1f24}.tool.on,.tool.on:hover:not(:disabled){color:var(--c-accent-ink);background:var(--c-accent);box-shadow:0 4px 14px #f08a4b47}.sidebar-spacer{flex:1;min-height:8px}.tool-color{width:30px;height:30px;box-shadow:0 0 0 4px #1c2025, var(--shadow-soft);border-radius:8px}.topbar{background:var(--c-top);justify-content:space-between;align-items:center;gap:8px;min-width:0;padding:0 8px;display:flex}.tb-group{align-items:center;gap:2px;min-width:0;display:flex}.tb-center{position:absolute;left:50%;transform:translate(-50%)}.tb-right{margin-left:auto}.proj-name{border-radius:var(--r-sm);text-overflow:ellipsis;width:220px;min-width:60px;max-width:30vw;height:30px;margin-left:4px;padding:0 10px;font-weight:600}.proj-name:hover{background:var(--c-raised)}.proj-name:focus{background:var(--c-raised-2)}.zoom{border-radius:var(--r-sm);min-width:64px;height:30px;color:var(--c-dim);font-variant-numeric:tabular-nums;padding:0 10px}.zoom:hover,.zoom:focus-visible{background:var(--c-hover);color:var(--c-text)}.stage{background:var(--c-stage);min-height:0;position:relative;overflow:hidden}.stage canvas{display:block;position:absolute;inset:0}.panel{background:var(--c-panel);scrollbar-width:thin;scrollbar-color:var(--c-raised-2) transparent;overflow:hidden auto}.panel.hidden{display:none}.pn-sec{flex-direction:column;gap:10px;padding:14px 14px 16px;display:flex}.pn-sec+.pn-sec{background:linear-gradient(var(--c-top), var(--c-top)) top / 100% 6px no-repeat;padding-top:20px}.pn-sec h3{letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);font-size:11px;font-weight:600}.pn-sub{color:var(--c-dim);text-overflow:ellipsis;white-space:nowrap;margin-top:-4px;font-size:12px;overflow:hidden}.sl{grid-template-columns:68px minmax(0,1fr) 58px;align-items:center;gap:10px;display:grid}.sl-label{color:var(--c-dim);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.sl-track{cursor:pointer;touch-action:none;height:22px;position:relative}.sl-rail{background:#33393f;border-radius:2px;height:3px;margin-top:-1.5px;position:absolute;top:50%;left:0;right:0;overflow:hidden}.sl-fill{background:var(--c-dim);height:100%}.sl-thumb{background:#d4d8dd;border-radius:3px;width:12px;height:12px;margin:-6px 0 0 -6px;transition:transform .1s,background .1s;position:absolute;top:50%;box-shadow:0 2px 6px #00000080}.sl-track:hover .sl-thumb,.sl-track:focus-visible .sl-thumb,.sl-track.active .sl-thumb,.sl-track:focus-visible .sl-fill,.sl-track.active .sl-fill{background:var(--c-accent)}.sl-track.active .sl-thumb{transform:scale(1.12)}.sl-val{background:var(--c-side);cursor:text;border-radius:4px;align-items:center;height:24px;padding:0 6px;display:flex}.sl-num{text-align:right;font-variant-numeric:tabular-nums;width:100%;min-width:0;font-size:12px}.sl-unit{color:var(--c-faint);margin-left:3px;font-size:10px}.sl-val:focus-within{background:#000}.swatches{grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:6px;display:grid}.sw{aspect-ratio:1;border-radius:6px;transition:transform .1s;position:relative}.sw:hover{transform:scale(1.08)}.sw.on{box-shadow:0 0 0 3px var(--c-panel), 0 0 0 5px var(--c-accent)}.sw-custom{cursor:pointer;background:conic-gradient(#e5484d,#f5c04a,#8fcf5a,#3aa6d8,#a066d6,#e5484d);overflow:hidden}.color-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.timeline{background:var(--c-top);flex-direction:column;min-width:0;display:flex}.tl-controls{scrollbar-width:none;align-items:center;gap:6px;min-height:44px;padding:4px 8px;display:flex;overflow-x:auto}.tl-controls::-webkit-scrollbar{display:none}.tl-group{flex:none;align-items:center;gap:2px;display:flex}.tl-group+.tl-group{margin-left:10px}.tl-layer-actions{width:calc(var(--lw) - 8px)}.tl-end{margin-left:auto!important}.ib.play{color:var(--c-text);background:var(--c-raised-2);width:38px}.ib.play:hover{background:var(--c-accent);color:var(--c-accent-ink)}.tl-counter{text-align:center;min-width:64px;color:var(--c-dim);font-variant-numeric:tabular-nums;font-size:12px}.tl-body{height:168px;min-height:0;display:flex;overflow:hidden}.timeline.collapsed .tl-body{display:none}.tl-layers-wrap{width:var(--lw);background:var(--c-panel);flex-direction:column;flex:none;display:flex;overflow:hidden}.tl-ruler-spacer{background:var(--c-panel);z-index:1;flex:none;height:22px;position:relative}.tl-layers{will-change:transform}.ly{height:var(--rh);color:var(--c-dim);cursor:pointer;align-items:center;gap:6px;padding:0 4px 0 10px;display:flex}.ly:hover{background:#1d2126}.ly.on{background:var(--c-raised-2);color:var(--c-text)}.ly.off .ly-name{opacity:.45}.ly-type{color:var(--c-faint);place-items:center;display:grid}.ly.on .ly-type{color:var(--c-accent)}.ly-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.ly-input{background:var(--c-side);border-radius:4px;flex:1;min-width:0;height:24px;padding:0 6px}.tl-grid{scrollbar-width:thin;scrollbar-color:var(--c-raised-2) transparent;flex:1;position:relative;overflow:auto}.tl-grid-inner{width:calc(var(--frames) * var(--cw) + 40px);min-width:100%}.tl-ruler,.row{grid-template-columns:repeat(var(--frames), var(--cw));display:grid}.tl-ruler{z-index:2;background:var(--c-top);cursor:ew-resize;touch-action:none;height:22px;position:sticky;top:0}.rl{color:var(--c-faint);font-variant-numeric:tabular-nums;place-items:center;font-size:10px;display:grid;position:relative}.rl:not(.num):after{content:"";background:var(--c-faint);opacity:.6;border-radius:1px;width:2px;height:2px}.rl.cur{background:var(--c-accent);color:var(--c-accent-ink);border-radius:4px 4px 0 0;font-weight:600}.rl.cur:after{display:none}.rl.cur:not(.num):before{content:attr(data-n)}.row{height:var(--rh)}.row.on{background:#ffffff06}.row.off{opacity:.45}.cell{cursor:pointer;position:relative}.cell.cur{background:var(--c-accent-soft)}.cell:hover{background:#ffffff0d}.cell i{z-index:1;background:#6d747d;border-radius:4px;width:14px;height:14px;margin:-7px 0 0 -7px;display:none;position:absolute;top:50%;left:50%}.cell.key i{display:block}.row.on .cell.key i{background:var(--c-accent)}.cell.held:after,.cell.hold-start:after{content:"";background:#444b53;height:4px;margin-top:-2px;position:absolute;top:50%;left:0;right:0}.cell.hold-start:after{left:50%}.row.on .cell.held:after,.row.on .cell.hold-start:after{background:#f08a4b80}.menu{z-index:50;border-radius:var(--r);background:var(--c-raised-2);min-width:200px;box-shadow:var(--shadow-pop);flex-direction:column;padding:6px;display:flex;position:fixed}.menu-item{border-radius:var(--r-sm);text-align:left;align-items:center;gap:10px;height:34px;padding:0 10px;display:flex}.menu-item:hover:not(:disabled),.menu-item:focus-visible{background:var(--c-hover)}.menu-ic{color:var(--c-dim);display:grid}.menu-label{flex:1}.menu-hint{color:var(--c-faint);font-size:11px}.menu-sep{height:6px}.backdrop{z-index:40;background:#05060899;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dlg{background:var(--c-panel);width:min(460px,100%);max-height:calc(100dvh - 32px);box-shadow:var(--shadow-pop);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.dlg-head{justify-content:space-between;align-items:center;padding:14px 10px 6px 18px;display:flex}.dlg-head h2{font-size:15px;font-weight:600}.dlg-body{padding:8px 18px 16px;overflow-y:auto}.dlg-actions{background:var(--c-top);justify-content:flex-end;gap:8px;padding:12px 18px 16px;display:flex}.btn{border-radius:var(--r-sm);background:var(--c-raised-2);height:36px;padding:0 18px;font-weight:600}.btn:hover{background:var(--c-hover)}.btn.primary{background:var(--c-accent);color:var(--c-accent-ink)}.btn.primary:hover{background:#f59a60}.form{flex-direction:column;gap:16px;display:flex}.form-row{flex-direction:column;gap:8px;display:flex}.form-row>span{color:var(--c-dim);font-size:12px}.field{border-radius:var(--r-sm);background:var(--c-side);height:38px;padding:0 12px}.field:focus{background:#000}.chips{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.chip{border-radius:var(--r);background:var(--c-raised);text-align:left;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;display:flex}.chip small{color:var(--c-faint);font-size:11px}.chip:hover{background:var(--c-hover)}.chip.on{background:var(--c-accent-soft);color:var(--c-accent)}.chip.on small{color:var(--c-accent);opacity:.75}.plist{flex-direction:column;gap:6px;display:flex}.prow{border-radius:var(--r);background:var(--c-raised);cursor:pointer;align-items:center;gap:10px;padding:10px 6px 10px 12px;display:flex}.prow:hover,.prow:focus-visible{background:var(--c-hover)}.prow.on{background:var(--c-accent-soft)}.prow-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.prow-main strong{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.prow-main small{color:var(--c-faint);font-size:11px}.tag{color:var(--c-accent);font-size:11px}.empty{color:var(--c-dim);text-align:center;padding:16px 0}.toast{z-index:60;background:var(--c-raised-2);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;white-space:nowrap;border-radius:999px;padding:9px 16px;transition:opacity .18s,transform .18s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}@media (pointer:coarse){:root{--cw:30px;--rh:38px}.ib{width:40px;height:40px}.ib.sm{width:32px;height:32px}.tool{width:46px;height:46px}.sl-track{height:30px}}@media (max-width:760px){:root{--lw:128px}#app,#app.no-panel{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"side top""side stage""side tl"}.panel{z-index:30;width:min(300px,86vw);box-shadow:var(--shadow-pop);position:fixed;top:46px;bottom:0;right:0}.tb-center{position:static;transform:none}.proj-name{width:120px}.tl-body{height:136px}.tl-layer-actions{width:auto}.ly{padding-left:8px}.ly .ib.sm:last-child{display:none}}.float-bar{z-index:5;background:var(--c-raised-2);box-shadow:var(--shadow-pop);border-radius:10px;gap:4px;padding:4px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.float-bar button{height:34px;color:var(--c-text);border-radius:7px;padding:0 14px}.float-bar button:hover{background:var(--c-hover)}.float-bar button.primary{background:var(--c-accent);color:var(--c-accent-ink);font-weight:600}.form-note{color:var(--c-dim);min-height:16px;font-size:12px}.form-note.warn{color:var(--c-accent)}.vinfo{border-radius:var(--r);background:var(--c-raised);flex-direction:column;gap:2px;padding:12px;display:flex}.vinfo strong{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.vinfo small{color:var(--c-faint);font-size:11px}.progress{background:var(--c-side);border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:var(--c-accent);width:0;height:100%;transition:width .1s}.toggle-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.toggle-row span{color:var(--c-dim);font-size:12px}.toggle{background:#33393f;border-radius:10px;flex:none;width:34px;height:20px;transition:background .12s;position:relative}.toggle:after{content:"";background:#d4d8dd;border-radius:3px;width:12px;height:12px;transition:transform .12s;position:absolute;top:4px;left:4px}.toggle.on{background:var(--c-accent)}.toggle.on:after{background:var(--c-accent-ink);transform:translate(14px)}.cell.vid:after{content:"";background:#2f3a44;height:10px;margin-top:-5px;position:absolute;top:50%;left:0;right:0}.cell.vid.vkey:before{content:"";z-index:1;background:#6d8ea8;border-radius:2px;width:3px;height:14px;margin-top:-7px;position:absolute;top:50%;left:3px}.row.on .cell.vid.vkey:before{background:var(--c-accent)}.pn-sec.hidden{display:none}.steps{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.step{border-radius:var(--r-sm);background:var(--c-raised);height:28px;color:var(--c-dim);font-size:11px}.step:hover{background:var(--c-hover);color:var(--c-text)}.step.on{background:var(--c-accent-soft);color:var(--c-accent)}.tl-grid-inner{position:relative}.tl-rows{touch-action:none}.tl-overlay{pointer-events:none;position:absolute;inset:0}.tl-ghost{border-radius:6px;position:absolute}.tl-ghost.move,.tl-ghost.resize{background:#f08a4b59}.tl-ghost.move.bad{background:#e5484d4d}.tl-ghost.select{background:#ffffff14;border-radius:0}.rl.ghost{opacity:.4}.cell.ghost{background:#0000001f}.cell.ghost:hover{background:#ffffff0a}.cell.sel{background:#f08a4b24}.cell.sel.cur{background:#f08a4b42}.cell.held.end:after{border-radius:0 3px 3px 0;right:6px}.cell.end:before{content:"";opacity:0;z-index:2;background:#5d646c;border-radius:2px;width:3px;height:14px;margin-top:-7px;transition:opacity .12s;position:absolute;top:50%;right:2px}.row.on .cell.end:before,.cell.end:hover:before{opacity:1}.row.on .cell.end:before{background:var(--c-accent)}.cell.end{cursor:pointer}@media (hover:hover){.cell.end:hover{cursor:ew-resize}}.tl-rows.dragging,.tl-rows.dragging .cell{cursor:grabbing}@media (pointer:coarse){.cell.end:before{opacity:1}}.brush-picker{flex-direction:column;gap:8px;display:flex}.brush-row{justify-content:space-between;align-items:center;display:flex}.brush-name{color:var(--c-text);font-size:12px;font-weight:600}.brush-preview{border-radius:var(--r-sm);width:100%;height:56px;display:block}.tool{position:relative}.tool.has-flyout:after{content:"";opacity:.55;clip-path:polygon(100% 0,100% 100%,0 100%);background:currentColor;width:6px;height:6px;position:absolute;bottom:4px;right:4px}.tool.on.has-flyout:after{opacity:.8}.flyout{z-index:50;border-radius:var(--r);background:var(--c-raised-2);min-width:180px;box-shadow:var(--shadow-pop);flex-direction:column;padding:6px;display:flex;position:fixed}.flyout-title{letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);padding:6px 10px;font-size:11px;font-weight:600}.flyout-item{border-radius:var(--r-sm);text-align:left;height:36px;color:var(--c-text);align-items:center;gap:10px;padding:0 10px;display:flex}.flyout-item:hover,.flyout-item:focus-visible{background:var(--c-hover)}.flyout-item.on{background:var(--c-accent-soft);color:var(--c-accent)}.flyout-ic{color:var(--c-dim);display:grid}.flyout-item.on .flyout-ic{color:var(--c-accent)}.shape-fill,.shape-specific{flex-direction:column;gap:10px;display:flex}.shape-fill.hidden{display:none}.fill-row{align-items:center;gap:8px;display:flex}.fill-swatch{border-radius:var(--r-sm);cursor:pointer;flex:none;width:34px;height:28px;position:relative;overflow:hidden}.fill-row .step{flex:1}.motion-box{flex-direction:column;gap:10px;display:flex}.sl.disabled{opacity:.35;pointer-events:none}.toggle-row.hidden{display:none}.pn-h3b{margin-top:8px}.curve{border-radius:var(--r-sm);touch-action:none;cursor:pointer;width:100%;height:150px;display:block}.ease-presets{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.ease-presets .step{padding:0 4px;font-size:11px}.step:disabled{opacity:.35}.cell.mot:after{content:"";background:#3a3530;height:6px;margin-top:-3px;position:absolute;top:50%;left:0;right:0}.row.on .cell.mot:after{background:#f08a4b59}.cell.mkey i{background:#8a9099;border-radius:2px;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;display:block;transform:rotate(45deg)}.row.on .cell.mkey i{background:var(--c-accent)}.popover{z-index:50;border-radius:var(--r);background:var(--c-raised-2);width:260px;box-shadow:var(--shadow-pop);padding:6px 12px 12px;position:fixed}.popover .flyout-title{padding-left:0}.pop-body{flex-direction:column;gap:10px;display:flex}.pop-body .sl{grid-template-columns:64px minmax(0,1fr) 52px}.pop-body .sl-val{background:var(--c-side)}.ib.has-more{position:relative}.ib.has-more:after{content:"";opacity:.55;clip-path:polygon(100% 0,100% 100%,0 100%);background:currentColor;width:5px;height:5px;position:absolute;bottom:3px;right:3px}.chip-ic{color:var(--c-dim);margin-bottom:4px;display:grid}.chip.on .chip-ic{color:var(--c-accent)}.row{position:relative}.wave{pointer-events:none;opacity:.9;z-index:2;position:absolute;top:0}.cell.aud:after{content:"";background:#1f2a33;position:absolute;inset:4px 0}.row.on .cell.aud:after{background:#f08a4b1f}.marker{z-index:3;cursor:pointer;align-items:flex-start;gap:3px;display:flex;position:absolute;top:0;bottom:0;left:0}.marker b{background:var(--c-accent);clip-path:polygon(0 0,100% 0,100% 70%,0 100%);flex:none;width:8px;height:12px;margin-top:2px}.marker em{color:#fff;white-space:nowrap;text-shadow:0 1px 2px #0009;font-size:10px;font-style:normal;font-weight:700;line-height:16px}.rl.cur .marker b{background:var(--c-accent-ink)}.rl{overflow:visible}.form-row.hidden,.sl.hidden{display:none}.chips .chip:disabled{opacity:.4}.steps .step{font-size:11px}.hidden{display:none!important}