:root{--accent: #C9A84C;--accent-light: #d4b47a;--accent-dim: rgba(201, 168, 76, .12);--accent-glow: rgba(201, 168, 76, .18);--bg: #0a0a0a;--bg2: #101010;--bg3: #181818;--bg4: #212121;--bg5: #2a2a2a;--border: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .14);--border-accent: rgba(201, 168, 76, .28);--text: #efefef;--text-mid: #888;--text-dim: #555;--text-faint: #333;--select: var(--accent);--danger: #ff5050;--ok: #5CE0B0;--guide: #ff3366;--ruler-bg: #060606;--ruler-tick: rgba(255, 255, 255, .16);--ruler-text: rgba(255, 255, 255, .42);--font-sans: "DM Sans", system-ui, sans-serif;--font-mono: "DM Mono", ui-monospace, monospace;--topbar-h: 46px;--layers-w: 220px;--inspector-w: 280px;--fx-w: 200px;--timeline-h: 220px;--ruler-w: 22px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:13px;-webkit-font-smoothing:antialiased}#app{display:grid;height:100vh;grid-template-columns:var(--layers-w) 1fr var(--inspector-w) var(--fx-w);grid-template-rows:var(--topbar-h) 1fr var(--timeline-h);grid-template-areas:"topbar    topbar  topbar     topbar" "layers    stage   inspector  fx" "timeline  timeline timeline  timeline";background:var(--bg)}#topbar{grid-area:topbar}#layersPanel{grid-area:layers}#stage{grid-area:stage;min-width:0;min-height:0;overflow:hidden}#inspector{grid-area:inspector}#fxPanel{grid-area:fx}#timeline{grid-area:timeline}#layersPanel,#inspector,#fxPanel{background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden}#layersPanel{border-left:none;border-right:1px solid var(--border)}#timeline{background:var(--bg2);border-top:1px solid var(--border);overflow:hidden}.panel-h{font:500 9px/1 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid);padding:12px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.panel-h .count{color:var(--accent);font-weight:500}button{font:inherit;font-family:var(--font-mono);background:transparent;border:none;color:var(--text);cursor:pointer}input,select{font:inherit;font-family:var(--font-mono)}#topbar{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:4px;-webkit-user-select:none;user-select:none}.tb-brand{font-family:var(--font-mono);font-weight:600;font-size:14px;letter-spacing:3px;color:var(--text);margin-right:16px}.tb-brand em{color:var(--accent);font-style:normal}.tb-spacer{flex:1}.tb-btn{width:30px;height:30px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);color:var(--text-mid);display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s}.tb-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border-strong)}.tb-btn.primary{background:var(--accent);color:#000;border-color:var(--accent)}.tb-btn.primary:hover{background:var(--accent-light)}.tb-btn.on{background:var(--accent-dim);color:var(--accent);border-color:var(--border-accent)}.tb-time{font-family:var(--font-mono);font-size:11px;color:var(--accent);padding:0 12px;letter-spacing:1px}.tb-zoom{font-family:var(--font-mono);font-size:10px;color:var(--text-mid);padding:0 8px;min-width:44px;text-align:center}#stage{position:relative;background:var(--bg);display:grid;grid-template-columns:var(--ruler-w) 1fr;grid-template-rows:var(--ruler-w) 1fr}#stage.no-rulers{grid-template-columns:1fr;grid-template-rows:1fr}#stage.no-rulers .ruler{display:none}.ruler{background:var(--ruler-bg);position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;font:8px/1 var(--font-mono);color:var(--ruler-text)}#rulerCorner{background:var(--ruler-bg);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}#rulerTop{grid-column:2;grid-row:1;border-bottom:1px solid var(--border)}#rulerLeft{grid-column:1;grid-row:2;border-right:1px solid var(--border)}.stage-viewport{grid-column:2;grid-row:2;position:relative;overflow:auto;background:repeating-conic-gradient(#1a1a1a,#1a1a1a 25%,#161616 0%,#161616 50%) 0 0 / 24px 24px}.stage-canvas-wrap{position:absolute;top:0;left:0}#compCanvas{display:block;background:#000;box-shadow:0 0 0 1px var(--border-strong),0 20px 60px #000000b3}#overlayCanvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ruler .mouse-tick{position:absolute;background:var(--accent);pointer-events:none}#rulerTop .mouse-tick{top:0;bottom:0;width:1px}#rulerLeft .mouse-tick{left:0;right:0;height:1px}#stageHud{position:absolute;top:calc(var(--ruler-w) + 8px);right:12px;background:#000000c7;border:1px solid var(--border-strong);border-radius:5px;padding:7px 11px;font:11px/1.4 var(--font-mono);color:var(--accent);pointer-events:none;opacity:0;transition:opacity .12s;white-space:pre;z-index:10}#stageHud.show{opacity:1}#stageHelp{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font:9px var(--font-mono);color:var(--text-dim);pointer-events:none;text-transform:uppercase;letter-spacing:1px}.stage-viewport.cur-move{cursor:move}.stage-viewport.cur-rotate{cursor:grab}.stage-viewport.cur-rotate.dragging{cursor:grabbing}.stage-viewport.cur-nwse{cursor:nwse-resize}.stage-viewport.cur-nesw{cursor:nesw-resize}.stage-viewport.cur-ns{cursor:ns-resize}.stage-viewport.cur-ew{cursor:ew-resize}.lyr-list{padding:4px 0}.lyr-row{display:grid;grid-template-columns:22px auto 1fr 22px 22px 22px;gap:4px;align-items:center;padding:6px 8px;font-family:var(--font-mono);font-size:11px;border-left:2px solid transparent;cursor:pointer;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.lyr-row:hover{background:var(--bg3)}.lyr-row.active{background:var(--accent-dim);border-left-color:var(--accent)}.lyr-row.off .lyr-name,.lyr-row.off .lyr-kind{opacity:.4}.lyr-eye{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);border-radius:4px;font-size:10px}.lyr-eye:hover{background:var(--bg4)}.lyr-row.off .lyr-eye{color:var(--text-dim)}.kbadge{background:var(--bg4);color:var(--text-mid);font-size:7.5px;letter-spacing:1px;padding:2px 4px;border-radius:3px;font-weight:500}.lyr-row.active .kbadge{background:var(--accent);color:#000}.lyr-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-sans);font-size:12px}.lyr-btn{width:18px;height:18px;border-radius:4px;color:var(--text-dim);font-size:10px;display:inline-flex;align-items:center;justify-content:center}.lyr-btn:hover{background:var(--bg4);color:var(--text)}.lyr-empty{padding:24px 14px;color:var(--text-dim);font-size:11px;text-align:center}.insp-empty{padding:32px 18px;color:var(--text-dim);font-size:11px;text-align:center}.insp-section{border-bottom:1px solid var(--border)}.insp-section-h{padding:10px 14px 6px;font:500 9px/1 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid);-webkit-user-select:none;user-select:none}.insp-section-body{padding:0 0 8px}.insp-row{display:grid;grid-template-columns:22px 80px 1fr 22px;gap:6px;align-items:center;padding:4px 12px;font-family:var(--font-mono);font-size:10.5px}.insp-row:hover{background:var(--bg3)}.sw{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint);border-radius:4px;font-size:11px;transition:color .12s}.sw:hover{background:var(--bg4);color:var(--text-mid)}.sw.on{color:var(--accent)}.kf-diamond{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:12px;border-radius:4px}.kf-diamond.on{color:var(--accent);background:var(--accent-dim)}.kf-diamond:hover{background:var(--bg4);color:var(--accent)}.insp-label{color:var(--text-mid);text-transform:uppercase;letter-spacing:.5px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.insp-ctrl{min-width:0;display:flex;align-items:center;gap:4px}.insp-slider{display:grid;grid-template-columns:1fr 50px auto;gap:4px;align-items:center;width:100%}.insp-slider input[type=range]{accent-color:var(--accent);width:100%;min-width:0}.insp-unit{color:var(--text-dim);font-size:9px}.insp-point{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}.insp-num,.insp-ctrl input[type=number],.insp-ctrl input[type=text]{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:3px;padding:3px 5px;font-family:var(--font-mono);font-size:10px;width:100%;min-width:0}.insp-num:focus,.insp-ctrl input:focus{outline:1px solid var(--accent)}.insp-ctrl input[type=color]{width:100%;min-width:28px;height:22px;background:transparent;border:1px solid var(--border);border-radius:3px;padding:0;cursor:pointer}.insp-ctrl input[type=checkbox]{accent-color:var(--accent)}#timeline{display:flex;flex-direction:column}.tl-head{position:relative;height:22px;display:grid;grid-template-columns:200px 1fr;background:var(--bg);border-bottom:1px solid var(--border)}.tl-spacer{background:var(--bg2);border-right:1px solid var(--border)}.tl-ruler{width:100%;height:100%;cursor:ew-resize}.tl-playhead{position:absolute;top:0;bottom:0;width:1.5px;background:var(--accent);pointer-events:none;box-shadow:0 0 6px var(--accent-glow)}.tl-body{flex:1;overflow-y:auto;overflow-x:hidden}.tl-row{display:grid;grid-template-columns:200px 1fr;height:22px;border-bottom:1px solid var(--border);align-items:center}.tl-row-label{padding:0 10px;font-family:var(--font-mono);font-size:10px;border-right:1px solid var(--border);display:flex;gap:8px;align-items:center;height:100%;-webkit-user-select:none;user-select:none}.tl-group{color:var(--text-dim);font-size:8.5px;letter-spacing:1px;text-transform:uppercase}.tl-name{color:var(--text)}.tl-row-track{position:relative;height:22px;background:linear-gradient(to right,var(--bg2),var(--bg2))}.tl-kf{position:absolute;top:50%;transform:translateY(-50%) rotate(45deg);width:9px;height:9px;background:var(--accent);box-shadow:0 0 4px var(--accent-glow);cursor:pointer}.tl-empty{padding:24px 18px;color:var(--text-dim);font-size:11px;text-align:center}.fx-cat-h{padding:8px 12px 4px;font:500 9px/1 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid);-webkit-user-select:none;user-select:none}.fx-item{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:6px 12px;font-family:var(--font-mono);font-size:11px;border-bottom:1px solid var(--border)}.fx-item:hover{background:var(--bg3)}.fx-name{color:var(--text)}.fx-tag{font-size:8px;font-weight:600;padding:2px 5px;border-radius:3px;letter-spacing:1px}.fx-tag.gl{background:var(--accent-dim);color:var(--accent)}.fx-tag.cpu{background:var(--bg4);color:var(--text-mid)}.fx-add{background:var(--bg4);color:var(--accent);width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.fx-add:hover{background:var(--accent);color:#000}