html,body,#root{margin:0;padding:0;height:100%;background:#04060c;color:#dfe8ff;font-family:Inter,system-ui,sans-serif;overflow:hidden}.kinetik-root{position:fixed;inset:0}.camera-bg{opacity:0;transition:opacity .4s}.camera-bg.on{opacity:1}.stage-x{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:brightness(.8) saturate(.9);background:#04060c}.stage{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent}.overlay{position:absolute;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:10}.overlay.enter{inset:0;justify-content:center;background:radial-gradient(ellipse at center,#04060c33,#04060ce6)}.logo{font-size:72px;letter-spacing:.35em;margin:0;font-weight:200;color:#fff;text-shadow:0 0 30px rgba(0,229,255,.7),0 0 80px rgba(0,229,255,.3)}.tagline{color:#8fa8d8;letter-spacing:.15em;text-transform:uppercase;font-size:13px}.privacy{color:#4d6390;font-size:11px;letter-spacing:.08em}.btn{background:transparent;border:1px solid rgba(0,229,255,.4);color:#bff3ff;padding:12px 34px;font-size:15px;letter-spacing:.25em;cursor:pointer;transition:all .2s;text-transform:uppercase}.btn.primary{box-shadow:0 0 24px #00e5ff26 inset,0 0 18px #00e5ff33}.btn:hover{background:#00e5ff1f;box-shadow:0 0 34px #00e5ff66}.btn.chip{padding:7px 16px;font-size:11px;letter-spacing:.12em;border-color:#788cc859;color:#aabce8}.btn.chip.active{border-color:#00e5ff;color:#fff;box-shadow:0 0 14px #00e5ff59}.btn.chip.rec{border-color:#ff3860;color:#ff8aa0;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 18px #ff386099}}.bottom-panel{left:0;right:0;bottom:8%;background:linear-gradient(to top,rgba(4,6,12,.85),transparent);padding:32px}.preset-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.hud{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;z-index:10;pointer-events:none;letter-spacing:.2em;font-size:12px;color:#9fb6e8}.hud.top{top:0}.hud.bottom{bottom:0;pointer-events:auto}.hud .bpm{font-size:20px;color:#fff;text-shadow:0 0 12px rgba(0,229,255,.6)}.hud .energy.hot{color:#ff3860}.hud .gesture{color:#00e5ff;text-transform:uppercase;min-width:140px}.hud .controls{display:flex;gap:8px;pointer-events:auto}.hud.minimal{bottom:0;justify-content:space-between;font-size:14px}.debug-panel{position:absolute;top:16px;right:16px;z-index:50;background:#040810eb;border:1px solid rgba(0,229,255,.3);padding:14px 18px;font-size:12px;min-width:230px}.debug-panel h3{margin:0 0 8px;font-size:12px;letter-spacing:.2em;color:#00e5ff}.debug-panel table{width:100%;border-collapse:collapse}.debug-panel td{padding:2px 6px}.debug-panel td:first-child{color:#7d92c4}.debug-panel .hint{color:#4d6390;font-size:10px;margin:8px 0 0}.stage-mode .overlay.bottom-panel,.stage-mode .hud.top,.stage-mode .debug-panel{display:none}.deck-panel{position:absolute;left:24px;bottom:90px;z-index:20;background:#040810bf;border:1px solid rgba(0,229,255,.25);padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:380px}.deck-panel.dragover{border-color:#00e5ff;box-shadow:0 0 24px #00e5ff66}.deck-row{display:flex;align-items:center;gap:10px}.deck-label{color:#00e5ff;font-weight:700;width:18px}.deck-label.dim{color:#7d92c4}.deck-name{flex:1;font-size:11px;color:#aabce8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-panel input[type=range]{flex:1;accent-color:#00e5ff}.deck-panel .hint{font-size:10px;color:#4d6390}.stage-mode .deck-panel{display:none}.side-panel{position:absolute;top:60px;right:16px;z-index:40;background:#040810eb;border:1px solid rgba(0,229,255,.3);padding:14px 18px;min-width:420px;max-height:80vh;overflow:auto;display:flex;flex-direction:column;gap:8px}.side-panel h3{margin:4px 0;font-size:12px;letter-spacing:.2em;color:#00e5ff}.mapping-row{display:flex;align-items:center;gap:6px}.mapping-row select,.mapping-row input{background:#0a101ee6;color:#dfe8ff;border:1px solid rgba(120,140,200,.4);padding:4px 6px;font-size:11px;flex:1;min-width:0}.overlay.learn{inset:0;justify-content:center;pointer-events:none;background:none}.overlay.learn .btn{pointer-events:auto;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.learn-msg{font-size:42px;letter-spacing:.2em;font-weight:200;color:#fff;text-shadow:0 0 24px rgba(0,229,255,.8);text-align:center;margin:0 10%}.overlay.calibrate{inset:0;justify-content:center}.calib-bar{width:320px;height:3px;background:#788cc840;margin-top:10px}.calib-fill{height:100%;background:#00e5ff;box-shadow:0 0 12px #00e5ffcc;transition:width .1s linear}.vision-status{font-size:11px;letter-spacing:.1em;color:#7d92c4;max-width:520px;text-align:center}.vision-status.err{color:#ff9db1}.calib-tools{display:flex;gap:14px;align-items:flex-start;margin-top:10px}.calib-tools #ai-preview{width:320px;height:240px;border:1px solid rgba(0,229,255,.4);background:#000}.calib-tools-side{display:flex;flex-direction:column;gap:8px;max-width:220px}.dj-meter{min-width:48px;color:#00e5ff;text-align:right;font-variant-numeric:tabular-nums}.dj-meter.pinch{color:#fc0;min-width:60px}.overlay.guide{inset:0;justify-content:center;gap:22px;background:radial-gradient(ellipse at center,#04060c8c,#04060ceb);z-index:30}.guide-title{font-size:26px;letter-spacing:.3em;font-weight:200;color:#fff;margin:0;text-shadow:0 0 24px rgba(0,229,255,.6)}.guide-cols{display:flex;gap:28px}.guide-col{background:#060a14cc;border:1px solid rgba(0,229,255,.3);padding:18px 22px;min-width:300px;max-width:340px;display:flex;flex-direction:column;gap:10px}.guide-col h3{margin:0;color:#00e5ff;letter-spacing:.12em;font-size:15px}.guide-col h3 .hint{font-size:10px;color:#4d6390;letter-spacing:.05em}.guide-col ul{margin:0;padding-left:18px;color:#aabce8;font-size:13px;line-height:1.7}.guide-col .btn{margin-top:auto}.guide-footer{display:flex;flex-direction:column;align-items:center;gap:6px}