@import"https://fonts.googleapis.com/css2?family=Menlo&display=swap";:root{--bg: #07061a;--surface: #0b0927;--surface2: #0f0c30;--border: #ff00ff;--border2: #00ffff;--cyan: #00ffff;--magenta: #ff00ff;--green: #00ff88;--orange: #ff8800;--yellow: #ffff00;--text: #ffffff;--text-muted: #dd99ff;--text-dim: #8855bb;--glow-c: 0 0 10px #00ffff, 0 0 24px #00ffff66;--glow-m: 0 0 10px #ff00ff, 0 0 24px #ff00ff66;--glow-o: 0 0 10px #ff8800, 0 0 24px #ff880066;--panel-w: 220px;--topbar-h: 48px;--timeline-h: 180px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:Menlo,Menlo Regular,Courier New,monospace;font-size:12px}body:after{content:"";pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px);z-index:9999}#app{display:grid;grid-template-rows:var(--topbar-h) 1fr var(--timeline-h);grid-template-columns:var(--panel-w) 1fr var(--panel-w);grid-template-areas:"topbar    topbar    topbar" "tree      viewport  inspector" "timeline  timeline  timeline";height:100vh}#topbar{grid-area:topbar;background:var(--surface2);border-bottom:2px solid var(--magenta);box-shadow:0 2px 18px #f0f6,inset 0 -1px #f0f4;display:flex;align-items:center;gap:8px;padding:0 12px}#topbar .title{font-size:14px;font-weight:700;letter-spacing:3px;margin-right:16px;background:linear-gradient(90deg,#0ff,#f0f,#f80,#ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px #ff00ff88)}.btn{background:transparent;border:1px solid var(--magenta);color:var(--magenta);padding:4px 10px;cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:1px;text-shadow:0 0 6px var(--magenta);box-shadow:0 0 6px #f0f4,inset 0 0 6px #f0f1;transition:all .12s}.btn:hover{border-color:var(--cyan);color:var(--cyan);text-shadow:var(--glow-c);box-shadow:var(--glow-c),inset 0 0 8px #0ff1}.btn.active{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c);text-shadow:var(--glow-c)}.btn.record{border-color:var(--magenta);color:var(--magenta)}.btn.record.active{background:#ff00ff26;box-shadow:var(--glow-m);animation:pulse-m 1s infinite}.btn.primary{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c);text-shadow:var(--glow-c)}@keyframes pulse-m{0%,to{box-shadow:0 0 8px #f0f,0 0 20px #f0f4}50%{box-shadow:0 0 18px #f0f,0 0 40px #f0f8}}.timecode{color:var(--orange);font-size:17px;font-weight:700;letter-spacing:3px;min-width:90px;text-shadow:var(--glow-o);padding:0 8px}.camera-select{background:var(--surface);border:1px solid var(--magenta);color:var(--text-muted);padding:4px 8px;font-family:inherit;font-size:11px;cursor:pointer;box-shadow:0 0 6px #f0f3}.camera-select:focus{border-color:var(--cyan);outline:none;box-shadow:var(--glow-c)}.separator{width:1px;height:24px;background:var(--magenta);opacity:.3;margin:0 4px;box-shadow:0 0 6px var(--magenta)}.panel{background:var(--surface);overflow-y:auto;padding:8px}#scene-tree{grid-area:tree;border-right:2px solid var(--magenta);box-shadow:2px 0 16px #f0f3}#inspector{grid-area:inspector;border-left:2px solid var(--cyan);box-shadow:-2px 0 16px #0ff3}.panel-title{color:var(--cyan);text-shadow:var(--glow-c);font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:4px 0 8px;border-bottom:1px solid var(--cyan);margin-bottom:8px}.tree-item{padding:5px 6px;cursor:pointer;border:1px solid transparent;margin-bottom:2px;display:flex;align-items:center;justify-content:space-between;gap:4px;border-radius:2px;transition:all .12s}.tree-item:hover{border-color:var(--magenta);background:#ff00ff12;box-shadow:0 0 8px #f0f3}.tree-item.selected{border-color:var(--cyan);color:var(--cyan);text-shadow:var(--glow-c);background:#00ffff12;box-shadow:0 0 10px #0ff3}.control-btn{font-size:9px;padding:2px 5px;border:1px solid var(--text-dim);color:var(--text-dim);cursor:pointer;background:transparent;font-family:inherit;transition:all .12s;letter-spacing:1px}.control-btn:hover{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 6px #f0f5}.control-btn.active{border-color:var(--magenta);color:var(--magenta);background:#ff00ff26;box-shadow:var(--glow-m);text-shadow:0 0 6px var(--magenta)}.section-label{color:var(--text-dim);font-size:10px;text-transform:uppercase;letter-spacing:2px;margin:8px 0 4px}.inspector-section{margin-bottom:12px}.inspector-label{color:var(--cyan);text-shadow:0 0 6px var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}.inspector-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.inspector-row label{color:var(--text-muted);min-width:70px;font-size:10px;flex-shrink:0}input[type=range]{flex:1;accent-color:var(--cyan);cursor:pointer}input[type=text],input[type=number],input[type=color]{background:var(--surface2);border:1px solid var(--magenta);color:var(--text);padding:3px 6px;font-family:inherit;font-size:11px;width:100%;box-shadow:0 0 6px #f0f2}input:focus{border-color:var(--cyan);outline:none;box-shadow:var(--glow-c)}.texture-slot{border:1px dashed var(--magenta);padding:6px 8px;text-align:center;color:var(--text-dim);cursor:pointer;margin-bottom:3px;font-size:10px;transition:all .12s;box-shadow:0 0 4px #f0f2}.texture-slot:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c)}.texture-slot.has-texture{border-style:solid;border-color:var(--green);color:var(--green);box-shadow:0 0 8px #0f84}.empty-inspector{color:var(--text-dim);padding:12px 6px;font-size:11px;text-align:center}#viewport{grid-area:viewport;position:relative;background:var(--bg);overflow:hidden;border:2px solid transparent;box-shadow:inset 0 0 40px #0000ff14}#viewport canvas{display:block}.mode-badge{position:absolute;top:8px;right:8px;font-size:10px;padding:3px 10px;border:1px solid var(--magenta);background:#07061ae6;color:var(--magenta);letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .12s;user-select:none;text-shadow:0 0 6px var(--magenta);box-shadow:0 0 10px #f0f4}.mode-badge:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c)}.mode-badge.director{border-color:var(--magenta);color:var(--magenta);box-shadow:var(--glow-m);animation:pulse-m 1.5s infinite}.xr-status{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:11px;padding:5px 14px;border:1px solid var(--magenta);background:#07061aeb;color:var(--magenta);cursor:pointer;white-space:nowrap;transition:all .12s;letter-spacing:2px;text-shadow:0 0 6px var(--magenta);box-shadow:0 0 12px #f0f4}.xr-status:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-c)}.xr-status.connected{border-color:var(--green);color:var(--green);box-shadow:0 0 12px #0f84;text-shadow:0 0 8px var(--green)}.xr-status.error{border-color:var(--magenta);color:var(--magenta)}#timeline{grid-area:timeline;background:var(--surface2);border-top:2px solid var(--cyan);box-shadow:0 -2px 18px #0ff4;display:flex;flex-direction:column;overflow:hidden}.timeline-ruler{height:22px;min-height:22px;background:var(--surface);border-bottom:1px solid var(--cyan);box-shadow:0 1px 8px #0ff2;position:relative;cursor:pointer;user-select:none}.timeline-ruler-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--cyan);opacity:.25}.timeline-ruler-label{position:absolute;top:4px;font-size:9px;color:var(--cyan);text-shadow:0 0 4px var(--cyan);transform:translate(-50%)}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);box-shadow:var(--glow-c);pointer-events:none;z-index:10}.timeline-tracks{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}.timeline-track{height:32px;display:flex;align-items:stretch;border-bottom:1px solid rgba(255,0,255,.2);position:relative}.timeline-track-label{width:80px;min-width:80px;padding:0 6px;color:var(--text-muted);font-size:10px;letter-spacing:1px;border-right:1px solid var(--magenta);box-shadow:1px 0 8px #f0f2;display:flex;align-items:center;overflow:hidden;white-space:nowrap;background:var(--surface)}.timeline-track-lane{flex:1;height:100%;position:relative;overflow:hidden}.take-clip{position:absolute;top:4px;height:24px;background:#00ffff1a;border:1px solid var(--cyan);box-shadow:0 0 6px #0ff4;border-radius:2px;cursor:grab;font-size:9px;color:var(--cyan);text-shadow:0 0 4px var(--cyan);padding:2px 5px;white-space:nowrap;overflow:hidden;user-select:none;min-width:20px}.take-clip:active{cursor:grabbing;background:#0ff3}.director-clip{position:absolute;top:4px;height:24px;background:#ff00ff1a;border:1px solid var(--magenta);box-shadow:0 0 6px #f0f4;border-radius:2px;font-size:9px;color:var(--magenta);text-shadow:0 0 4px var(--magenta);padding:2px 5px;white-space:nowrap;min-width:32px;user-select:none}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--magenta);border-radius:2px;box-shadow:0 0 4px var(--magenta)}::-webkit-scrollbar-thumb:hover{background:var(--cyan)}