@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap");:root{--bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a26;--border:#2a2a3a;--accent:#0f8;--accent2:#f36;--accent3:#63f;--text:#e8e8f0;--text-dim:#7a7a9a;--radius:8px;--checker1:#1a1a26;--checker2:#12121a}[data-theme=light]{--bg:#f5f5f8;--surface:#fff;--surface2:#eeeef2;--border:#d0d0da;--accent:#00b86b;--accent2:#e6264d;--accent3:#52d;--text:#1a1a2e;--text-dim:#6a6a8a;--checker1:#e0e0e6;--checker2:#f5f5f8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Mono,monospace;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}#__next,body{display:flex;flex-direction:column}#__next{flex:1 1;min-height:0}a{color:inherit;text-decoration:none}header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--border);z-index:10}.logo{font-family:Syne,sans-serif;font-weight:800;font-size:20px;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo span{font-weight:400;opacity:.6;-webkit-text-fill-color:var(--text-dim)}.app-layout{display:flex;flex:1 1;overflow:hidden;position:relative}.left-palette{width:56px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:3px;z-index:5;overflow-y:auto}.palette-label{font-size:7px;text-transform:uppercase;letter-spacing:1.5px;margin:6px 0 3px;text-align:center}.palette-btn,.palette-label{color:var(--text-dim);flex-shrink:0}.palette-btn{width:36px;min-height:36px;height:36px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.palette-btn:hover{border-color:var(--accent);color:var(--accent)}.palette-btn svg{pointer-events:none}.palette-divider{width:28px;height:1px;background:var(--border);margin:4px 0;flex-shrink:0}.svg-palette-grid{display:flex;flex-direction:column;gap:3px;align-items:center;flex-shrink:0}.canvas-area{flex:1 1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.stage-wrapper{flex:1 1;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 50%,rgba(102,51,255,.03) 0,transparent 70%),var(--bg);position:relative;overflow:auto;min-height:0}.stage-wrapper:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:30px 30px;opacity:.3}.stage{border:1px solid var(--border);position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(0,255,136,.05),0 20px 60px rgba(0,0,0,.5);flex-shrink:0}.stage-transparent-bg{background-image:repeating-conic-gradient(var(--checker1) 0 25%,var(--checker2) 0 50%);background-size:16px 16px}.marquee-rect{border:1.5px dashed var(--accent);background:rgba(0,255,136,.06);z-index:50}.marquee-rect,.stage-grid{position:absolute;pointer-events:none}.stage-grid{inset:0;z-index:0}.stage-item{position:absolute;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stage-item.selected{outline:2px solid var(--accent);outline-offset:4px}.stage-item.editing{outline:2px solid var(--accent2)!important;outline-offset:4px;cursor:text!important;z-index:10}.stage-item.editing .text-editable{outline:none;min-width:20px;caret-color:var(--accent)}.stage-item.animating,.stage-item.locked{cursor:default}.stage.exporting .conn-delete-btn,.stage.exporting .handle,.stage.exporting .node-overlay{display:none}.stage.exporting .stage-item.selected{outline:none}.node-overlay{position:absolute;inset:0;pointer-events:none;z-index:4}.node-line{stroke:var(--text-dim);stroke-width:1.5;stroke-dasharray:6 4;opacity:.5}.node-dot{pointer-events:all;cursor:pointer;transition:r .15s}.node-label{font-size:9px;fill:var(--bg);pointer-events:none;font-weight:700;text-anchor:middle;dominant-baseline:central}.traveling-dot{fill:var(--accent);opacity:.9}.traveling-dot-delayed{fill:var(--accent);opacity:.5}.node-pulse-ring{animation:node-pulse 2s ease-out infinite}@keyframes node-pulse{0%{r:7;opacity:.8;stroke-width:1.5}to{r:18;opacity:0;stroke-width:.5}}.handle{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);background:var(--bg);opacity:0;transition:opacity .15s,transform .15s,background .15s;z-index:5;cursor:crosshair;pointer-events:all}.handle-top{top:-5px;left:50%;transform:translateX(-50%)}.handle-right{top:50%;right:-5px;transform:translateY(-50%)}.handle-bottom{bottom:-5px;left:50%;transform:translateX(-50%)}.handle-left{top:50%;left:-5px;transform:translateY(-50%)}.stage-item.selected .handle,.stage-item:hover .handle{opacity:1}.handle:hover{transform:translateX(-50%) scale(1.4);background:var(--accent)}.handle-left:hover,.handle-right:hover{transform:translateY(-50%) scale(1.4);background:var(--accent)}.handle-bottom:hover,.handle-top:hover{transform:translateX(-50%) scale(1.4);background:var(--accent)}.handle.snap-target{opacity:1;background:var(--accent);transform:scale(1.5);border-color:#fff;box-shadow:0 0 12px rgba(0,255,136,.6)}.handle-top.snap-target{transform:translateX(-50%) scale(1.5)}.handle-right.snap-target{transform:translateY(-50%) scale(1.5)}.handle-bottom.snap-target{transform:translateX(-50%) scale(1.5)}.handle-left.snap-target{transform:translateY(-50%) scale(1.5)}.connections-svg{position:absolute;inset:0;pointer-events:none;z-index:1}.conn-path{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:8 4;opacity:.5;transition:stroke-width .15s,opacity .15s}.conn-path-selected{stroke-width:2.5;opacity:1;stroke:var(--accent);stroke-dasharray:none}.conn-draft-line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 6;opacity:.6}@keyframes conn-flow{to{stroke-dashoffset:calc(var(--dash-total, 12) * -1px)}}.conn-delete-btn circle{transition:fill .15s}.conn-delete-btn:hover circle{fill:var(--accent2)}.conn-delete-btn:hover line{stroke:#fff}.edit-hint{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--text-dim);white-space:nowrap;background:var(--surface);padding:2px 6px;border-radius:3px;border:1px solid var(--border);pointer-events:none;opacity:0;transition:opacity .2s}.stage-item.selected:not(.editing):not(.animating):hover .edit-hint{opacity:1}.right-panel{width:290px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}.panel-title{font-family:Syne,sans-serif;font-weight:700;font-size:13px;letter-spacing:-.3px}.panel-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);cursor:pointer;font-size:14px;transition:all .15s}.panel-close:hover{border-color:var(--accent2);color:var(--accent2)}.panel-body{flex:1 1;overflow-y:auto;padding:14px}.panel-body::-webkit-scrollbar{width:4px}.panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.right-panel-content{display:none;flex-direction:column;height:100%}.right-panel-content.active,.rp-tabs{display:flex}.rp-tabs{border-bottom:1px solid var(--border)}.rp-tab{flex:1 1;padding:10px 0;font-family:Syne,sans-serif;font-weight:700;font-size:11px;letter-spacing:.5px;text-align:center;background:none;border:none;color:var(--text-dim);cursor:pointer;transition:all .15s;position:relative}.rp-tab:hover{color:var(--text)}.rp-tab.active{color:var(--accent)}.rp-tab.active:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--accent);border-radius:1px}.accordion{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;font-family:Syne,sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;background:var(--bg);border:none;color:var(--text-dim);cursor:pointer;transition:all .15s}.accordion-header:hover{background:var(--surface2);color:var(--text)}.accordion.open .accordion-header{border-bottom:1px solid var(--border)}.accordion.open .accordion-header svg{color:var(--accent)}.accordion-body{padding:12px}.accordion-body .section:last-child{margin-bottom:0}.section{margin-bottom:16px}.section h3{font-family:Syne,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:8px}.field{margin-bottom:10px}.field label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:4px}.field input,.field select,.field textarea{width:100%;font-family:Space Mono,monospace;font-size:11px;padding:7px 9px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);outline:none;transition:border-color .2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}.field textarea{resize:vertical;min-height:50px}.field-row{display:flex;gap:8px}.field-row .field{flex:1 1}.align-row{display:flex;gap:4px}.align-btn{width:28px;height:28px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:var(--text-dim);padding:0}.align-btn:hover{border-color:var(--accent);color:var(--accent)}.color-wrap{display:flex;align-items:center;gap:6px}.color-wrap input[type=color]{width:30px;height:30px;padding:2px;border-radius:4px;cursor:pointer}.btn{font-family:Space Mono,monospace;font-size:11px;padding:7px 12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:var(--radius);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}.btn:hover{color:var(--accent);background:rgba(0,255,136,.05)}.btn-accent,.btn:hover{border-color:var(--accent)}.btn-accent{background:var(--accent);color:var(--bg);font-weight:700}.btn-accent:hover{background:#00cc6e;color:var(--bg);border-color:#00cc6e}.btn-danger{border-color:var(--accent2);color:var(--accent2)}.btn-danger:hover{background:rgba(255,51,102,.1)}.btn-sm{padding:4px 8px;font-size:10px}.item-card{padding:7px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:space-between;gap:6px}.item-card.active,.item-card:hover{border-color:var(--accent)}.item-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}.item-type{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--accent3);background:rgba(102,51,255,.15);padding:2px 5px;border-radius:3px}.item-fx-tags{font-size:8px;color:var(--text-dim);margin-top:1px}.item-action-btn{width:20px;height:20px;border-radius:3px;background:none;border:1px solid transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;flex-shrink:0}.item-action-btn:hover{border-color:var(--border);color:var(--text);background:var(--surface2)}.item-action-btn:disabled{opacity:.25;cursor:default}.item-action-btn.item-action-danger:hover{border-color:var(--accent2);color:var(--accent2)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-dim);text-align:center;padding:20px}.empty-state svg{margin-bottom:10px;opacity:.3}.empty-state p{font-size:11px;line-height:1.6}.seq-step{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:8px}.seq-step.expanded{border-color:var(--accent)}.seq-step-header{justify-content:space-between;cursor:pointer;gap:6px}.seq-step-header,.seq-step-num{display:flex;align-items:center}.seq-step-num{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:10px;font-weight:700;justify-content:center;flex-shrink:0}.seq-step-label{flex:1 1;font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:.3px}.seq-step-meta{font-size:9px;color:var(--text-dim)}.seq-step-actions{display:flex;gap:3px}.seq-step-actions button{width:20px;height:20px;border-radius:3px;background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .15s}.seq-step-actions button:hover{border-color:var(--accent2);color:var(--accent2)}.seq-step-body{margin-top:10px;display:none}.seq-step.expanded .seq-step-body{display:block}.seq-step-body .field{margin-bottom:8px}.seq-step-body .field-row{display:flex;gap:6px}.seq-step-body .field-row .field{flex:1 1}.controls-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border-top:1px solid var(--border)}.playback-controls{display:flex;gap:4px}.play-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);border:none;cursor:pointer;transition:all .15s}.play-btn:hover{transform:scale(1.08)}.ctrl-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);cursor:pointer;color:var(--text);transition:all .15s}.ctrl-btn.active,.ctrl-btn:hover,.tl-btn.active{border-color:var(--accent);color:var(--accent)}.ctrl-btn.active,.tl-btn.active{background:rgba(0,255,136,.08)}.ctrl-btn,.tl-btn{position:relative}.loop-badge{position:absolute;bottom:1px;right:1px;font-size:7px;font-weight:700;color:var(--accent);line-height:1;pointer-events:none}.loop-badge.sm{font-size:6px;bottom:0;right:0}.timeline-track{flex:1 1;height:5px;background:var(--surface2);border-radius:3px;position:relative;cursor:pointer}.timeline-progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:3px;width:0;transition:width .05s linear}.timeline-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px rgba(0,255,136,.4);transition:left .05s linear}.time-display{font-size:11px;color:var(--text-dim);min-width:70px;text-align:right;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.duration-input{width:50px;font-family:Space Mono,monospace;font-size:11px;padding:3px 5px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;text-align:center}.editor-main,.editor-page{display:flex;flex-direction:column;flex:1 1;min-height:0}.editor-main{overflow:hidden}.tl-editor{display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}.tl-resize-handle{height:10px;cursor:ns-resize;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;background:transparent;transition:background .15s}.tl-resize-handle:before{content:"";position:absolute;inset:0;background:var(--border);opacity:0;transition:opacity .15s}.tl-resize-handle:active:before,.tl-resize-handle:hover:before{opacity:.5}.tl-resize-grip{width:24px;height:14px;border-radius:4px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);z-index:1;transition:all .15s}.tl-resize-handle:hover .tl-resize-grip{border-color:var(--accent);color:var(--accent);background:var(--surface)}.tl-resize-handle:active .tl-resize-grip{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px rgba(0,255,136,.15)}.tl-transport{gap:10px;padding:0 14px;height:36px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border)}.tl-t-left,.tl-transport{display:flex;align-items:center}.tl-t-left{gap:4px}.tl-btn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .15s}.tl-btn:hover{border-color:var(--accent);color:var(--accent)}.tl-play{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);border:none;cursor:pointer;transition:transform .15s}.tl-play:hover{transform:scale(1.08)}.tl-time{font-size:10px;color:var(--text-dim);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:90px}.tl-t-right{display:flex;align-items:center;gap:6px;margin-left:auto}.tl-dur-lbl{font-size:8px;color:var(--text-dim);letter-spacing:1px}.tl-dur{width:44px;font-family:Space Mono,monospace;font-size:10px;padding:3px 4px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;text-align:center;outline:none}.tl-dur:focus{border-color:var(--accent)}.tl-save{font-family:Space Mono,monospace;font-size:9px;padding:4px 10px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;cursor:pointer;font-weight:700;letter-spacing:.3px;transition:opacity .15s}.tl-save:hover{opacity:.9}.tl-save:disabled{opacity:.5;cursor:default}.tl-body{display:flex;flex:1 1;overflow:hidden}.tl-sidebar{width:148px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto}.tl-corner{height:28px;padding:0 12px;font-family:Syne,sans-serif;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border)}.tl-corner,.tl-empty-side{display:flex;align-items:center;color:var(--text-dim)}.tl-empty-side{height:34px;justify-content:center;font-size:10px}.tl-label{height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid var(--border);border-left:3px solid transparent;cursor:pointer;transition:background .15s}.tl-label:hover{background:hsla(0,0%,100%,.02)}.tl-label.active{background:rgba(0,255,136,.04)}.tl-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.tl-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1}.tl-type{font-size:7px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);background:var(--bg);padding:1px 4px;border-radius:3px;flex-shrink:0}.tl-label-input{width:80px;font-family:Space Mono,monospace;font-size:10px;padding:0 2px;background:var(--surface);border:1px solid var(--accent);border-radius:3px;color:var(--text);outline:none}.tl-label.drag-over{border-top:2px solid var(--accent)}.tl-label.dragging{opacity:.4}.tl-lanes{flex:1 1;overflow-x:auto;overflow-y:auto;position:relative;cursor:crosshair}.tl-lanes::-webkit-scrollbar{height:5px;width:4px}.tl-lanes::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.tl-inner{position:relative;min-height:100%}.tl-grid{position:absolute;top:0;bottom:0;width:1px;background:hsla(0,0%,100%,.025);pointer-events:none;z-index:0}.tl-grid.major{background:hsla(0,0%,100%,.05)}.tl-ruler{height:28px;position:relative;border-bottom:1px solid var(--border);z-index:1}.tl-rlabel{position:absolute;top:8px;transform:translateX(4px);font-size:9px;color:var(--text-dim);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tl-tracks{position:relative;z-index:1}.tl-empty{height:80px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-dim);pointer-events:none}.tl-track{height:34px;position:relative;border-bottom:1px solid var(--border)}.tl-track.active{background:rgba(0,255,136,.02)}.tl-clip{position:absolute;border-radius:4px;border:1px solid;cursor:-webkit-grab;cursor:grab;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:filter .15s,border-color .15s}.tl-clip:hover{filter:brightness(1.4)}.tl-clip.active{border-style:solid}.tl-clip-l,.tl-clip-r{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;z-index:3}.tl-clip-l{left:-2px;border-radius:4px 0 0 4px}.tl-clip-r{right:-2px;border-radius:0 4px 4px 0}.tl-clip-l:hover,.tl-clip-r:hover{background:hsla(0,0%,100%,.12)}.tl-clip-l:after,.tl-clip-r:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:10px;background:hsla(0,0%,100%,.15);border-radius:1px;transition:background .15s}.tl-clip:hover .tl-clip-l:after,.tl-clip:hover .tl-clip-r:after{background:hsla(0,0%,100%,.35)}.tl-clip-l:hover:after,.tl-clip-r:hover:after{background:hsla(0,0%,100%,.7)}.tl-seg{position:absolute;border-radius:4px;border:1px solid;cursor:-webkit-grab;cursor:grab;transition:filter .15s,box-shadow .15s;overflow:hidden;z-index:2;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tl-seg:hover{filter:brightness(1.4);box-shadow:0 0 8px hsla(0,0%,100%,.06)}.tl-seg-bar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:4px 0 0 4px}.tl-seg-txt{font-size:8px;color:var(--text);padding:0 10px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;height:100%;pointer-events:none;letter-spacing:.3px}.tl-seg-l,.tl-seg-r{position:absolute;top:0;bottom:0;width:7px;cursor:col-resize;z-index:3;display:flex;align-items:center;justify-content:center}.tl-seg-l{left:-2px;border-radius:4px 0 0 4px}.tl-seg-r{right:-2px;border-radius:0 4px 4px 0}.tl-seg-l:after,.tl-seg-r:after{content:"";width:2px;height:10px;background:hsla(0,0%,100%,.3);border-radius:1px;transition:background .15s}.tl-seg:hover .tl-seg-l:after,.tl-seg:hover .tl-seg-r:after{background:hsla(0,0%,100%,.5)}.tl-seg-l:hover:after,.tl-seg-r:hover:after{background:hsla(0,0%,100%,.8)}.tl-seg.overlapping{opacity:.85}.tl-ph{position:absolute;top:0;bottom:0;left:0;width:0;z-index:10;pointer-events:none}.tl-ph-head{position:absolute;top:2px;left:-6px;width:12px;height:12px;background:var(--accent);-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%);cursor:col-resize;pointer-events:auto;z-index:11}.tl-ph-head:hover{filter:brightness(1.2)}.tl-ph-line{position:absolute;top:14px;bottom:0;left:-1px;width:2px;background:var(--accent);box-shadow:0 0 8px rgba(0,255,136,.35)}.tl-ph-line,.toast{pointer-events:none}.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--accent);color:var(--accent);padding:7px 14px;border-radius:var(--radius);font-size:11px;opacity:0;transition:all .3s;z-index:100}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;border:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.projects-page{height:100vh;display:flex;flex-direction:column}.projects-page header{flex-shrink:0}.projects-grid{flex:1 1;overflow-y:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:16px;gap:16px;align-content:start}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .15s;position:relative}.project-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}.project-card-link{display:block}.project-card-preview{height:120px;background:var(--bg);display:flex;align-items:center;justify-content:center}.project-card-count{font-size:11px;color:var(--text-dim)}.project-card-info{padding:12px}.project-card-name{font-family:Syne,sans-serif;font-weight:700;font-size:13px;margin-bottom:4px}.project-card-date{font-size:10px;color:var(--text-dim)}.project-delete{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .15s}.project-card:hover .project-delete{opacity:1}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-left{0%{transform:translateX(-300px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{transform:translateX(300px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slide-in-up{0%{transform:translateY(300px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-down{0%{transform:translateY(-300px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes zoom-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes rotate-in{0%{transform:rotate(-2turn) scale(0);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}@keyframes flip-in{0%{transform:perspective(400px) rotateY(-90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes typewriter-in{0%{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes anim-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes anim-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-8px)}20%,40%,60%,80%{transform:translateX(8px)}}@keyframes anim-wobble{0%,to{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes anim-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes anim-float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes anim-glitch{0%,to{transform:translate(0);filter:hue-rotate(0deg)}10%{transform:translate(-3px,2px);filter:hue-rotate(90deg)}20%{transform:translate(3px,-2px);filter:hue-rotate(180deg)}30%{transform:translate(0);filter:hue-rotate(0deg)}40%{transform:translate(2px,3px) skewX(2deg);filter:hue-rotate(270deg)}50%{transform:translate(-2px,-1px)}60%{transform:translate(3px,1px) skewX(-1deg)}70%{transform:translate(0)}}@keyframes anim-rubber{0%{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scaleX(1) scaleY(1)}}@keyframes neon-glow{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor)}50%{filter:drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor) drop-shadow(0 0 60px currentColor)}}@keyframes color-cycle{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}@keyframes flip-in-x{0%{transform:perspective(400px) rotateX(-90deg);opacity:0}to{transform:perspective(400px) rotateX(0);opacity:1}}@keyframes anim-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}@keyframes anim-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11%{transform:skewX(-12.5deg) skewY(-12.5deg)}22%{transform:skewX(6.25deg) skewY(6.25deg)}33%{transform:skewX(-3.125deg) skewY(-3.125deg)}44%{transform:skewX(1.5625deg) skewY(1.5625deg)}55%{transform:skewX(-.78125deg) skewY(-.78125deg)}66%{transform:skewX(.390625deg) skewY(.390625deg)}77%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes anim-heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}@keyframes anim-breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-out-left{0%{transform:translateX(0);opacity:1}to{transform:translateX(-300px);opacity:0}}@keyframes slide-out-right{0%{transform:translateX(0);opacity:1}to{transform:translateX(300px);opacity:0}}@keyframes slide-out-up{0%{transform:translateY(0);opacity:1}to{transform:translateY(-300px);opacity:0}}@keyframes slide-out-down{0%{transform:translateY(0);opacity:1}to{transform:translateY(300px);opacity:0}}@keyframes zoom-out{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}@keyframes rotate-out{0%{transform:rotate(0) scale(1);opacity:1}to{transform:rotate(2turn) scale(0);opacity:0}}@keyframes flip-out-y{0%{transform:perspective(400px) rotateY(0);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flip-out-x{0%{transform:perspective(400px) rotateX(0);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes shrink-out{0%{transform:scale(1);opacity:1}to{transform:scale(.01);opacity:0}}.export-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.export-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:380px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,255,136,.05)}.export-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}.export-panel-title{font-family:Syne,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.3px}.export-options{padding:14px;display:flex;flex-direction:column;gap:8px}.export-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;text-align:left;width:100%;font-family:Space Mono,monospace;color:var(--text)}.export-card:hover:not(:disabled){border-color:var(--accent);background:rgba(0,255,136,.03)}.export-card:disabled{opacity:.5;cursor:not-allowed}.export-card.active{border-color:var(--accent);background:rgba(0,255,136,.06)}.export-card-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:var(--radius)}.export-card-text{display:flex;flex-direction:column;gap:3px}.export-card-title{font-family:Syne,sans-serif;font-weight:700;font-size:12px}.export-card-desc{font-size:9px;color:var(--text-dim)}.export-progress-wrap{padding:0 18px 14px;display:flex;flex-direction:column;gap:6px}.export-progress{height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}.export-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width .15s linear}.export-progress-text{font-size:9px;color:var(--text-dim);text-align:center}.canvas-presets{display:grid;grid-template-columns:1fr 1fr;grid-gap:4px;gap:4px}.canvas-preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;text-align:left;font-family:Space Mono,monospace;color:var(--text)}.canvas-preset.active,.canvas-preset:hover{border-color:var(--accent)}.canvas-preset.active{background:rgba(0,255,136,.06)}.canvas-preset-label{font-size:9px;font-weight:700}.canvas-preset-size{font-size:8px;color:var(--text-dim)}.canvas-bg-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.canvas-bg-opt{flex:1 1;padding:5px 0;font-family:Space Mono,monospace;font-size:9px;background:var(--bg);border:none;color:var(--text-dim);cursor:pointer;transition:all .15s;text-align:center}.canvas-bg-opt:not(:last-child){border-right:1px solid var(--border)}.canvas-bg-opt:hover{color:var(--text)}.canvas-bg-opt.active{background:var(--accent);color:var(--bg);font-weight:700}.canvas-transparent-preview{height:32px;border-radius:var(--radius);border:1px solid var(--border);background-image:repeating-conic-gradient(var(--checker1) 0 25%,var(--checker2) 0 50%);background-size:12px 12px}.json-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:560px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,255,136,.05)}.json-panel-actions{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border)}.json-panel-code{flex:1 1;overflow:auto;padding:14px 18px;margin:0;font-family:Space Mono,monospace;font-size:10px;line-height:1.6;color:var(--text-dim);white-space:pre;-moz-tab-size:2;tab-size:2}.json-panel-code::-webkit-scrollbar{width:4px;height:4px}.json-panel-code::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.slide-strip{display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}.slide-strip::-webkit-scrollbar{height:3px}.slide-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.slide-tab{padding:4px 12px;font-family:Space Mono,monospace;font-size:10px;color:var(--text-dim);background:var(--bg);border:1px solid var(--border);border-radius:5px;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0}.slide-tab:hover{border-color:var(--accent);color:var(--text)}.slide-tab.active{border-color:var(--accent);color:var(--accent);background:rgba(0,255,136,.06);font-weight:700}.slide-tab.drag-over{border-color:var(--accent3);box-shadow:0 0 8px rgba(102,51,255,.3)}.slide-tab-name{pointer-events:none}.slide-tab-input{width:80px;font-family:Space Mono,monospace;font-size:10px;padding:0 2px;background:var(--surface);border:1px solid var(--accent);border-radius:3px;color:var(--text);outline:none}.slide-tab-add{width:26px;height:26px;border-radius:5px;border:1px dashed var(--border);background:none;color:var(--text-dim);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.slide-tab-add:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,255,136,.04)}.slide-ctx-backdrop{position:fixed;inset:0;z-index:60}.slide-ctx-menu{position:fixed;z-index:61;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 0;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:120px}.slide-ctx-menu button{display:block;width:100%;padding:6px 14px;font-family:Space Mono,monospace;font-size:10px;color:var(--text);background:none;border:none;text-align:left;cursor:pointer;transition:background .1s}.slide-ctx-menu button:hover{background:hsla(0,0%,100%,.04)}.slide-ctx-menu button.slide-ctx-danger{color:var(--accent2)}.slide-ctx-menu button.slide-ctx-danger:hover{background:rgba(255,51,102,.08)}.slide-ctx-menu button:disabled{opacity:.4;cursor:default}.editor-fullscreen{display:flex;flex-direction:column;flex:1 1;min-height:0}.editor-fullscreen .left-palette,.editor-fullscreen .right-panel,.editor-fullscreen .slide-strip,.editor-fullscreen .tl-editor,.editor-fullscreen>header{display:none}.editor-fullscreen .canvas-area,.editor-fullscreen .editor-main{flex:1 1}.editor-fullscreen .stage-wrapper{padding:0}.fs-exit-btn{position:fixed;top:14px;right:14px;z-index:40;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .15s;box-shadow:0 4px 16px rgba(0,0,0,.4);opacity:.5}.fs-exit-btn:hover{opacity:1;border-color:var(--accent);color:var(--accent)}.cp-trigger{display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s;font-family:Space Mono,monospace;color:var(--text)}.cp-trigger:hover{border-color:var(--accent)}.cp-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;background-image:repeating-conic-gradient(var(--surface2) 0 25%,var(--bg) 0 50%);background-size:8px 8px}.cp-label{font-size:11px;opacity:.8}.cp-backdrop{position:fixed;inset:0;z-index:999}.cp-popover{position:fixed;z-index:1000;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,255,136,.05)}.cp-sv-wrap{position:relative;border-radius:6px;overflow:hidden;cursor:crosshair;margin-bottom:10px}.cp-sv{display:block;border-radius:6px}.cp-sv-cursor{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}.cp-bar-wrap{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;margin-bottom:8px}.cp-bar{display:block;border-radius:6px}.cp-bar-thumb{position:absolute;top:50%;width:6px;height:16px;background:#fff;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}.cp-inputs{display:flex;align-items:center;gap:6px;margin-bottom:10px}.cp-preview-swatch{width:28px;height:28px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;background-image:repeating-conic-gradient(var(--surface2) 0 25%,var(--bg) 0 50%);background-size:8px 8px}.cp-hex-input{flex:1 1;font-family:Space Mono,monospace;font-size:11px;padding:5px 7px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:5px;outline:none}.cp-hex-input:focus{border-color:var(--accent)}.cp-alpha-input{width:52px;font-family:Space Mono,monospace;font-size:11px;padding:5px 7px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:5px;outline:none;text-align:center}.cp-alpha-input:focus{border-color:var(--accent)}.cp-presets{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:4px;gap:4px;margin-bottom:8px}.cp-preset{width:100%;aspect-ratio:1;border:1px solid hsla(0,0%,100%,.1);border-radius:4px;cursor:pointer;transition:transform .1s,border-color .1s;padding:0}.cp-preset:hover{transform:scale(1.2);border-color:var(--accent);z-index:1}.cp-transparent-btn{width:100%;padding:6px 0;font-family:Space Mono,monospace;font-size:10px;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);border-radius:5px;cursor:pointer;transition:all .15s;text-align:center}.cp-transparent-btn:hover{border-color:var(--accent);color:var(--accent)}.palette-btn-active{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(0,255,136,.1)!important;box-shadow:0 0 8px rgba(0,255,136,.2)}.drawing-overlay{position:absolute;inset:0;pointer-events:none;z-index:6}.stage.tool-bezier,.stage.tool-bezier .stage-item,.stage.tool-ellipse,.stage.tool-ellipse .stage-item,.stage.tool-line,.stage.tool-line .stage-item,.stage.tool-pen,.stage.tool-pen .stage-item,.stage.tool-rect,.stage.tool-rect .stage-item{cursor:crosshair}