:root{--color-primary: #00F2FE;--color-secondary: #EE00FF;--color-bg-dark: #0a0e27;--color-text: #ffffff;--color-text-secondary: #b8c5d6;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--shadow: 0 8px 32px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--color-bg-dark);color:var(--color-text);overflow-x:hidden;min-height:100vh}.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--color-primary) 0%,#4a00e0 50%,var(--color-secondary) 100%);opacity:.15;z-index:-1;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--shadow)}.container{position:fixed;top:0;left:0;width:100vw;height:100vh;padding:0;margin:0;z-index:1}.header,.content-wrapper{display:none}.video-container{position:relative;width:100%;height:300px;border-radius:20px;overflow:hidden;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--shadow)}.video-container.video-background-mode{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;border-radius:0;border:none;box-shadow:none;background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}.input-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.output-canvas{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1)}.canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;border:none;border-radius:0;background:transparent}#three-container{width:100%;height:100%}#three-container canvas{display:block!important;width:100%!important;height:100%!important}.controls{display:none}.control-group{display:flex;gap:1.5rem;flex-wrap:wrap}.slider-group{display:flex;flex-direction:column;gap:1rem;min-width:280px}.slider-item{display:flex;flex-direction:column;gap:.5rem}.slider-item label{font-size:.9rem;color:var(--color-text-secondary);display:flex;justify-content:space-between}.slider-item span{color:var(--color-primary);font-weight:600}.slider-item input[type=range]{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,var(--color-primary),var(--color-secondary));outline:none;opacity:.8;transition:opacity .2s;cursor:pointer}.slider-item input[type=range]:hover{opacity:1}.slider-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;transition:transform .2s}.slider-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;border:none;transition:transform .2s}.slider-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.control-label,.info-panel,.info-item,.slider-group,.control-group{display:none}.info-label{color:var(--color-text-secondary);font-size:.9rem}.info-value{font-weight:700;font-size:1.1rem;color:var(--color-primary)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.loading-content{text-align:center}.loader{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:1.2rem;margin-bottom:.5rem;color:var(--color-text)}.loading-hint{font-size:.9rem;color:var(--color-text-secondary)}.progress-container{width:350px;margin:1.5rem auto;padding:0 20px}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0003}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,#4a90e2 50%,var(--color-secondary) 100%);border-radius:10px;width:0%;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 0 15px #00f2fe99;animation:progressGlow 2s ease-in-out infinite}@keyframes progressGlow{0%,to{box-shadow:0 0 15px #00f2fe99}50%{box-shadow:0 0 25px #e0fc}}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.9rem}.progress-percent{font-weight:600;color:var(--color-primary);font-size:1rem;min-width:45px}.progress-stage{color:var(--color-text-secondary);font-size:.85rem}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.error-content{padding:3rem;text-align:center;max-width:500px}.error-content h2{font-size:2rem;margin-bottom:1rem}.error-content p{color:var(--color-text-secondary);margin-bottom:2rem;line-height:1.6}.btn-retry{padding:.8rem 2rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-retry:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00f2fe66}.footer{text-align:center;padding:2rem;color:var(--color-text-secondary);font-size:.9rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.copyright-info{position:fixed;top:20px;left:20px;font-size:11px;color:#ffffff80;z-index:100;transition:opacity .3s;pointer-events:none}.copyright-info p{margin:0;font-weight:300}.shortcuts-hint{margin-top:5px;color:#fff6}.fps-display{position:fixed;top:20px;right:20px;font-size:13px;color:#fffc;background:#0006;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);z-index:100;transition:opacity .3s;font-family:Courier New,monospace}.camera-selector{position:fixed;bottom:20px;left:20px;z-index:100;transition:opacity .3s}.camera-select{background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;outline:none;transition:all .3s}.camera-select:hover{background:#000000b3;border-color:#ffffff4d}.camera-select:focus{border-color:var(--color-primary);box-shadow:0 0 10px #00f2fe4d}.settings-btn{position:fixed;bottom:80px;right:20px;width:48px;height:48px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;z-index:100;transition:all .3s;display:flex;align-items:center;justify-content:center;color:#fff}.settings-btn:hover{background:#000000b3;transform:scale(1.1) rotate(90deg);box-shadow:0 0 20px #00f2fe66}.fullscreen-btn{position:fixed;bottom:20px;right:20px;width:48px;height:48px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;z-index:100;transition:all .3s;display:flex;align-items:center;justify-content:center;color:#fff}.fullscreen-btn:hover{background:#000000b3;transform:scale(1.1);box-shadow:0 0 20px #00f2fe66}.settings-panel{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.settings-content{width:90%;max-width:600px;max-height:80vh;overflow-y:auto;padding:0;animation:slideUp .3s ease}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.settings-header h2{margin:0;font-size:1.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{width:36px;height:36px;border:none;background:#ffffff1a;color:#fff;font-size:24px;border-radius:50%;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{background:#ff000080;transform:rotate(90deg)}.settings-body{padding:2rem;display:flex;flex-direction:column;gap:2rem}.setting-section{display:flex;flex-direction:column;gap:1rem}.preset-buttons{display:flex;gap:10px;flex-wrap:wrap}.preset-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--color-text-secondary);border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:14px}.preset-btn:hover{background:#fff3;color:var(--color-text);border-color:var(--color-primary)}.preset-btn.active{background:var(--color-primary);color:var(--color-bg-dark);font-weight:700;border-color:var(--color-primary)}.setting-section h3{margin:0;font-size:1.1rem;color:var(--color-primary);border-bottom:1px solid rgba(0,242,254,.2);padding-bottom:.5rem}.setting-item{display:flex;flex-direction:column;gap:.5rem}.setting-item label{display:flex;justify-content:space-between;font-size:.9rem;color:var(--color-text-secondary)}.setting-item label span{color:var(--color-primary);font-weight:600;font-family:Courier New,monospace}.setting-item input[type=range]{width:100%;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.setting-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;transition:transform .2s}.setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.setting-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;border:none;transition:transform .2s}.setting-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}:fullscreen .copyright-info,:fullscreen .fps-display,:fullscreen .camera-selector,:fullscreen .settings-btn,:fullscreen .fullscreen-btn,:-webkit-full-screen .copyright-info,:-webkit-full-screen .fps-display,:-webkit-full-screen .camera-selector,:-webkit-full-screen .settings-btn,:-webkit-full-screen .fullscreen-btn,:-moz-full-screen .copyright-info,:-moz-full-screen .fps-display,:-moz-full-screen .camera-selector,:-moz-full-screen .settings-btn,:-moz-full-screen .fullscreen-btn,body.is-fullscreen .copyright-info,body.is-fullscreen .fps-display,body.is-fullscreen .camera-selector,body.is-fullscreen .settings-btn,body.is-fullscreen .fullscreen-btn{opacity:0!important;pointer-events:none!important;visibility:hidden!important}:fullscreen .settings-panel,:-webkit-full-screen .settings-panel,:-moz-full-screen .settings-panel,body.is-fullscreen .settings-panel{display:none!important}@media (max-width: 1024px){.content-wrapper{grid-template-columns:1fr}.canvas-container{height:500px}.controls{grid-template-columns:1fr;gap:1.5rem}.slider-group{min-width:100%}}@media (max-width: 768px){.title{font-size:2rem}.subtitle{font-size:.95rem}.container{padding:1rem}.canvas-container{height:400px}.control-group{flex-direction:column;gap:1rem}.copyright-info,.fps-display{font-size:.7rem;padding:.4rem .8rem}.camera-selector{left:.5rem;bottom:.5rem}.camera-select{font-size:.8rem;padding:.5rem .8rem}.settings-btn,.fullscreen-btn{width:45px;height:45px;font-size:1.2rem;right:.5rem}.settings-btn{bottom:5rem}.fullscreen-btn{bottom:.5rem}.settings-content{width:95vw;max-width:none;max-height:85vh;padding:1.5rem}.settings-content h2{font-size:1.3rem;margin-bottom:1rem}.slider-group{margin-bottom:1rem}.slider-group label,.slider-value{font-size:.85rem}}@media (max-width: 768px) and (orientation: portrait){.copyright-info{top:.5rem;left:.5rem}.fps-display{top:.5rem;right:.5rem}.camera-selector{top:3.5rem;left:50%;transform:translate(-50%);bottom:auto}.camera-select{min-width:200px}}@media (max-width: 960px) and (orientation: landscape){.copyright-info,.fps-display{font-size:.65rem;padding:.3rem .6rem}.camera-selector{bottom:.5rem;left:.5rem}.settings-btn,.fullscreen-btn{width:40px;height:40px;font-size:1rem}}@media (max-width: 480px){.copyright-info p,.fps-display span{font-size:.65rem}.settings-content{padding:1rem}.settings-content h2{font-size:1.1rem}.slider-group label{font-size:.8rem}input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:18px;height:18px}input[type=range]::-moz-range-thumb{width:18px;height:18px}}@media (hover: none) and (pointer: coarse){.settings-btn,.fullscreen-btn,.close-btn{min-width:44px;min-height:44px;touch-action:manipulation}.camera-select{min-height:44px;touch-action:manipulation}input[type=range]{height:12px;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}.glass-card:hover{transform:none}.settings-btn:active,.fullscreen-btn:active,.close-btn:active{transform:scale(.95)}}.preset-notification{position:fixed;bottom:30px;left:50%;transform:translate(-50%);z-index:900;background:#0a0e2780;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,242,254,.15);border-radius:8px;box-shadow:0 4px 16px #0000004d;padding:12px 16px;min-width:auto;max-width:200px;text-align:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;position:relative}.preset-notification:before{display:none}.preset-notification .preset-name{font-size:14px;font-weight:600;color:#00f2feb3;margin-bottom:4px;letter-spacing:.5px;text-shadow:none}.preset-notification .preset-description{font-size:11px;color:#a0aec099;line-height:1.4;opacity:.7}#conductorHUD{position:fixed;top:20px;left:20px;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s ease}#conductorHUD.visible{opacity:1}.conductor-hud{font-family:Orbitron,SF Mono,Monaco,Courier New,monospace;color:var(--color-primary);text-shadow:0 0 20px var(--color-primary),0 0 40px var(--color-primary)}.bpm-display{font-size:48px;font-weight:700;color:var(--color-primary);text-shadow:0 0 20px var(--color-primary),0 0 40px var(--color-primary);margin-bottom:10px;letter-spacing:3px;line-height:1}.signature-display{font-size:32px;font-weight:600;color:var(--color-primary);opacity:.8;letter-spacing:2px}.beat-indicator-container{position:fixed;top:50%;right:50px;transform:translateY(-50%);width:100px;height:100px;pointer-events:none}.beat-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:3px solid var(--color-primary);border-radius:50%;box-shadow:0 0 20px var(--color-primary),0 0 40px var(--color-primary),inset 0 0 20px #00f2fe4d;opacity:0}.beat-indicator.beat-pulse{opacity:1;animation:beatPulse .1s cubic-bezier(.4,0,.2,1) forwards}.beat-indicator.beat-pulse.strong-beat{border-color:var(--color-primary);box-shadow:0 0 30px var(--color-primary),0 0 60px var(--color-primary),inset 0 0 30px #00f2fe80}.beat-indicator.beat-pulse.weak-beat{border-color:var(--color-secondary);box-shadow:0 0 20px var(--color-secondary),0 0 40px var(--color-secondary),inset 0 0 20px #ee00ff4d}@keyframes beatPulse{0%{transform:translate(-50%,-50%) scale(.7);opacity:1}to{transform:translate(-50%,-50%) scale(1.2);opacity:.1}}.beat-arrow{position:absolute;top:50%;left:50%;width:80px;height:80px;opacity:1;transition:opacity .8s ease-out,transform .8s ease-out;pointer-events:none}.beat-arrow svg{width:100%;height:100%;filter:drop-shadow(0 0 15px currentColor)}.beat-arrow.arrow-fade{opacity:0;transform:translate(-50%,-50%) scale(1.2)!important}@media (max-width: 768px){#conductorHUD{top:10px;left:10px}.bpm-display{font-size:36px}.signature-display{font-size:24px}.beat-indicator-container{right:20px;width:60px;height:60px}.beat-indicator{width:50px;height:50px;border-width:2px}}body.is-fullscreen #conductorHUD{opacity:0;visibility:hidden}.music-control-panel{position:fixed;bottom:100px;left:20px;width:320px;background:#0a0e27d9;border:1px solid rgba(0,242,254,.3);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #00f2fe33;z-index:900;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.music-control-panel.collapsed{width:160px;height:44px}.music-control-panel.collapsed .music-control-body{display:none}.music-control-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,#00f2fe1a,#ee00ff1a);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .3s}.music-control-header:hover{background:linear-gradient(135deg,#00f2fe33,#e0f3)}.music-control-title{font-size:14px;font-weight:600;color:#00f2fe;text-shadow:0 0 10px rgba(0,242,254,.5)}.music-control-toggle{width:24px;height:24px;background:#00f2fe1a;border:1px solid rgba(0,242,254,.3);border-radius:6px;color:#00f2fe;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.music-control-toggle:hover{background:#00f2fe33;border-color:#00f2fe}.music-control-panel.collapsed .music-control-toggle svg{transform:rotate(180deg)}.music-control-body{padding:16px;max-height:500px;overflow-y:auto}.music-control-body::-webkit-scrollbar{width:6px}.music-control-body::-webkit-scrollbar-thumb{background:#00f2fe4d;border-radius:3px}.music-control-section{margin-bottom:20px}.music-control-section:last-child{margin-bottom:0}.music-control-section label{display:block;font-size:12px;color:#a0aec0;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.music-control-section label span{color:#00f2fe;font-weight:600}.music-source-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.music-source-btn{padding:10px 16px;background:#00f2fe0d;border:1px solid rgba(0,242,254,.2);border-radius:8px;color:#a0aec0;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s}.music-source-btn:hover{background:#00f2fe1a;border-color:#00f2fe66;color:#00f2fe}.music-source-btn.active{background:linear-gradient(135deg,#00f2fe4d,#ee00ff4d);border-color:#00f2fe;color:#00f2fe;box-shadow:0 0 20px #00f2fe80}.music-track-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.music-track-btn{padding:8px 12px;background:#00f2fe0d;border:1px solid rgba(0,242,254,.2);border-radius:8px;color:#a0aec0;font-size:13px;cursor:pointer;transition:all .3s}.music-track-btn:hover{background:#00f2fe1a;border-color:#00f2fe66;color:#00f2fe}.music-track-btn.active{background:linear-gradient(135deg,#00f2fe33,#e0f3);border-color:#00f2fe;color:#00f2fe;box-shadow:0 0 15px #00f2fe4d}.music-play-controls{display:flex;gap:8px}.music-play-btn{width:44px;height:44px;background:linear-gradient(135deg,#00f2fe33,#e0f3);border:1px solid rgba(0,242,254,.3);border-radius:50%;color:#00f2fe;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.music-play-btn:hover{background:linear-gradient(135deg,#00f2fe4d,#ee00ff4d);border-color:#00f2fe;transform:scale(1.1);box-shadow:0 0 20px #00f2fe80}.music-play-btn:active{transform:scale(.95)}.music-control-section input[type=range]{width:100%;height:4px;background:#00f2fe1a;border-radius:2px;outline:none;-webkit-appearance:none}.music-control-section input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#00f2fe,#e0f);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #00f2fe80;transition:all .3s}.music-control-section input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #00f2fecc}.music-control-section input[type=range]::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,#00f2fe,#e0f);border:none;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #00f2fe80;transition:all .3s}.music-control-section input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #00f2fecc}@media (max-width: 768px){.music-control-panel{bottom:80px;left:10px;width:calc(100% - 20px);max-width:320px}.music-control-panel.collapsed{width:140px}}