.audio-settings{background:var(--color-surface-2);border:1px solid var(--color-surface-3);border-radius:var(--radius-l);overflow:hidden}.audio-settings-header{padding:var(--space-s) var(--space-m);background:var(--color-surface-3);border-block-end:1px solid var(--color-surface-4);cursor:pointer;font-family:var(--font-mono);font-size:var(--font-size-s);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-2);transition:all var(--transition-fast)}.audio-settings-header:hover{background:var(--color-surface-4);color:var(--color-text-1)}.audio-settings-header:after{content:"+";font-size:var(--font-size-m);font-weight:var(--font-light);transition:transform var(--transition-base)}.audio-settings[open] .audio-settings-header:after{content:"−"}.audio-settings-body{padding:var(--space-m)}.audio-settings-body fieldset{padding:0;margin:0;border:none}.audio-settings .section-label{border-block-end:none;padding-block-end:0}.slider{--_track-height: 4px;--_thumb-size: 16px;--_progress: 50%}.slider-input{-webkit-appearance:none;appearance:none;inline-size:100%;block-size:var(--_track-height);background:linear-gradient(90deg,var(--color-primary) var(--_progress, 50%),var(--color-surface-4) var(--_progress, 50%));border-radius:var(--radius-full);outline:none;cursor:pointer;transition:all var(--transition-fast)}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border-radius:var(--radius-full);background:var(--color-text-1);cursor:pointer;border:2px solid var(--color-primary);transition:all var(--transition-fast);box-shadow:0 0 0 0 transparent}.slider-input::-moz-range-thumb{inline-size:var(--_thumb-size);block-size:var(--_thumb-size);border-radius:var(--radius-full);background:var(--color-text-1);cursor:pointer;border:2px solid var(--color-primary);transition:all var(--transition-fast)}.slider-input:hover::-webkit-slider-thumb{transform:scale(1.15);box-shadow:var(--glow-primary)}.slider-input:hover::-moz-range-thumb{transform:scale(1.15);box-shadow:var(--glow-primary)}.slider-vertical{--_track-height: 4px;--_thumb-size: 16px;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);block-size:140px;justify-content:space-between}.slider-vertical .slider-input{inline-size:80px;block-size:var(--_track-height);transform:rotate(-90deg)}.eq-preset{padding:var(--space-2xs) var(--space-xs);font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-s);border:1px solid var(--color-surface-4);background:var(--color-surface-3);color:var(--color-text-3);cursor:pointer;transition:all var(--transition-fast)}.eq-preset:hover{background:var(--color-surface-4);border-color:var(--color-text-4);color:var(--color-text-1)}.eq-preset[data-active=true]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-surface-1);cursor:default;box-shadow:var(--glow-primary)}.background-effect{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,hsl(var(--hue-primary) 100% 20% / .4) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,hsl(185 100% 15% / .3) 0%,transparent 50%),var(--color-surface-1)}.broadcast-indicator{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) var(--space-s);border:1px solid var(--color-surface-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.15em;background:var(--color-surface-2)}.broadcast-indicator-dot{inline-size:8px;block-size:8px;border-radius:var(--radius-full);background:var(--color-text-4);transition:all var(--transition-base)}.broadcast-indicator[data-live=true]{border-color:var(--color-primary-dim);background:linear-gradient(135deg,hsl(var(--hue-primary) 100% 60% / .1),transparent)}.broadcast-indicator[data-live=true] .broadcast-indicator-dot{background:var(--color-primary);box-shadow:var(--glow-primary);animation:pulse-glow 1.5s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.divider{block-size:1px;background:linear-gradient(90deg,transparent,var(--color-surface-3),transparent);border:none;margin-block:var(--space-m)}.error-banner{background:linear-gradient(135deg,#ee2b2b26,#ee2b2b0d);border:1px solid var(--color-danger);color:var(--color-text-1);padding:var(--space-s) var(--space-m);border-radius:var(--radius-m);font-family:var(--font-mono);font-size:var(--font-size-s);animation:slide-in-down var(--transition-base) ease-out}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-picker{--cluster-gap: var(--space-xs)}.color-picker__dot{inline-size:12px;block-size:12px;padding:0;border:2px solid transparent;border-radius:var(--radius-full);background:hsl(var(--dot-hue) 80% 50%);cursor:pointer;transition:all var(--transition-fast);opacity:.5}.color-picker__dot:hover{opacity:.8;transform:scale(1.2)}.color-picker__dot[data-selected=true]{opacity:1;border-color:var(--color-text-1);box-shadow:0 0 8px hsl(var(--dot-hue) 100% 60% / .5)}.footer{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-4);padding-block:var(--space-m);border-block-start:1px solid var(--color-surface-3)}.footer-shortcuts{margin:0}.footer-shortcuts kbd{display:inline-block;padding:2px 6px;font-family:inherit;font-size:inherit;background:var(--color-surface-3);border:1px solid var(--color-surface-4);border-radius:var(--radius-xs);margin-inline:2px}.footer-bottom{flex-wrap:wrap}.footer-credit{margin:0;color:var(--color-text-3)}.footer-credit a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}.footer-credit a:hover{color:var(--color-primary-bright)}.install-prompt{position:fixed;z-index:var(--layer-notification);inset-block-end:20px;inset-inline-end:20px}.install-prompt-button{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dim));color:var(--color-surface-1);padding:var(--space-xs) var(--space-m);border-radius:var(--radius-m);font-family:var(--font-mono);font-size:var(--font-size-s);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.1em;transition:all var(--transition-base);position:relative;overflow:hidden;box-shadow:var(--glow-primary)}.install-prompt-button:hover{transform:translateY(-2px);box-shadow:var(--glow-primary-intense)}.listener-count{display:inline-flex;align-items:center;gap:var(--space-2xs);font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-3)}.listener-count__number{font-weight:var(--font-medium);color:var(--color-text-2)}.listener-count__label{text-transform:lowercase}.now-playing{background:var(--color-surface-2);border:1px solid var(--color-surface-3);border-radius:var(--radius-m);padding:var(--space-m);position:relative;overflow:hidden}.now-playing:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-dim))}.now-playing-label{font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-medium);color:var(--color-primary);text-transform:uppercase;letter-spacing:.2em;margin-block-end:var(--space-2xs)}.now-playing-station{font-family:var(--font-display);font-size:var(--font-size-l);font-weight:700;color:var(--color-text-1);margin:0;line-height:var(--leading-heading)}.now-playing-quality{display:inline-flex;align-items:center;gap:var(--space-2xs);margin-inline-start:var(--space-xs);vertical-align:middle}.now-playing-meta{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-3);margin-block-start:var(--space-xs)}.now-playing[data-connecting=true]{border-color:var(--color-secondary-dim)}.now-playing[data-connecting=true]:before{background:linear-gradient(180deg,var(--color-secondary),var(--color-secondary-dim))}.now-playing[data-connecting=true]:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsl(185 100% 50% / .08),transparent);animation:shimmer 2s linear infinite}.now-playing[data-connecting=true] .now-playing-label{color:var(--color-secondary)}.status-dot{inline-size:8px;block-size:8px;border-radius:var(--radius-full);transition:all var(--transition-base)}.status-dot[data-quality=good]{background:var(--color-success);box-shadow:var(--glow-success);animation:pulse-quality 2s ease-in-out infinite}.status-dot[data-quality=buffering]{background:var(--color-warning);animation:pulse-fast .8s ease-in-out infinite}.status-dot[data-quality=error]{background:var(--color-danger);box-shadow:var(--glow-danger)}.stream-track{background:linear-gradient(135deg,hsl(var(--hue-primary) 100% 60% / .05),transparent);border:1px solid hsl(var(--hue-primary) 100% 60% / .2);border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);margin-block-start:var(--space-s)}.stream-track-title{font-family:var(--font-display);font-size:var(--font-size-m);font-weight:600;color:var(--color-text-1);margin:0}.stream-track-artist{font-family:var(--font-mono);font-size:var(--font-size-s);color:var(--color-primary);margin:var(--space-3xs) 0 0 0}.stream-track[data-status=loading]{background:linear-gradient(135deg,hsl(185 100% 50% / .05),transparent);border-color:#00eaff33}.stream-track[data-status=loading] .stream-track-title{color:var(--color-secondary)}.stream-track[data-status=unavailable]{background:var(--color-surface-2);border-color:var(--color-surface-3)}.stream-track[data-status=unavailable] .stream-track-title,.stream-track[data-status=unavailable] .stream-track-artist{color:var(--color-text-4)}@keyframes pulse-quality{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulse-fast{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.page-header{--stack-gap: var(--space-2xs);text-align:center;position:relative}.page-header-title{font-family:var(--font-display);font-size:var(--font-size-2xl);font-weight:800;color:var(--color-text-1);letter-spacing:-.03em;margin:0;line-height:var(--leading-tight);text-transform:uppercase}.page-header-subtitle{font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-light);color:var(--color-primary);text-transform:uppercase;letter-spacing:.3em;margin-block-start:var(--space-xs)}.play-button{--_size: 80px;inline-size:var(--_size);block-size:var(--_size);border-radius:var(--radius-full);background:var(--color-surface-2);border:2px solid var(--color-surface-4);display:inline-flex;align-items:center;justify-content:center;transition:all var(--transition-base);position:relative;overflow:hidden;font-family:var(--font-mono);font-size:var(--font-size-s);font-weight:var(--font-semibold);letter-spacing:.1em;color:var(--color-text-2)}.play-button:before{content:"";position:absolute;inset:-4px;border-radius:var(--radius-full);border:1px solid var(--color-surface-3);transition:all var(--transition-base)}.play-button:after{content:"";position:absolute;inset:4px;border-radius:var(--radius-full);background:radial-gradient(circle at center,transparent 40%,var(--color-surface-1) 100%);opacity:0;transition:opacity var(--transition-base)}.play-button:hover{border-color:var(--color-primary-dim);color:var(--color-text-1);transform:scale(1.02)}.play-button:hover:before{border-color:var(--color-primary-dim)}.play-button:active{transform:scale(.98)}.play-button[data-playing=true]{background:linear-gradient(135deg,var(--color-primary-dim),var(--color-primary));border-color:var(--color-primary);color:var(--color-surface-1);box-shadow:var(--glow-primary-intense)}.play-button[data-playing=true]:before{border-color:var(--color-primary-bright);animation:spin-slow 20s linear infinite}.play-button[data-playing=true]:after{opacity:.3}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.station-list{list-style:none;padding:0;margin:0}.station{--cluster-gap: var(--space-m);padding:var(--space-s) var(--space-m);background:var(--color-surface-2);border:1px solid var(--color-surface-3);border-radius:var(--radius-m);transition:all var(--transition-base);cursor:pointer;position:relative;overflow:hidden;animation:fade-in-up .4s ease-out backwards}.station:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsl(var(--hue-primary) 100% 60% / .05),transparent);transform:translate(-100%);transition:transform var(--transition-slow)}.station:hover{border-color:var(--color-surface-4);background:var(--color-surface-3)}.station:hover:before{transform:translate(100%)}.station[data-active=true]{border-color:var(--color-primary);background:linear-gradient(135deg,hsl(var(--hue-primary) 100% 60% / .1),var(--color-surface-2));box-shadow:inset 0 0 30px hsl(var(--hue-primary) 100% 60% / .05)}.station[data-active=true]:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:var(--color-primary);box-shadow:var(--glow-primary)}.station[data-error=true]{border-color:var(--color-danger)}.station-name{font-family:var(--font-mono);font-size:var(--font-size-base);font-weight:var(--font-medium);color:var(--color-text-1);transition:color var(--transition-fast)}.station[data-active=true] .station-name{color:var(--color-primary-bright)}.station-genre{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-4);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0}.station-error{margin-block-start:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);background:#ee2b2b1a;border:1px solid hsl(0 85% 55% / .3);border-radius:var(--radius-s);font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-danger)}.station-error-dismiss{padding:var(--space-3xs) var(--space-2xs);font-family:var(--font-mono);font-size:var(--font-size-xs);background:#ffffff1a;border-radius:var(--radius-xs);color:var(--color-text-2);transition:background var(--transition-fast);flex-shrink:0}.station-error-dismiss:hover{background:#fff3}.station:nth-child(1){animation-delay:.05s}.station:nth-child(2){animation-delay:.1s}.station:nth-child(3){animation-delay:.15s}.station:nth-child(4){animation-delay:.2s}.station:nth-child(5){animation-delay:.25s}.station:nth-child(6){animation-delay:.3s}.station:nth-child(7){animation-delay:.35s}.station:nth-child(8){animation-delay:.4s}.station:nth-child(9){animation-delay:.45s}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.canvas-visualizer{position:relative;block-size:clamp(100px,20vw,160px);border-radius:var(--radius-l);border:1px solid var(--color-surface-3);overflow:hidden;background:var(--color-surface-1)}.canvas-visualizer__canvas{display:block;inline-size:100%;block-size:100%}.webgpu-visualizer{position:relative;block-size:clamp(120px,25vw,200px);border-radius:var(--radius-l);border:1px solid var(--color-surface-3);overflow:hidden;background:var(--color-surface-1)}.webgpu-visualizer__canvas{display:block;inline-size:100%;block-size:100%}.webgpu-visualizer__controls{--cluster-gap: var(--space-s);--cluster-justify: center;position:absolute;inset-inline:0;inset-block-end:0;padding:var(--space-xs);background:linear-gradient(to top,hsl(0 0% 0% / .6) 0%,transparent 100%);opacity:0;transition:opacity var(--transition-base)}.webgpu-visualizer:hover .webgpu-visualizer__controls,.webgpu-visualizer:focus-within .webgpu-visualizer__controls{opacity:1}.webgpu-visualizer__arrow{inline-size:32px;block-size:32px;padding:0;border:none;border-radius:var(--radius-s);background:#ffffff1a;color:var(--color-text-primary);font-size:var(--font-size-m);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.webgpu-visualizer__arrow:hover{background:#fff3}.webgpu-visualizer__arrow:active{transform:scale(.95)}.webgpu-visualizer__effect-name{min-inline-size:80px;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-xs);background:#0006;color:var(--color-text-primary);font-family:var(--font-mono);font-size:var(--font-size-xs);text-align:center;text-transform:uppercase;letter-spacing:.05em}.webgpu-visualizer__dots{--cluster-gap: var(--space-2xs)}.webgpu-visualizer__dot{inline-size:6px;block-size:6px;padding:0;border:none;border-radius:50%;background:#ffffff4d;cursor:pointer;transition:background var(--transition-fast)}.webgpu-visualizer__dot[data-active=true]{background:var(--color-primary)}.webgpu-visualizer__dot:hover{background:#ffffff80}.webgpu-visualizer__dot[data-active=true]:hover{background:var(--color-primary-bright)}.webgpu-visualizer__fallback{--cluster-justify: center;block-size:100%;color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--font-size-s)}.webgpu-visualizer__idle-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0000004d,#00000080);animation:fade-in .8s ease-out}.webgpu-visualizer__cta{display:flex;align-items:center;gap:var(--space-s);padding:var(--space-s) var(--space-l);border:1px solid hsl(var(--hue-primary) 100% 60% / .4);border-radius:var(--radius-full);background:hsl(var(--hue-primary) 100% 60% / .15);color:var(--color-text-1);font-family:var(--font-mono);font-size:var(--font-size-s);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.webgpu-visualizer__cta:hover{background:hsl(var(--hue-primary) 100% 60% / .25);border-color:var(--color-primary);box-shadow:var(--glow-primary);transform:scale(1.02)}.webgpu-visualizer__cta:active{transform:scale(.98)}.webgpu-visualizer__cta-icon{font-size:var(--font-size-xs);color:var(--color-primary)}.webgpu-visualizer__cta-text{font-weight:var(--font-medium)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}