.visualizer[data-v-e4b84252]{background:linear-gradient(135deg,#ffffff1a 0%,#ffffff0d 100%);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 32px #0000001f;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.visualizer[data-v-e4b84252]:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.5),transparent)}.visualizer[data-v-e4b84252]:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000026;border-color:#f59e0b4d}.visualizer-header[data-v-e4b84252]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.visualizer-title h2[data-v-e4b84252]{font-size:1.5rem;font-weight:700;color:#f8fafc;margin:0;letter-spacing:.025em;text-shadow:0 1px 2px rgba(0,0,0,.1)}.visualizer-divider[data-v-e4b84252]{width:60px;height:3px;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:2px;margin-top:.5rem;box-shadow:0 0 10px #f59e0b4d}.format-info[data-v-e4b84252]{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:linear-gradient(135deg,#60a5fa1a 0%,#60a5fa0d 100%);border:1px solid rgba(96,165,250,.2);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.format-item[data-v-e4b84252]{display:flex;align-items:center}.format-label[data-v-e4b84252]{font-size:.875rem;font-weight:600;color:#60a5fa;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;text-shadow:0 0 10px rgba(96,165,250,.3)}.format-waiting[data-v-e4b84252]{color:#94a3b8;font-style:italic;animation:pulse-e4b84252 2s ease-in-out infinite}.format-separator[data-v-e4b84252]{width:1px;height:16px;background:#60a5fa4d;border-radius:1px}.spectrum-container[data-v-e4b84252]{margin-bottom:1.5rem}.spectrum-line[data-v-e4b84252]{margin-bottom:1rem;height:120px;position:relative}.spectrum-svg[data-v-e4b84252]{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(245,158,11,.2))}.left-channel-path[data-v-e4b84252]{transition:all .2s ease;animation:leftChannelGlow-e4b84252 1.5s ease-in-out infinite alternate}.left-channel-fill[data-v-e4b84252]{transition:all .2s ease;animation:leftChannelPulse-e4b84252 2s ease-in-out infinite}.frequency-line[data-v-e4b84252]{height:80px;position:relative}.frequency-svg[data-v-e4b84252]{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(96,165,250,.3))}.right-channel-path[data-v-e4b84252]{transition:all .2s ease;animation:rightChannelGlow-e4b84252 1.2s ease-in-out infinite alternate}.right-channel-fill[data-v-e4b84252]{transition:all .2s ease;animation:rightChannelPulse-e4b84252 1.8s ease-in-out infinite}@keyframes leftChannelGlow-e4b84252{0%{filter:drop-shadow(0 0 8px rgba(245,158,11,.2))}50%{filter:drop-shadow(0 0 20px rgba(245,158,11,.5))}to{filter:drop-shadow(0 0 8px rgba(245,158,11,.2))}}@keyframes leftChannelPulse-e4b84252{0%{opacity:.15}50%{opacity:.25}to{opacity:.15}}@keyframes rightChannelGlow-e4b84252{0%{filter:drop-shadow(0 0 8px rgba(96,165,250,.3))}50%{filter:drop-shadow(0 0 16px rgba(96,165,250,.6))}to{filter:drop-shadow(0 0 8px rgba(96,165,250,.3))}}@keyframes rightChannelPulse-e4b84252{0%{opacity:.1}50%{opacity:.2}to{opacity:.1}}.status-grid[data-v-e4b84252]{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}.status-item[data-v-e4b84252]{text-align:center;padding:.75rem;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.status-item[data-v-e4b84252]:hover{background:#ffffff14;border-color:#ffffff26}.status-label[data-v-e4b84252]{font-size:.75rem;font-weight:500;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.status-value[data-v-e4b84252]{font-size:1rem;font-weight:700;color:#f8fafc;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace}.status-indicator[data-v-e4b84252]{display:flex;align-items:center;justify-content:center;gap:.5rem}.status-dot[data-v-e4b84252]{width:8px;height:8px;border-radius:50%;background:#6b7280;transition:all .3s ease}.status-dot.live[data-v-e4b84252]{background:#10b981;box-shadow:0 0 10px #10b98180;animation:pulse-e4b84252 1s ease-in-out infinite}@keyframes pulse-e4b84252{0%{opacity:.8}to{opacity:1}}@media (max-width: 640px){.visualizer[data-v-e4b84252]{padding:1.25rem}.visualizer-header[data-v-e4b84252]{flex-direction:column;gap:1rem;align-items:flex-start}.format-info[data-v-e4b84252]{align-self:stretch;justify-content:center}.spectrum-line[data-v-e4b84252]{height:100px}.frequency-line[data-v-e4b84252]{height:60px}.status-grid[data-v-e4b84252]{gap:.75rem}}.volume-control[data-v-4621ec31]{margin-top:1rem}.volume-container[data-v-4621ec31]{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#ffffff14 0%,#ffffff08 100%);border:1px solid rgba(255,255,255,.1);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.volume-container[data-v-4621ec31]:hover{border-color:#f59e0b4d;box-shadow:0 4px 20px #0000001a}.volume-icon[data-v-4621ec31]{width:16px;height:16px;color:#f59e0b;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(245,158,11,.3));cursor:pointer;transition:all .2s ease}.volume-icon[data-v-4621ec31]:hover{transform:scale(1.1);filter:drop-shadow(0 0 6px rgba(245,158,11,.5))}.volume-icon.muted[data-v-4621ec31]{color:#6b7280;filter:drop-shadow(0 0 4px rgba(107,114,128,.3))}.slider-container[data-v-4621ec31]{flex:1;position:relative;height:6px}.volume-slider[data-v-4621ec31]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.slider-track[data-v-4621ec31]{position:relative;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.slider-fill[data-v-4621ec31]{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:3px;transition:width .2s ease;box-shadow:0 0 8px #f59e0b66}.volume-value[data-v-4621ec31]{font-size:.875rem;font-weight:600;color:#f59e0b;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;min-width:3rem;text-align:right;text-shadow:0 0 8px rgba(245,158,11,.3);transition:color .2s ease}.volume-value.muted[data-v-4621ec31]{color:#6b7280;text-shadow:0 0 8px rgba(107,114,128,.3)}@media (max-width: 640px){.volume-container[data-v-4621ec31]{padding:.5rem .75rem}.volume-value[data-v-4621ec31]{font-size:.75rem;min-width:2.5rem}}.latency-control[data-v-e6c53b3b]{width:100%;margin-top:1rem}.latency-container[data-v-e6c53b3b]{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center}.latency-container[data-v-e6c53b3b]:hover{background:#ffffff14;border-color:#f59e0b4d}.latency-row[data-v-e6c53b3b]{display:flex;align-items:center;justify-content:space-between}.latency-info[data-v-e6c53b3b]{display:flex;align-items:center;gap:.5rem}.latency-icon[data-v-e6c53b3b]{width:16px;height:16px;color:#f59e0b;filter:drop-shadow(0 0 4px rgba(245,158,11,.3))}.latency-label[data-v-e6c53b3b]{font-size:.875rem;font-weight:600;color:#f3f4f6}.switch-container[data-v-e6c53b3b]{display:flex;align-items:center;gap:.5rem}.switch-label[data-v-e6c53b3b]{font-size:.75rem;color:#9ca3af;transition:color .3s ease;font-weight:500}.switch-label.active[data-v-e6c53b3b]{color:#f59e0b}.mini-switch[data-v-e6c53b3b]{position:relative;width:40px;height:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer;transition:all .3s ease;padding:0}.mini-switch[data-v-e6c53b3b]:hover{background:#ffffff26;border-color:#f59e0b66}.mini-switch.very-fast[data-v-e6c53b3b]{background:#f59e0b33;border-color:#f59e0b}.switch-handle[data-v-e6c53b3b]{position:absolute;top:1px;left:1px;width:16px;height:16px;background:#f3f4f6;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.mini-switch.very-fast .switch-handle[data-v-e6c53b3b]{transform:translate(20px);background:#f59e0b;box-shadow:0 2px 8px #f59e0b66}.latency-warning[data-v-e6c53b3b]{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;margin-top:.75rem;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:6px;color:#fca5a5;animation:fadeInWarning-e6c53b3b .3s ease-in-out}@keyframes fadeInWarning-e6c53b3b{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.warning-icon[data-v-e6c53b3b]{width:14px;height:14px;flex-shrink:0;color:#ef4444}.warning-text[data-v-e6c53b3b]{font-size:.6875rem;font-weight:500}@media (max-width: 640px){.latency-container[data-v-e6c53b3b]{padding:.875rem}.latency-row[data-v-e6c53b3b]{margin-bottom:.5rem}.latency-label[data-v-e6c53b3b]{font-size:.8125rem}.switch-label[data-v-e6c53b3b]{font-size:.6875rem}.mini-switch[data-v-e6c53b3b]{width:36px;height:18px}.switch-handle[data-v-e6c53b3b]{width:14px;height:14px}.mini-switch.very-fast .switch-handle[data-v-e6c53b3b]{transform:translate(18px)}.warning-text[data-v-e6c53b3b]{font-size:.625rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 50%,#0a0a0a 100%);color:#fff;min-height:100vh}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;overflow:hidden}.main-content{display:flex;align-items:flex-start;justify-content:center;gap:4rem;width:100%;max-width:1400px;z-index:10;position:relative;margin:0 auto}.bg-decoration{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}.bg-circle{position:absolute;border-radius:50%;filter:blur(80px);opacity:.1;animation:float 6s ease-in-out infinite}.bg-circle:nth-child(1){width:320px;height:320px;background:#ff6b35;top:-40px;right:-40px;animation-delay:0s}.bg-circle:nth-child(2){width:320px;height:320px;background:#3b82f6;bottom:-40px;left:-40px;animation-delay:2s}.bg-circle:nth-child(3){width:384px;height:384px;background:#8b5cf6;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}}.header{text-align:center;margin-bottom:4rem;z-index:10;position:relative}.logo-container{display:inline-flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#ff6b35 0%,#ff8c42 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px #ff6b3533}.logo-icon svg{width:24px;height:24px;color:#fff}.logo-text{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#fff 0%,#d1d5db 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}.subtitle{color:#9ca3af;font-size:1.125rem;max-width:480px;margin:0 auto;line-height:1.6}.visualizer-container{flex:1;max-width:700px;min-width:500px;z-index:10;position:relative}.visualizer{padding:2rem;background:#ffffff0d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 8px 32px #0000004d}.visualizer-title{text-align:center;margin-bottom:1.5rem}.visualizer-title h2{font-size:1.25rem;font-weight:600;color:#d1d5db;margin-bottom:.5rem}.visualizer-divider{width:64px;height:2px;background:linear-gradient(90deg,#ff6b35 0%,#ff8c42 100%);margin:0 auto;border-radius:1px}.audio-bars{display:flex;align-items:end;justify-content:center;gap:2px;height:128px;margin-bottom:1.5rem;padding:1rem;background:#0003;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.audio-bar{width:3px;min-height:8px;background:linear-gradient(to top,#ff6b35,#ff8c42);border-radius:2px;transition:all .1s ease;animation:wave 1.5s ease-in-out infinite}.audio-bar.active{background:linear-gradient(to top,#ff6b35,#ffa726);box-shadow:0 0 10px #ff6b3566;animation:wave-active .8s ease-in-out infinite}.audio-bar.playing{animation:wave-playing 1.2s ease-in-out infinite}@keyframes wave{0%,to{transform:scaleY(1);opacity:.7}50%{transform:scaleY(1.2);opacity:1}}@keyframes wave-active{0%,to{transform:scaleY(1);opacity:.9}50%{transform:scaleY(1.5);opacity:1}}@keyframes wave-playing{0%,to{transform:scaleY(1) scaleX(1);opacity:.8}25%{transform:scaleY(1.3) scaleX(1.1);opacity:1}50%{transform:scaleY(.8) scaleX(.9);opacity:.9}75%{transform:scaleY(1.2) scaleX(1.05);opacity:1}}.frequency-bars{display:flex;justify-content:center;gap:1px;height:64px;margin-bottom:1.5rem;padding:.75rem;background:#1f29374d;border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.frequency-bar{width:2px;min-height:8px;background:linear-gradient(to top,rgba(255,107,53,.4),transparent);border-radius:1px;transition:height .1s ease,background .2s ease}.frequency-bar:hover{background:linear-gradient(to top,#ff6b3599,#ff8c424d)}.status-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;text-align:center;font-family:JetBrains Mono,monospace;font-size:.875rem;background:#1f293733;border-radius:8px;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-item{color:#9ca3af}.status-label{color:#6b7280;margin-bottom:.25rem;font-size:.75rem}.status-value{color:#fff;font-weight:600}.status-indicator{display:inline-flex;align-items:center;gap:.25rem}.status-dot{width:8px;height:8px;border-radius:50%;background:#6b7280}.status-dot.live{background:#10b981;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.control-panel{background:#ffffff0d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:2rem;width:400px;min-width:350px;max-width:450px;box-shadow:0 8px 32px #0000004d;z-index:10;position:relative;flex-shrink:0}.connection-status{margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:12px;border:1px solid}.status-card.success{background:#10b9811a;border-color:#10b9814d}.status-card.warning{background:#f59e0b1a;border-color:#f59e0b4d}.status-icon{width:20px;height:20px;flex-shrink:0}.status-text{flex:1}.status-title{font-weight:500;font-size:.875rem;margin-bottom:.25rem}.status-subtitle{font-size:.75rem;opacity:.8}.status-card.success .status-title{color:#10b981}.status-card.success .status-subtitle{color:#a7f3d0}.status-card.warning .status-title{color:#f59e0b}.status-card.warning .status-subtitle{color:#fde68a}.input-group{margin-bottom:1.5rem}.input-label{display:block;font-size:.875rem;font-weight:500;color:#d1d5db;margin-bottom:.5rem}.input-field{width:100%;padding:.75rem 1rem;background:#1f293780;border:1px solid #4b5563;border-radius:12px;color:#fff;font-size:.875rem;transition:all .2s ease}.input-field:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px #ff6b351a}.input-field:disabled{opacity:.5;cursor:not-allowed}.input-field::placeholder{color:#9ca3af}.play-button{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#ff6b35 0%,#ff8c42 100%);border:none;border-radius:16px;color:#fff;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem}.play-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px #ff6b354d}.play-button:active{transform:translateY(0)}.play-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.play-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(255,255,255,.2) 0%,transparent 50%);transform:translate(-100%) skew(-12deg);transition:transform .7s ease}.play-button:hover:before{transform:translate(100%) skew(-12deg)}.play-icon{display:flex;align-items:center;justify-content:center}.play-icon svg{width:16px;height:16px}.loading-bars{display:flex;align-items:center;gap:2px}.loading-bar{width:2px;height:16px;background:currentColor;animation:loading 1.5s ease-in-out infinite}.loading-bar:nth-child(1){animation-delay:0ms}.loading-bar:nth-child(2){animation-delay:.15s}.loading-bar:nth-child(3){animation-delay:.3s}@keyframes loading{0%,to{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}.footer{margin-top:3rem;text-align:center;color:#9ca3af;font-size:.75rem;z-index:10;position:relative}.footer p{margin-bottom:.25rem}.footer p:last-child{opacity:.6}.ios-warning{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.warning-content{background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2rem;max-width:400px;width:100%;text-align:center;box-shadow:0 8px 32px #0006}.warning-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.5rem;position:relative}.warning-icon{width:24px;height:24px;color:#10b981;flex-shrink:0}.warning-header h3{font-size:1.25rem;font-weight:600;color:#fff;margin:0}.dismiss-btn{position:absolute;right:-.5rem;top:-.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:1.25rem;cursor:pointer;transition:all .2s ease}.dismiss-btn:hover{background:#fff3;color:#fff}.warning-content p{color:#d1d5db;line-height:1.6;margin-bottom:1.5rem}.silent-image-container{margin:1.5rem 0;display:flex;justify-content:center}.silent-image{max-width:200px;width:100%;height:auto;border-radius:12px;box-shadow:0 4px 16px #0000004d}.warning-note{font-size:.875rem;color:#f59e0b;font-weight:500;margin-bottom:0!important}@media (max-width: 1024px){.main-content{flex-direction:column;align-items:center;gap:3rem;max-width:700px}.control-panel{width:100%;max-width:500px}.visualizer-container{width:100%;max-width:600px;min-width:auto}}@media (max-width: 768px){.main-content{gap:2rem}.control-panel{max-width:400px;padding:1.5rem}.visualizer-container{max-width:500px}}@media (max-width: 640px){.app-container{padding:1rem .5rem}.header{margin-bottom:2rem}.logo-icon{width:40px;height:40px}.logo-icon svg{width:20px;height:20px}.logo-text{font-size:2rem}.subtitle{font-size:1rem}.main-content{gap:1.5rem}.visualizer-container{margin-bottom:0}.visualizer{padding:1.5rem}.audio-bars{height:96px}.frequency-bars{height:48px}.control-panel{padding:1.5rem;max-width:350px;min-width:auto;width:100%}.ios-warning{padding:.5rem}.warning-content{padding:1.5rem;max-width:320px}.warning-header h3{font-size:1.125rem}.silent-image{max-width:160px}.warning-content p{font-size:.875rem}}