@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-gradient:radial-gradient(circle at center, #1a122c 0%, #0c0817 100%);--panel-bg:#120c24a6;--panel-border:#ffffff14;--text-primary:#fff;--text-secondary:#a59fb6;--accent-color:#f36;--accent-glow:#f366;--neon-cyan:#00f0ff;--neon-cyan-glow:#00f0ff66;--neon-purple:#bd00ff;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--glass-shadow:0 8px 32px 0 #0000005e;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;position:relative;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}canvas{width:100%;height:100%;display:block}#ui-container{z-index:10;pointer-events:none;justify-content:space-between;width:100%;height:100%;padding:24px;display:flex;position:absolute;top:0;left:0}.interactive-panel{pointer-events:auto;background:var(--panel-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--panel-border);box-shadow:var(--glass-shadow);transition:var(--transition-smooth);border-radius:20px;flex-direction:column;gap:20px;padding:28px;display:flex}.interactive-panel:hover{border-color:#ffffff26;box-shadow:0 8px 32px #bd00ff26}.left-sidebar{scrollbar-width:none;width:360px;max-height:calc(100vh - 48px);overflow-y:auto}.left-sidebar::-webkit-scrollbar{display:none}.right-sidebar{scrollbar-width:none;width:380px;max-height:calc(100vh - 48px);overflow-y:auto}.right-sidebar::-webkit-scrollbar{display:none}header{margin-bottom:8px}h1{letter-spacing:-.5px;background:linear-gradient(135deg, #fff 30%, #a59fb6 70%, var(--accent-color) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:10px;font-size:2.2rem;font-weight:800;display:flex}.subtitle{color:var(--text-secondary);margin-top:4px;font-size:.95rem;font-weight:300}.music-box{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;flex-direction:column;gap:16px;padding:20px;display:flex}.music-info{align-items:center;gap:12px;display:flex}.disc-icon{background:linear-gradient(135deg, var(--accent-color), var(--neon-purple));width:44px;height:44px;box-shadow:0 0 15px var(--accent-glow);border-radius:50%;justify-content:center;align-items:center;display:flex}.disc-icon.spinning{animation:3s linear infinite spin}.disc-icon svg{fill:#fff;width:20px;height:20px}.track-details{flex-direction:column;display:flex}.track-title{color:var(--text-primary);font-size:1rem;font-weight:600}.track-artist{color:var(--text-secondary);font-size:.8rem}#visualizer{background:#0003;border:1px solid #ffffff0d;border-radius:8px;width:100%;height:48px}.music-controls{align-items:center;gap:16px;display:flex}.btn{color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;transition:var(--transition-smooth);background:linear-gradient(135deg,#ffffff14,#ffffff08);border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:600;display:inline-flex}.btn:hover{background:linear-gradient(135deg,#ffffff26,#ffffff14);border-color:#fff3;transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg, var(--accent-color), var(--neon-purple));box-shadow:0 4px 15px var(--accent-glow);border:none}.btn-primary:hover{background:linear-gradient(135deg,#ff4d7a,#c61aff);transform:translateY(-2px);box-shadow:0 4px 20px #f369}.btn-music-play{flex:1}.volume-control{color:var(--text-secondary);align-items:center;gap:8px;font-size:.85rem;display:flex}.volume-control svg{fill:currentColor;width:18px;height:18px}input[type=range]{-webkit-appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-color);width:14px;height:14px;box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:var(--transition-smooth);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan-glow);transform:scale(1.2)}.section-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);align-items:center;gap:8px;margin-bottom:12px;font-size:.95rem;font-weight:800;display:flex}.section-title svg{fill:currentColor;width:16px;height:16px}.dance-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.dance-btn,.theme-btn{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;height:48px;font-size:.85rem}.dance-btn.active,.theme-btn.active{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 12px var(--neon-cyan-glow);text-shadow:0 0 5px #00f0ff80;background:#00f0ff1a}.color-picker{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;flex-wrap:wrap;gap:14px;padding:18px;display:flex}.color-swatch{cursor:pointer;width:42px;height:42px;transition:var(--transition-smooth);border:2px solid #0000;border-radius:50%;position:relative;box-shadow:inset 0 2px 4px #0000004d}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#fff;box-shadow:0 0 15px #fff9}.color-swatch:after{content:"";width:8px;height:8px;transition:var(--transition-smooth);background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.color-swatch.active:after{transform:translate(-50%,-50%)scale(1)}.slider-group{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;flex-direction:column;gap:14px;padding:20px;display:flex}.slider-row{flex-direction:column;gap:6px;display:flex}.slider-labels{color:var(--text-secondary);justify-content:space-between;font-size:.85rem;display:flex}.slider-value{color:var(--text-primary);font-weight:600}.controls-hint{color:var(--text-secondary);-webkit-backdrop-filter:blur(8px);z-index:9;pointer-events:none;background:#0c0817cc;border:1px solid #ffffff1a;border-radius:30px;align-items:center;gap:8px;padding:8px 18px;font-size:.85rem;animation:2.5s infinite pulseHint;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseHint{0%{opacity:.6;transform:translate(-50%)}50%{opacity:1;transform:translate(-50%,-4px)}to{opacity:.6;transform:translate(-50%)}}.status-pill{color:var(--neon-cyan);background:#00f0ff1a;border:1px solid #00f0ff33;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.status-pill.party-mode{color:var(--accent-color);background:#ff33661a;border-color:#f363;animation:1.5s infinite alternate flash}@keyframes flash{0%{opacity:.7;box-shadow:0 0 2px #f363}to{opacity:1;box-shadow:0 0 10px #f366}}@media (width<=900px){#ui-container{pointer-events:auto;flex-direction:column;gap:16px;padding:16px;overflow-y:auto}.left-sidebar,.right-sidebar{pointer-events:auto;width:100%;max-height:none}.interactive-panel{padding:20px}.controls-hint{display:none}}