:root{--bg: #0e0f12;--panel: #16181d;--panel-2: #1d2027;--border: #2a2e37;--text: #d7dae0;--muted: #878d9a;--accent: #5b8cff;--accent-2: #7a5bff;--danger: #ff5b6e;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;letter-spacing:.4px}.topbar .brand span{color:var(--accent)}.topbar .spacer{flex:1}.main{flex:1;display:grid;grid-template-columns:240px 1fr 280px;min-height:0}.panel{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto}.panel.right{border-right:none;border-left:1px solid var(--border)}.panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 12px 8px}.stage{position:relative;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#15171c 0% 25%,#191c22 0% 50%) 50% / 24px 24px;overflow:hidden}.stage canvas{max-width:100%;max-height:100%;box-shadow:0 8px 40px #00000080}.stage .dropzone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;pointer-events:none}.stage.dragover:after{content:"";position:absolute;inset:8px;border:2px dashed var(--accent);border-radius:10px}.timeline{height:64px;background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 14px}.node-list{padding:4px 8px 12px}.node-item{display:flex;align-items:center;gap:8px;padding:7px 8px;margin:3px 0;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;cursor:pointer;user-select:none}.node-item.selected{border-color:var(--accent)}.node-item.disabled{opacity:.45}.node-item .name{flex:1;font-size:13px}.node-item .drag{color:var(--muted);cursor:grab}.node-item input[type=checkbox]{accent-color:var(--accent)}.add-menu{padding:8px 12px}.add-menu summary{cursor:pointer;color:var(--accent);font-size:13px}.add-menu .cat{font-size:10px;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}.add-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:5px 6px;border-radius:5px;cursor:pointer;font-size:13px}.add-menu button:hover{background:var(--panel-2)}.params{padding:4px 12px 16px}.param{margin:12px 0}.param label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}.param label .val{color:var(--text);font-variant-numeric:tabular-nums}.param input[type=range]{width:100%;accent-color:var(--accent)}.param select,.param input[type=color]{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px}.param .key-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;font-size:10px;padding:1px 5px;cursor:pointer}.param .key-btn.active{color:var(--accent);border-color:var(--accent)}button.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:7px 12px;cursor:pointer;font-size:13px}button.btn:hover{border-color:var(--accent)}button.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.btn:disabled{opacity:.5;cursor:default}select.btn{appearance:none;-webkit-appearance:none;padding-right:12px}.topbar select.btn{max-width:140px}.scrubber{flex:1;accent-color:var(--accent-2)}.empty{color:var(--muted);font-size:12px;padding:12px}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--panel-2);border:1px solid var(--border);padding:8px 14px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none}.toast.show{opacity:1}