*{margin:0;padding:0;box-sizing:border-box}:root{--dark-red: #830704;--dark-red-light: #ff4d4d;--dark-red-dark: #5c0503;--blue-dark: #1e4095;--blue-light: #5a9cff;--bg-primary: #14141a;--bg-secondary: #1f1f28;--bg-tertiary: #2d2d38;--text-primary: #f5f5fa;--text-secondary: #b8b8c8;--text-muted: #7a7a8a;--border-color: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .2)}body{font-family:Cormorant Garamond,Times New Roman,serif;background:radial-gradient(circle at 15% 15%,rgba(76,139,245,.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(224,58,58,.08) 0%,transparent 40%),var(--bg-primary);min-height:100vh;color:var(--text-primary);overflow-x:hidden}.container{max-width:1400px;margin:0 auto;padding:24px 20px 60px}.header{text-align:center;margin-bottom:32px;padding:24px 20px;position:relative}.header:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--dark-red-light),var(--blue-light),transparent)}.title{font-size:3rem;font-weight:500;letter-spacing:14px;text-transform:uppercase;background:linear-gradient(90deg,var(--blue-light),#ffffff,var(--dark-red-light));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{font-size:.85rem;color:var(--text-muted);margin-top:12px;letter-spacing:6px;text-transform:uppercase}.main-content{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap}.left-column{display:flex;flex-direction:column;gap:16px;width:640px;max-width:100%;align-items:center}.video-container{position:relative;width:640px;max-width:100%;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:var(--bg-secondary);box-shadow:0 12px 48px #00000080}.input-video,.output-canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}.output-canvas{position:absolute;top:0;left:0;pointer-events:none}.loading-overlay,.intro-overlay,.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0f0f16f2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;padding:24px;text-align:center}.hidden{display:none!important}.loading-spinner{width:48px;height:48px;border:2px solid var(--border-light);border-top-color:var(--dark-red-light);border-radius:50%;animation:spin 1.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-secondary);margin-top:20px;font-size:.8rem;letter-spacing:4px;text-transform:uppercase}.intro-icon{font-size:3rem;margin-bottom:16px;animation:fadeIn 1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.intro-title{font-size:1.8rem;letter-spacing:8px;color:var(--text-primary);margin-bottom:6px}.intro-subtitle{font-size:.7rem;color:var(--text-muted);letter-spacing:8px;margin-bottom:24px;text-transform:uppercase}.instructions-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:540px}.instr-card{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:12px 14px;text-align:left;font-size:.78rem;color:var(--text-secondary);line-height:1.8}.instr-card.left{border-left:3px solid var(--blue-light)}.instr-card.right{border-left:3px solid var(--dark-red-light)}.instr-title{font-size:.8rem;letter-spacing:2px;color:var(--text-primary);margin-bottom:6px;font-weight:600;text-transform:uppercase}.error-icon{font-size:3rem;margin-bottom:18px;color:var(--dark-red-light)}.error-title{font-size:1.2rem;font-weight:500;margin-bottom:8px;letter-spacing:3px}.error-message{color:var(--text-secondary);margin-bottom:12px;font-size:.9rem}.error-details{font-size:.72rem;color:var(--text-muted);margin-bottom:20px;padding:12px;background:#ffffff08;border:1px solid var(--border-color);border-radius:6px;text-align:left;line-height:1.7}.retry-btn,.use-mock-btn{width:100%;padding:10px;border-radius:6px;font-size:.78rem;letter-spacing:3px;text-transform:uppercase;cursor:pointer;margin-bottom:10px;font-family:inherit;transition:all .25s;color:#fff;background:transparent;border:1px solid var(--border-light)}.retry-btn:hover{background:var(--dark-red-light);border-color:var(--dark-red-light)}.use-mock-btn:hover{background:var(--blue-light);border-color:var(--blue-light);color:#000}.controls-panel{width:340px;background:#ffffff08;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-color);border-radius:12px;padding:18px;box-shadow:0 10px 40px #0006}.mode-selector{margin-bottom:16px;padding:12px;background:#ffffff05;border:1px solid var(--border-color);border-radius:10px}.mode-label{font-size:.72rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;text-align:center}.mode-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.mode-btn{padding:8px 4px;border:1px solid var(--border-color);border-radius:6px;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .25s;color:var(--text-secondary);background:#ffffff08}.mode-btn:hover{background:#ffffff14;border-color:var(--border-light);color:var(--text-primary)}.mode-btn.active{background:linear-gradient(135deg,var(--dark-red-dark),var(--dark-red-light));border-color:var(--dark-red-light);color:#fff;box-shadow:0 4px 12px #e03a3a4d}.autoplay-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color)}.autoplay-label{font-size:.75rem;color:var(--text-secondary);letter-spacing:1px}.autoplay-switch{position:relative;display:inline-block;width:42px;height:22px;cursor:pointer}.autoplay-switch input{opacity:0;width:0;height:0}.autoplay-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1a;border:1px solid var(--border-color);border-radius:22px;transition:.3s}.autoplay-slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;top:50%;transform:translateY(-50%);background:var(--text-muted);border-radius:50%;transition:.3s}.autoplay-switch input:checked+.autoplay-slider{background:linear-gradient(135deg,var(--dark-red-dark),var(--dark-red-light));border-color:var(--dark-red-light)}.autoplay-switch input:checked+.autoplay-slider:before{transform:translate(20px,-50%);background:#fff}.autoplay-switch input:focus-visible+.autoplay-slider{box-shadow:0 0 0 2px #e03a3a4d}.style-selector{margin-bottom:16px;padding:14px;background:#ffffff05;border:1px solid var(--border-color);border-radius:10px}.style-label{font-size:.72rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;text-align:center}.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}.style-card{padding:10px;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .25s;background:#ffffff08}.style-card:hover{background:#ffffff14;border-color:var(--border-light);transform:translateY(-2px)}.style-card.selected{background:linear-gradient(135deg,#6366f140,#a855f740);border-color:#8b5cf699;box-shadow:0 4px 12px #8b5cf633}.style-name{font-size:.85rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.style-mood{display:inline-block;font-size:.62rem;padding:2px 6px;background:#ffffff1a;border-radius:4px;color:var(--text-secondary);margin-bottom:6px}.style-bpm{font-size:.65rem;color:var(--text-muted);margin-bottom:6px}.style-desc{font-size:.62rem;color:var(--text-secondary);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.style-instruments{font-size:.58rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:4px}.style-status{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:#ffffff08;border-radius:6px;font-size:.7rem}.status-label{color:var(--text-muted)}.status-value{color:var(--text-primary);font-weight:600}.status-section{color:var(--accent-color);font-weight:600;font-size:.8rem}.status-divider{color:var(--border-color);margin:0 4px}.looper-panel{margin-bottom:16px;padding:14px;background:#ffffff05;border:1px solid var(--border-color);border-radius:10px;display:none}.looper-header{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.looper-label{font-size:.72rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;text-align:center}.looper-info{display:flex;justify-content:center;align-items:center;gap:12px;font-size:.65rem}.track-count{color:var(--accent-color);font-weight:600;font-size:.75rem}.track-limit{color:var(--text-muted)}.looper-controls{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}.looper-btn{flex:1;min-width:80px;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;background:#ffffff08;color:var(--text-primary);font-size:.7rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.looper-btn:hover:not(.disabled){background:#ffffff14;border-color:var(--border-light)}.looper-btn:active:not(.disabled){transform:scale(.98)}.looper-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.looper-btn.record-btn{border-color:#e03a3a66;background:#e03a3a14}.looper-btn.add-btn{border-color:#22c55e66;background:#22c55e14}.looper-btn.clear-btn{border-color:#9ca3af66;background:#9ca3af14}.btn-icon{font-size:.85rem}.btn-text{font-size:.65rem}.track-list{display:flex;flex-direction:column;gap:10px}.empty-state{text-align:center;padding:24px 12px;background:#ffffff05;border-radius:8px;border:1px dashed var(--border-color)}.empty-icon{font-size:2rem;margin-bottom:8px}.empty-text{font-size:.85rem;color:var(--text-primary);margin-bottom:4px}.empty-hint{font-size:.65rem;color:var(--text-secondary);margin-bottom:6px}.empty-warning{font-size:.6rem;color:#f97316cc}.track-item{border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:#ffffff05}.track-header{display:flex;align-items:center;gap:8px;padding:8px 10px}.track-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1a;font-size:.7rem;font-weight:600;flex-shrink:0}.track-name{flex:1;font-size:.75rem;color:var(--text-primary);font-weight:500;outline:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-name:focus{outline:1px solid var(--accent-color);border-radius:4px;padding:2px 4px}.track-status{font-size:.62rem;color:var(--text-muted);padding:2px 6px;background:#ffffff14;border-radius:4px}.track-controls{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0000001a}.track-btn{width:28px;height:28px;border:none;border-radius:6px;background:#ffffff0d;color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.track-btn:hover{background:#ffffff1a;color:var(--text-primary)}.track-btn:active{transform:scale(.95)}.track-btn.mute-btn.active{background:#e03a3a33;color:#ef4444}.track-btn.delete-btn:hover{background:#e03a3a26;color:#ef4444}.track-volume{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.volume-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent-color);border-radius:50%;cursor:pointer;transition:transform .15s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-value{font-size:.62rem;color:var(--text-muted);min-width:36px;text-align:right}.track-record-btn{padding:4px 8px;border:none;border-radius:6px;background:#e03a3a26;color:#ef4444;font-size:.75rem;cursor:pointer;transition:all .2s}.track-record-btn:hover{background:#e03a3a40;transform:scale(1.1)}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;background:#e03a3a1a;border:1px solid rgba(224,58,58,.3);border-radius:8px;margin-bottom:12px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{border-color:#e03a3a4d}50%{border-color:#e03a3a99}}.recording-dot{width:12px;height:12px;border-radius:50%;background:#ef4444;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.recording-text{font-size:.75rem;color:#ef4444;font-weight:500}.recording-timer{font-size:.85rem;color:var(--text-primary);font-weight:600;font-family:monospace}.recording-stop-btn,.recording-cancel-btn{padding:6px 12px;border:none;border-radius:6px;font-size:.65rem;cursor:pointer;transition:all .2s}.recording-stop-btn{background:#e03a3a33;color:#ef4444}.recording-stop-btn:hover{background:#e03a3a4d}.recording-cancel-btn{background:#9ca3af26;color:var(--text-secondary)}.recording-cancel-btn:hover{background:#9ca3af40}.looper-btn.play-btn{border-color:#22c55e66;background:#22c55e14}.looper-btn.stop-btn{border-color:#e03a3a66;background:#e03a3a14}.loop-duration{color:var(--accent-color);font-size:.65rem;font-weight:500}.gesture-recording-control{margin:12px 0;padding:12px 16px;background:#4c8bf514;border:1px solid rgba(76,139,245,.2);border-radius:10px}.gesture-switch-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.gesture-switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer}.gesture-switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ffffff1a;border-radius:24px;transition:.3s}.switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#888;border-radius:50%;transition:.3s}.gesture-switch input:checked+.switch-slider{background-color:#4c8bf599}.gesture-switch input:checked+.switch-slider:before{transform:translate(18px);background-color:#fff}.gesture-label{font-size:.8rem;font-weight:500;color:var(--text-primary)}.gesture-warning{margin-left:auto;font-size:.7rem;color:#f59e0b;font-weight:500}.gesture-status-row{display:flex;align-items:center;gap:10px;margin-top:8px}.gesture-status-label{font-size:.7rem;color:var(--text-muted);min-width:60px}.gesture-progress-bar{flex:1;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.gesture-progress-fill{height:100%;background:linear-gradient(90deg,#4c8bf5,#ef4444);border-radius:4px;transition:width .1s linear}.gesture-progress-text{font-size:.7rem;color:var(--text-secondary);font-family:monospace;min-width:36px;text-align:right}.gesture-processing{margin-top:8px;font-size:.7rem;color:#f59e0b;font-weight:500}.humming-panel{background:#ffffff08;border:1px solid var(--border-color);border-radius:12px;padding:16px;margin-bottom:16px;display:none}.humming-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.humming-label{font-size:.95rem;font-weight:600;color:var(--text-primary);letter-spacing:1px}.humming-state{font-size:.75rem;padding:4px 10px;border-radius:12px;background:#9ca3af26;color:var(--text-secondary)}.humming-state[data-state=RECORDING]{background:#e03a3a26;color:#ef4444}.humming-state[data-state=PLAYING]{background:#22c55e26;color:#22c55e}.humming-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:.75rem;color:#ef4444}.humming-content{display:flex;flex-direction:column;gap:12px}.humming-empty-state{text-align:center;padding:20px 0}.humming-empty-icon{font-size:2.5rem;margin-bottom:10px}.humming-empty-text{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:8px}.humming-empty-hint{font-size:.75rem;color:var(--text-muted);max-width:280px;margin:0 auto}.humming-permission-state,.humming-processing-state{text-align:center;padding:20px 0}.humming-permission-icon,.humming-processing-icon{font-size:2rem;margin-bottom:10px}.humming-permission-text,.humming-processing-text{font-size:.9rem;font-weight:500;color:var(--text-primary);margin-bottom:8px}.humming-permission-hint{font-size:.75rem;color:var(--text-muted)}.humming-processing-progress{margin-top:12px}.progress-bar{width:200px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin:0 auto}.progress-fill{height:100%;background:var(--accent-color);border-radius:3px;animation:progressMove .5s ease-in-out infinite}@keyframes progressMove{0%{transform:translate(-20%)}to{transform:translate(120%)}}.humming-note-display{background:#ffffff08;border-radius:8px;padding:12px;text-align:center}.humming-note-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.humming-note-value{font-size:2rem;font-weight:700;color:var(--accent-color);font-family:monospace;margin-bottom:8px}.humming-frequency{font-size:.75rem;color:var(--text-secondary);margin-bottom:4px}.humming-confidence{font-size:.7rem;color:var(--text-muted)}.humming-controls{display:flex;gap:10px;justify-content:center}.humming-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--border-color);border-radius:8px;background:#ffffff0d;color:var(--text-primary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.humming-btn:hover{background:#ffffff1a;border-color:var(--accent-color);transform:translateY(-2px)}.humming-btn.start-btn{border-color:#3b82f666;background:#3b82f614;color:#3b82f6}.humming-btn.start-btn:hover{background:#3b82f626;border-color:#3b82f699}.humming-btn.play-btn{border-color:#22c55e66;background:#22c55e14;color:#22c55e}.humming-btn.play-btn:hover{background:#22c55e26;border-color:#22c55e99}.humming-btn.stop-btn{border-color:#e03a3a66;background:#e03a3a14;color:#ef4444}.humming-btn.stop-btn:hover{background:#e03a3a26;border-color:#e03a3a99}.humming-btn.cancel-btn,.humming-btn.re-record-btn{border-color:#9ca3af4d;background:#9ca3af14;color:var(--text-secondary)}.humming-btn.cancel-btn:hover,.humming-btn.re-record-btn:hover{background:#9ca3af26}.humming-btn .btn-icon{font-size:1rem}.humming-btn .btn-text{font-size:.8rem}.humming-result-header{text-align:center;margin-bottom:12px}.humming-result-title{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.humming-result-stats{font-size:.75rem;color:var(--text-muted)}.humming-note-list{background:#ffffff05;border-radius:8px;padding:8px;max-height:160px;overflow-y:auto}.humming-note-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;margin-bottom:4px;background:#ffffff05}.humming-note-item:last-child{margin-bottom:0}.note-index{font-size:.7rem;color:var(--text-muted);width:24px}.note-name{font-size:.9rem;font-weight:600;color:var(--accent-color);font-family:monospace}.note-duration{font-size:.7rem;color:var(--text-secondary);margin-right:10px}.note-confidence{font-size:.65rem;color:var(--text-muted);padding:2px 6px;background:#9ca3af1a;border-radius:4px}.humming-instrument-selector{margin-top:8px}.selector-label{font-size:.75rem;color:var(--text-muted);text-align:center;margin-bottom:10px}.selector-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.humming-instrument-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;background:#ffffff08;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s;min-width:70px}.humming-instrument-btn:hover{background:#ffffff14;border-color:var(--accent-color)}.humming-instrument-btn.active{background:#3b82f626;border-color:#3b82f699;color:#3b82f6}.humming-instrument-btn .inst-icon{font-size:1.2rem}.humming-instrument-btn .inst-name{font-size:.65rem}.humming-playing-indicator{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0}.playing-animation{display:flex;align-items:center;gap:4px;height:40px}.playing-animation .bar{width:6px;background:var(--accent-color);border-radius:3px;animation:playBar .5s ease-in-out infinite}.playing-animation .bar1{animation-delay:0s;height:15px}.playing-animation .bar2{animation-delay:.1s;height:25px}.playing-animation .bar3{animation-delay:.2s;height:20px}.playing-animation .bar4{animation-delay:.3s;height:30px}@keyframes playBar{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.3)}}.playing-text{font-size:.9rem;font-weight:500;color:var(--text-primary)}.multi-panel{background:#ffffff08;border:1px solid var(--border-color);border-radius:12px;padding:16px;margin-bottom:16px;display:none}.multi-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.multi-label{font-size:.95rem;font-weight:600;color:var(--text-primary);letter-spacing:1px}.multi-bpm{font-size:.8rem;color:var(--accent-color);font-weight:600;padding:4px 10px;background:#3b82f61a;border-radius:12px}.multi-voices{display:flex;gap:12px;margin-bottom:16px}@media (max-width: 768px){.multi-voices{flex-direction:column}}.voice-panel{flex:1;border-radius:10px;padding:12px;background:#ffffff05;border:1px solid var(--border-color)}.voice-panel.left-voice{border-left:3px solid var(--blue-light);background:linear-gradient(135deg,#3b82f60d,#ffffff05)}.voice-panel.right-voice{border-left:3px solid var(--dark-red-light);background:linear-gradient(135deg,#ef44440d,#ffffff05)}.voice-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.voice-icon{font-size:1rem}.voice-name{flex:1;font-size:.85rem;font-weight:600;color:var(--text-primary)}.voice-status{font-size:.75rem}.voice-status.visible{color:#22c55e}.voice-status.hidden{color:var(--text-muted)}.voice-mute-btn{padding:4px 8px;border:none;border-radius:6px;background:#9ca3af1a;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s}.voice-mute-btn:hover{background:#9ca3af33}.voice-mute-btn.active{background:#e03a3a26;color:#ef4444}.voice-info{margin-bottom:10px}.voice-instrument{font-size:.8rem;color:var(--text-secondary);margin-bottom:4px}.voice-stats{display:flex;gap:12px}.voice-stats span{font-size:.65rem;color:var(--text-muted);padding:2px 6px;background:#ffffff08;border-radius:4px}.voice-controls{margin-top:8px}.voice-volume-slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;cursor:pointer}.voice-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent-color);border-radius:50%;cursor:pointer;transition:transform .2s}.voice-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.multi-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border-color)}.stereo-width-display{display:flex;align-items:center;gap:8px}.width-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.width-indicator{width:100px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.width-bar{height:100%;background:var(--accent-color);border-radius:2px;transition:width .15s ease}.width-value{font-size:.7rem;color:var(--text-secondary);min-width:36px;text-align:right}.multi-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border-color);border-radius:8px;background:#ffffff0d;color:var(--text-primary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.multi-btn:hover{background:#ffffff1a;border-color:var(--accent-color)}.multi-btn .btn-icon{font-size:.9rem}.multi-btn .btn-text{font-size:.75rem}.hand-panel{border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid var(--border-color);background:#ffffff05}.left-hand-panel{border-left:3px solid var(--blue-light)}.right-hand-panel{border-left:3px solid var(--dark-red-light)}.hand-title{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;letter-spacing:2px;margin-bottom:12px;color:var(--text-primary);text-transform:uppercase}.hand-emoji{font-size:1.1rem}.hand-name{flex:1;font-size:.8rem}.hand-status{font-size:.65rem;padding:3px 8px;border-radius:4px;letter-spacing:1px;text-transform:uppercase;font-weight:400}.hand-status.off{background:#ffffff14;color:var(--text-muted)}.hand-status.on.left{background:#4c8bf533;color:var(--blue-light)}.hand-status.on.right{background:#e03a3a33;color:var(--dark-red-light)}.param-row{display:grid;grid-template-columns:60px 1fr 44px;align-items:center;gap:8px;margin-bottom:8px}.param-label{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:.78rem}.param-icon{font-size:.8rem}.progress-bar{height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:3px;width:50%;transition:width .18s ease-out,background .3s}.progress-fill.vol{background:linear-gradient(90deg,#2a4d99,var(--blue-light))}.progress-fill.bright{background:linear-gradient(90deg,#2a4d99,#ffc857)}.progress-fill.inst{background:linear-gradient(90deg,#5a3a80,#d97706)}.progress-fill.reverb{background:linear-gradient(90deg,#3a5a8c,#94c8ff)}.progress-fill.bpm{background:linear-gradient(90deg,#5a0a0a,var(--dark-red-light));box-shadow:0 0 8px #e03a3a80}.progress-fill.energy{background:linear-gradient(90deg,#5a1a1a,#ffb020)}.progress-fill.pitch{background:linear-gradient(90deg,#2a4d99,#fff,#5a0a0a)}.progress-fill.left-speed{background:linear-gradient(90deg,#1a4d7a,#6aa8ff)}.bpm-bar-bg{background:#e03a3a1a}.value{color:var(--text-primary);font-size:.78rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;font-family:Cormorant Garamond,serif}.value.small{font-size:.7rem;color:var(--text-secondary)}.position-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:8px;margin-bottom:10px}.position-label{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:.78rem}.position-box{position:relative;height:40px;background:#ffffff0a;border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.left-hand-panel .position-box{background:#4c8bf50d}.right-hand-panel .position-box{background:#e03a3a0d}.position-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 10px var(--blue-light);transform:translate(-50%,-50%);transition:all .15s ease-out;top:50%;left:50%}.right-hand-panel .position-dot{background:var(--dark-red-light);box-shadow:0 0 10px var(--dark-red-light)}.position-coord{font-size:.65rem;color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:center}.fingers-row{margin-bottom:10px;display:grid;grid-template-columns:60px 1fr;gap:8px;align-items:center}.fingers-display{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.finger{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.9rem}.finger>span{opacity:.6;transition:all .2s;font-size:.85rem}.left-hand-panel .finger:hover>span{color:var(--blue-light);opacity:1}.right-hand-panel .finger:hover>span{color:var(--dark-red-light);opacity:1}.finger-bar{width:100%;height:24px;background:#ffffff0d;border-radius:3px;position:relative;overflow:hidden;border:1px solid var(--border-color)}.finger-fill{position:absolute;bottom:0;left:0;width:100%;height:40%;background:linear-gradient(to top,var(--blue-light),rgba(76,139,245,.4));transition:height .2s ease-out,background .2s;border-radius:0 0 3px 3px}.right-hand-panel .finger-fill{background:linear-gradient(to top,var(--dark-red-light),rgba(224,58,58,.4))}.gesture-indicator{margin-top:8px;padding:8px 12px;background:#4c8bf514;border:1px solid rgba(76,139,245,.2);border-radius:6px;display:flex;align-items:center;gap:8px;transition:all .3s}.gesture-indicator.right{background:#e03a3a14;border-color:#e03a3a33}.gesture-indicator.fist{background:#e03a3a40!important;border-color:var(--dark-red-light);animation:fist-pulse .6s ease-out}.gesture-icon{font-size:1.3rem;transition:transform .3s}.gesture-text{color:var(--text-secondary);font-size:.78rem;letter-spacing:2px;text-transform:uppercase}@keyframes fist-pulse{0%{transform:scale(1)}50%{transform:scale(1.08);box-shadow:0 0 20px var(--dark-red-light)}to{transform:scale(1)}}.bpm-display{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:12px;padding:10px 0;background:linear-gradient(90deg,rgba(224,58,58,.1),transparent,rgba(224,58,58,.1));border-radius:8px}.bpm-big{font-size:2.2rem;font-weight:600;color:var(--dark-red-light);font-variant-numeric:tabular-nums;text-shadow:0 0 15px rgba(224,58,58,.4)}.bpm-unit{font-size:.7rem;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase}.accent-display{display:flex;align-items:center;gap:10px;margin:8px 0 6px;padding:8px 12px;background:#e03a3a14;border-radius:6px;border:1px solid rgba(224,58,58,.15)}.accent-pulse{font-size:1.4rem;opacity:.25;transition:transform .12s,opacity .2s}.accent-pulse.active{opacity:1;transform:scale(1.5);animation:accent-flash .35s ease-out}@keyframes accent-flash{0%{transform:scale(.8);opacity:.5}30%{transform:scale(1.8);opacity:1}to{transform:scale(1);opacity:.85}}.accent-text{color:var(--text-secondary);font-size:.78rem;letter-spacing:2px;text-transform:uppercase}.beat-count{margin-left:auto;color:var(--dark-red-light);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}.phrase-display{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:8px 12px;background:#ffffff08;border:1px solid var(--border-color);border-radius:6px}.phrase-label{color:var(--text-muted);font-size:.72rem;letter-spacing:2px;text-transform:uppercase}.phrase{font-size:1.6rem;font-weight:600;color:var(--text-primary);letter-spacing:2px;text-shadow:0 0 12px rgba(255,255,255,.25);transition:transform .3s,color .3s}.phrase.flash{transform:scale(1.3);color:var(--dark-red-light);text-shadow:0 0 20px var(--dark-red-light)}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.start-btn,.stop-btn,.mock-btn{padding:11px;border:none;border-radius:6px;font-size:.78rem;letter-spacing:3px;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .25s;color:#fff}.start-btn{background:linear-gradient(135deg,var(--dark-red-dark),var(--dark-red-light));box-shadow:0 4px 14px #e03a3a59}.start-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px #e03a3a73}.mock-btn{background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));box-shadow:0 4px 14px #4c8bf54d;color:#fff}.mock-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px #4c8bf566}.stop-btn{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.stop-btn:hover{background:var(--dark-red-dark);color:var(--dark-red-light);border-color:var(--dark-red-light)}@media (max-width: 1080px){.controls-panel{width:100%;max-width:520px}.video-container{width:100%;max-width:640px}.main-content{gap:20px}}.control-bar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 20px;background:#ffffff05;border:1px solid var(--border-color);border-radius:10px;width:100%;max-width:640px}.control-bar .button-row{width:100%;max-width:520px;margin-bottom:0}.control-bar .button-row.three-col{grid-template-columns:1fr 1fr 1fr}.control-bar .instrument-status{margin-top:2px;padding:0;border:none;background:none}.instructions-panel{display:flex;flex-direction:column;align-items:center;padding:16px 20px;background:#ffffff05;border:1px solid var(--border-color);border-radius:10px;width:100%;max-width:640px}.instructions-panel .instructions-grid{max-width:600px}.instructions-panel .instr-card{font-size:.78rem;padding:12px 16px}.instructions-panel .instr-row,.instructions-panel .instr-title{font-size:.78rem}.instructions-panel .tech-note{margin-top:12px;font-size:.7rem;padding-top:12px;border-top:1px solid var(--border-color)}@media (max-width: 600px){.title{font-size:2rem;letter-spacing:8px}.subtitle{font-size:.65rem;letter-spacing:4px}.instructions-grid{grid-template-columns:1fr}.param-row{grid-template-columns:54px 1fr 42px}.bpm-big{font-size:1.8rem}}