*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.canvas-container canvas{display:block;width:100%;height:100%}.fullscreen-hint{position:fixed;bottom:40px;left:50%;transform:translate(-50%);padding:12px 24px;background:#000000b3;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;pointer-events:none;z-index:100;opacity:1;transition:opacity .5s ease}.fullscreen-hint.hidden{opacity:0}.fullscreen-hint kbd{display:inline-block;padding:2px 8px;margin:0 4px;background:#ffffff26;border-radius:4px;font-family:monospace;font-weight:700}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px;overflow-y:auto}.settings-panel{width:100%;max-width:600px;background:#14141ef2;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;color:#fff}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.settings-header h2{font-size:20px;font-weight:600}.close-btn{background:none;border:none;color:#fff9;font-size:24px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.close-btn:hover{color:#fff;background:#ffffff1a}.settings-section{margin-bottom:24px}.settings-section h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;margin-bottom:12px}.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.scene-btn{padding:12px 8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:12px;cursor:pointer;transition:all .2s}.scene-btn:hover{background:#ffffff1a;border-color:#fff3}.scene-btn.active{background:#6464ff33;border-color:#6464ff80}.scene-btn .scene-number{display:block;font-size:10px;color:#fff6;margin-bottom:4px}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-row label{font-size:14px;color:#fffc}.control-row input[type=range]{width:200px;height:4px;background:#ffffff1a;border-radius:2px;outline:none;-webkit-appearance:none}.control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer}.control-row input[type=range]:disabled{opacity:.3}.control-row input[type=range]:disabled::-webkit-slider-thumb{background:#666}.control-value{min-width:50px;text-align:right;font-family:monospace;font-size:14px;color:#fff9}.btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;cursor:pointer;transition:all .2s}.btn:hover{background:#ffffff26}.btn.active{background:#64c8644d;border-color:#64c86480}.btn.primary{background:#6464ff4d;border-color:#6464ff80}.btn.primary:hover{background:#6464ff66}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-group{display:flex;gap:8px;flex-wrap:wrap}.toggle{position:relative;width:44px;height:24px;background:#ffffff1a;border-radius:12px;cursor:pointer;transition:background .2s}.toggle.active{background:#64c86480}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.toggle.active:after{transform:translate(20px)}.mic-status{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff0d;border-radius:6px;font-size:14px}.mic-status-dot{width:8px;height:8px;border-radius:50%;background:#666}.mic-status-dot.off{background:#666}.mic-status-dot.requesting{background:#f90;animation:pulse 1s infinite}.mic-status-dot.on{background:#0f0}.mic-status-dot.blocked,.mic-status-dot.no-device{background:red}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.meter{display:flex;align-items:center;gap:8px}.meter-label{font-size:12px;color:#ffffff80;min-width:60px}.meter-bar{flex:1;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#0f0,#ff0,red);border-radius:4px;transition:width .05s}.beat-indicator{width:24px;height:24px;background:#ffffff1a;border-radius:50%;transition:all .05s}.beat-indicator.active{background:#fff;box-shadow:0 0 20px #fff}.shortcuts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shortcut{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}.shortcut kbd{padding:2px 8px;background:#ffffff1a;border-radius:4px;font-family:monospace;font-size:12px}.equalizer{position:fixed;bottom:0;left:0;width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:0 20px 10px;z-index:50;pointer-events:none}.eq-bar{width:4px;background:linear-gradient(to top,#0ff,#f0f);border-radius:2px;transition:height .05s}.quality-selector{display:flex;gap:8px}.quality-btn{padding:8px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff9;font-size:14px;cursor:pointer;transition:all .2s}.quality-btn:hover{border-color:#fff3}.quality-btn.active{background:#6464ff33;border-color:#6464ff80;color:#fff}.touch-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;z-index:150;opacity:0;transition:opacity .3s ease;pointer-events:none}.touch-controls.visible{opacity:1;pointer-events:auto}.touch-controls-nav{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#00000080;border:1px solid rgba(255,255,255,.15);border-radius:30px;backdrop-filter:blur(10px)}.touch-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#ffffffe6;font-size:18px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}.touch-btn:hover,.touch-btn:active{background:#fff3;border-color:#fff6;transform:scale(1.05)}.touch-btn:active{transform:scale(.95)}.touch-btn-settings{padding:8px;background:#00000080;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);font-size:22px}.touch-scene-indicator{font-size:14px;color:#ffffffb3;font-family:monospace;min-width:50px;text-align:center}@media (max-width: 768px){.touch-controls{bottom:30px;gap:12px}.touch-btn{width:52px;height:52px;font-size:20px}.touch-btn-settings{font-size:24px}.touch-scene-indicator{font-size:16px}.fullscreen-hint{display:none}.settings-overlay{padding:20px 10px}.settings-panel{padding:16px}.scene-grid{grid-template-columns:repeat(2,1fr)}.control-row{flex-wrap:wrap;gap:8px}.control-row input[type=range]{width:100%;order:3}.shortcuts-grid{grid-template-columns:1fr}}