@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;800&family=Share+Tech+Mono&display=swap";:root{--bg-deep: #04060d;--bg: #070a18;--bg-elev: #0d1226;--bg-soft: #131a36;--fg: #e7f0ff;--fg-dim: #b3c1de;--fg-muted: #6c7aa3;--cyan: #00e5ff;--magenta: #ff2bd6;--amber: #ffb347;--green: #36ffa1;--danger: #ff4f6d;--border: rgba(0, 229, 255, .18);--border-strong: rgba(0, 229, 255, .35);--glow-cyan: 0 0 18px rgba(0, 229, 255, .35);--glow-magenta: 0 0 18px rgba(255, 43, 214, .35);--panel-grad: linear-gradient(180deg, rgba(0, 229, 255, .04), rgba(255, 43, 214, .04));font-family:Orbitron,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;background:var(--bg-deep);color:var(--fg)}html,body{height:100%;overflow:hidden}#root{height:100%}body{background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(0,229,255,.1),transparent 60%),radial-gradient(ellipse 60% 60% at 90% 90%,rgba(255,43,214,.1),transparent 60%),var(--bg-deep);background-attachment:fixed}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 3px);z-index:9999;mix-blend-mode:overlay}.app{display:grid;grid-template-rows:auto 1fr;height:100vh;padding:14px;gap:14px;max-width:1500px;margin:0 auto;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#0d1226e6,#070a18e6);box-shadow:inset 0 0 30px #00e5ff0a}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.header-toggle{width:36px;height:36px;border-radius:8px}.lang-switcher{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#0006;border:1px solid var(--border);border-radius:8px;color:var(--fg-muted)}.lang-switcher>svg{margin-right:2px;color:var(--fg-muted)}.lang-btn{background:transparent;border:none;color:var(--fg-muted);font-family:Orbitron,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:1.5px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:color .15s,background .15s,text-shadow .15s}.lang-btn:hover{color:var(--fg)}.lang-btn.active{color:var(--cyan);background:#00e5ff1f;text-shadow:0 0 8px rgba(0,229,255,.5)}.app--immersive{padding:0;gap:0;max-width:none}.app--immersive .app-header{position:fixed;top:12px;right:12px;left:auto;z-index:10;border-radius:10px;padding:6px 10px;background:#070a18b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app--immersive .app-header .brand,.app--immersive .side-panel{display:none}.app--immersive .app-main{grid-template-columns:1fr;height:100vh}.app--immersive .webcam-panel{border-radius:0;border:none;box-shadow:none}.app--immersive .webcam-stage{border-radius:0;height:100vh;width:100vw;max-width:100vw;max-height:100vh}.brand h1{margin:0;font-family:Orbitron,sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:4px;background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px rgba(0,229,255,.25)}.brand-accent{background:linear-gradient(90deg,var(--magenta),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}.brand .subtitle{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--fg-muted);font-family:Share Tech Mono,monospace;font-size:.78rem;letter-spacing:.5px;text-transform:uppercase;margin-top:4px}.app-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:stretch;min-height:0}@media (max-width: 900px){html,body{overflow:auto}.app{height:auto;min-height:100vh;overflow:visible}.app-main{grid-template-columns:1fr}}.panel{background:linear-gradient(180deg,#0d1226e0,#070a18eb),var(--panel-grad);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:inset 0 1px #ffffff0a,inset 0 0 30px #00e5ff0a,0 6px 30px #00000073}.panel h2{margin:0 0 10px;font-family:Orbitron,sans-serif;font-size:.85rem;letter-spacing:3px;color:var(--fg-muted);text-transform:uppercase}.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#00e5ff2e,#00e5ff0f);color:var(--cyan);border:1px solid var(--border-strong);padding:8px 14px;border-radius:8px;font-family:Orbitron,sans-serif;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-size:.8rem;transition:filter .15s ease,transform .05s ease,box-shadow .2s ease;text-shadow:0 0 8px rgba(0,229,255,.4)}.btn:hover{filter:brightness(1.2);box-shadow:var(--glow-cyan)}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}.btn.power{background:linear-gradient(180deg,#36ffa138,#36ffa10f);color:var(--green);border-color:#36ffa166;text-shadow:0 0 10px rgba(54,255,161,.5)}.btn.power:hover{box-shadow:0 0 20px #36ffa166}.btn.secondary{background:linear-gradient(180deg,#ffffff0a,#ffffff03);color:var(--fg-dim);border-color:var(--border);text-shadow:none}.btn.danger{background:linear-gradient(180deg,#ff4f6d40,#ff4f6d0d);color:#ffd6dd;border-color:#ff4f6d66;text-shadow:0 0 10px rgba(255,79,109,.4)}.btn.danger:hover{box-shadow:0 0 20px #ff4f6d66}.btn-icon{background:#ffffff08;border:1px solid var(--border);color:var(--fg-dim);width:30px;height:30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;padding:0;transition:color .15s,border-color .15s,box-shadow .15s}.btn-icon:hover{color:var(--cyan);border-color:var(--border-strong);box-shadow:var(--glow-cyan)}.webcam-panel{padding:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:#000;min-height:0}.webcam-stage{position:relative;background:#000;height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 40px #0009,inset 0 0 0 1px #00e5ff2e}.webcam-stage video,.webcam-stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.webcam-stage video{transform:scaleX(-1);object-fit:cover}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2;background:#04060dc7;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.start-card{background:linear-gradient(180deg,#0d1226f2,#070a18f2);border:1px solid var(--border-strong);padding:22px 28px;border-radius:12px;box-shadow:var(--glow-cyan);max-width:380px;text-align:center}.start-card h2{margin:0 0 8px;font-family:Orbitron,sans-serif;letter-spacing:3px;color:var(--cyan);text-shadow:0 0 14px rgba(0,229,255,.4)}.start-card p{margin:0;color:var(--fg-dim);font-family:Share Tech Mono,monospace;line-height:1.6;font-size:.9rem}.overlay-error{position:absolute;bottom:8px;left:8px;right:8px;background:#04060dd9;padding:6px 10px;border-radius:6px;z-index:3}.side-panel{display:flex;flex-direction:column;min-height:0;height:100%;padding:0;overflow:hidden}.tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:linear-gradient(180deg,rgba(0,229,255,.04),transparent)}.tab{flex:1;background:transparent;border:none;color:var(--fg-muted);padding:14px 6px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s,background .15s;display:inline-flex;align-items:center;justify-content:center}.tab.active{color:var(--cyan);border-bottom-color:var(--cyan);background:#00e5ff0d;filter:drop-shadow(0 0 8px rgba(0,229,255,.45))}.tab:hover{color:var(--fg)}.tab-content{padding:14px;overflow-y:auto;flex:1;min-height:0}.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lcd{background:linear-gradient(180deg,#0009,#000000d9),repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:0;overflow:hidden;box-shadow:inset 0 0 14px #0009}.lcd-label{font-family:Orbitron,sans-serif;color:var(--fg-muted);font-size:.62rem;letter-spacing:2px;text-transform:uppercase}.lcd-value{font-family:Share Tech Mono,monospace;font-size:clamp(.95rem,2.5vw,1.45rem);font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.lcd-cyan .lcd-value{color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.5)}.lcd-amber .lcd-value{color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,.5)}.lcd-magenta .lcd-value{color:var(--magenta);text-shadow:0 0 10px rgba(255,43,214,.5)}.lcd-strip{grid-column:1 / -1}.lcd-tiny{font-family:Share Tech Mono,monospace;color:var(--fg-muted);font-size:.78rem;letter-spacing:1px}.hud-hands{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.hand-tag{font-family:Share Tech Mono,monospace;font-size:.72rem;letter-spacing:1px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);color:var(--fg-muted);background:#0006;text-transform:uppercase}.hand-tag.on{color:var(--cyan);border-color:var(--border-strong);box-shadow:0 0 10px #00e5ff4d}.meter-track{margin-top:8px;height:8px;background:#0009;border-radius:4px;overflow:hidden;border:1px solid var(--border)}.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--amber));box-shadow:0 0 12px #00e5ff80}.controls{display:flex;flex-direction:column;gap:14px}.control{display:flex;flex-direction:column;gap:6px}.control label,.control-title{display:flex;justify-content:space-between;font-family:Orbitron,sans-serif;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg-muted)}.lcd-mini{font-family:Share Tech Mono,monospace;color:var(--cyan);background:#00000080;padding:1px 8px;border-radius:4px;border:1px solid var(--border);font-size:.78rem;letter-spacing:1px;text-shadow:0 0 6px rgba(0,229,255,.4);text-transform:none}.control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#00e5ff80,#ff2bd680);outline:none}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cyan);border:2px solid #fff;box-shadow:0 0 12px #00e5ffb3;cursor:pointer}.control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cyan);border:2px solid #fff;box-shadow:0 0 12px #00e5ffb3;cursor:pointer}.control select{background:#00000080;color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-family:Share Tech Mono,monospace;font-size:.85rem}.control-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.waveform-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}.waveform-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:#0006;border:1px solid var(--border);border-radius:8px;color:var(--fg-muted);cursor:pointer;font-family:Share Tech Mono,monospace;font-size:.65rem;letter-spacing:1px;text-transform:uppercase;transition:all .15s}.waveform-btn:hover{color:var(--fg);border-color:var(--border-strong)}.waveform-btn.active{color:var(--cyan);border-color:var(--cyan);background:#00e5ff14;box-shadow:var(--glow-cyan);text-shadow:0 0 8px rgba(0,229,255,.5)}.hand-swap{display:flex;align-items:center;gap:12px;width:100%;background:#0006;border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--fg-dim);cursor:pointer;text-align:left;font-family:Orbitron,sans-serif;transition:all .15s}.hand-swap:hover{border-color:var(--border-strong)}.hand-swap.active{color:var(--magenta);border-color:#ff2bd666;box-shadow:var(--glow-magenta)}.hand-swap-label{display:flex;flex-direction:column;gap:2px;font-size:.78rem;line-height:1.3;text-transform:uppercase;letter-spacing:1px}.hand-swap-label span{color:var(--fg-muted);font-size:.62rem;letter-spacing:1.5px}.viz-toggles{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;padding:12px;border:1px solid var(--border);border-radius:8px;background:#0006}.viz-toggles .viz-title{grid-column:1 / -1;font-family:Orbitron,sans-serif;color:var(--fg-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}.viz-toggles label{display:flex;align-items:center;gap:6px;font-family:Share Tech Mono,monospace;font-size:.82rem;color:var(--fg);cursor:pointer}.viz-toggles input[type=checkbox]{accent-color:var(--cyan)}.presets{display:flex;flex-direction:column;gap:12px}.presets .row{display:flex;gap:6px;flex-wrap:wrap}.preset-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.preset-item{display:flex;align-items:center;gap:6px;background:#0006;border:1px solid var(--border);border-radius:8px;padding:4px 6px 4px 10px;transition:all .15s}.preset-item:hover{border-color:var(--border-strong)}.preset-name{flex:1;background:transparent;border:none;color:var(--fg);text-align:left;font-family:Share Tech Mono,monospace;font-size:.92rem;cursor:pointer;padding:6px 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.5px}.preset-name:hover{color:var(--cyan);text-shadow:0 0 8px rgba(0,229,255,.4)}.preset-name-input{flex:1;background:#0009;border:1px solid var(--cyan);color:var(--fg);border-radius:6px;padding:4px 8px;font-family:Share Tech Mono,monospace;font-size:.9rem}.preset-actions{display:flex;gap:4px}.preset-actions button{background:transparent;border:1px solid var(--border);color:var(--fg-muted);width:26px;height:26px;border-radius:6px;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}.preset-actions button:hover{color:var(--cyan);border-color:var(--border-strong)}.empty{color:var(--fg-muted);font-family:Share Tech Mono,monospace;font-size:.85rem;text-align:center;padding:16px 0}.recorder{display:flex;flex-direction:column;gap:10px}.recorder .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.recorder-count{color:var(--fg-muted);font-family:Share Tech Mono,monospace;font-size:.78rem;letter-spacing:1px;margin-left:auto;text-transform:uppercase}.recording-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.recording-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 8px;background:#0006;border:1px solid var(--border);border-radius:8px;padding:6px 8px}.recording-meta{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center}.recording-name{color:var(--cyan);font-family:Share Tech Mono,monospace;font-size:.78rem;font-variant-numeric:tabular-nums;letter-spacing:1px}.recording-item audio{width:100%;height:32px;grid-column:1;filter:hue-rotate(180deg) saturate(.5)}.recording-actions{display:flex;gap:4px;grid-column:2}.oscilloscope{position:relative;width:100%;border-radius:10px;overflow:hidden;background:var(--bg-deep)}.oscilloscope canvas{width:100%;height:100%;display:block}.oscilloscope-bezel{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:10px;box-shadow:inset 0 0 0 1px #00e5ff66,inset 0 0 30px #00e5ff33}.error{color:var(--danger);font-family:Share Tech Mono,monospace;font-size:.85rem}.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-family:Orbitron,sans-serif;font-size:.62rem;letter-spacing:2px;font-weight:600;text-transform:uppercase}.tag.live{background:#36ffa12e;color:var(--green);border:1px solid rgba(54,255,161,.5);text-shadow:0 0 8px rgba(54,255,161,.5)}.tag.idle{background:#ffffff0a;color:var(--fg-muted);border:1px solid var(--border)}.tag.rec{background:#ff4f6d33;color:var(--danger);border:1px solid rgba(255,79,109,.5);animation:pulse 1.2s infinite;text-shadow:0 0 8px rgba(255,79,109,.6)}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #ff4f6d00}50%{opacity:.6;box-shadow:0 0 18px #ff4f6d80}}.scene-badge{position:absolute;top:16px;left:16px;z-index:2;font-family:Share Tech Mono,monospace;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);background:#04060d99;border:1px solid var(--border);border-radius:6px;padding:4px 10px;pointer-events:none;text-shadow:0 0 8px rgba(0,229,255,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cam-box{padding:10px 10px 0;flex-shrink:0}.cam-box .webcam-stage{width:100%;height:auto;aspect-ratio:16 / 9;margin:0 auto}.cam-box .error{margin-top:6px;font-size:.78rem}.sim-hud{margin-top:2px}.scene-panel{padding:8px}@media (max-width: 900px){.app-main{grid-template-columns:1fr!important}}.scene-buttons{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.scene-buttons button{flex:1;min-width:70px;background:#0006;border:1px solid var(--border);color:var(--fg-muted);font-family:Share Tech Mono,monospace;font-size:.72rem;letter-spacing:1px;padding:7px 8px;border-radius:6px;cursor:pointer;text-transform:uppercase;transition:color .15s,border-color .15s,background .15s,box-shadow .15s}.scene-buttons button:hover{color:var(--fg);border-color:var(--border-strong)}.scene-buttons button.active{color:var(--cyan);border-color:var(--cyan);background:#00e5ff14;box-shadow:var(--glow-cyan);text-shadow:0 0 8px rgba(0,229,255,.5)}.live-tab{display:flex;flex-direction:column;gap:12px}.live-tab .webcam-stage{width:100%;height:auto;aspect-ratio:16 / 9}.control-section{font-family:Orbitron,sans-serif;font-size:.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);opacity:.85;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}.capture-video{position:fixed;top:0;left:0;width:2px;height:2px;opacity:0;pointer-events:none;z-index:-1}.app--immersive{padding:0;gap:0;max-width:none;grid-template-rows:1fr}.app--immersive .app-header{position:fixed;top:12px;right:12px;left:auto;z-index:30;border-radius:10px;padding:6px 10px;background:#070a1899;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app--immersive .brand{display:none}.app--immersive .app-main{grid-template-columns:1fr!important;padding:0!important;height:100vh}.app--immersive .side-panel{display:none}.app--immersive .scene-panel{height:100vh;border:none;border-radius:0;box-shadow:none;background:#000;display:flex;align-items:center;justify-content:center;padding:0!important}.app--immersive .scene-buttons{display:none}.app--immersive .scene-stage{width:min(100vw,200vh)!important;border-radius:0}
