.audio-settings{background:#121217d9;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:#1c1c22e6;border-block-end:1px solid var(--color-surface-3);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-base)}.audio-settings-header:hover{background:#22222ae6;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);transform-origin:center center;touch-action:pan-x}.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(--glass-border-light);background:#ffffff0d;color:var(--color-text-3);cursor:pointer;transition:all var(--transition-base)}.eq-preset:hover{background:#ffffff1a;border-color:hsl(var(--hue-primary) 100% 60% / .3);color:var(--color-text-1);transform:translateY(-1px)}.eq-preset:active{transform:translateY(0)}.eq-preset[data-active=true]{background:var(--gradient-primary);border-color:var(--color-primary-bright);color:var(--color-surface-1);cursor:default;box-shadow:var(--glow-primary)}.background-effect{position:absolute;inset:0;z-index:-1;pointer-events:none}.background-effect__image{position:absolute;inset:0;background-image:url(/background.jpg);background-size:cover;background-position:center;filter:hue-rotate(var(--bg-hue-rotate, 0deg));transition:filter 1s ease-out}.background-effect__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#000000a6,#000c)}.broadcast-indicator{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) var(--space-s);border:1px solid var(--glass-border);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(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));transition:all var(--transition-base)}.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:hsl(var(--hue-primary) 100% 60% / .4);background:linear-gradient(135deg,hsl(var(--hue-primary) 100% 60% / .15),var(--glass-bg));box-shadow:0 0 20px hsl(var(--hue-primary) 100% 60% / .1)}.broadcast-indicator[data-live=true] .broadcast-indicator-dot{background:var(--color-primary);box-shadow:var(--glow-primary);animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.color-picker{display:flex;align-items:center;gap:var(--space-s)}.color-picker__label{font-size:var(--font-size-xs);color:var(--color-text-3)}.color-picker__options{display:flex;gap:var(--space-2xs)}.color-picker__option{inline-size:24px;block-size:24px;border-radius:var(--radius-full);border:2px solid transparent;background-color:hsl(var(--_hue, 0) 80% 50%);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.color-picker__option:hover{transform:scale(1.15)}.color-picker__option[data-active=true]{border-color:var(--color-text-1);box-shadow:0 0 8px hsl(var(--_hue, 0) 100% 60% / .5)}.color-picker__option--auto{background:conic-gradient(#e66f19,#e6c419,#19e619,#19a1e6,#a219e6,#e6195d,#e66f19)}.color-picker__option--auto[data-active=true]{box-shadow:0 0 8px hsl(var(--hue-primary) 100% 60% / .5)}.color-picker__auto-icon{display:block;inline-size:100%;block-size:100%;border-radius:var(--radius-full);background:var(--color-surface-1);opacity:.3}.color-picker__option--auto[data-active=true] .color-picker__auto-icon{opacity:0}.divider{block-size:1px;background:linear-gradient(90deg,transparent,hsl(var(--hue-primary) 100% 60% / .15),var(--glass-border-light),hsl(var(--hue-primary) 100% 60% / .15),transparent);border:none;margin-block:var(--space-l)}.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)}}.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:#121217d9;border-radius:var(--radius-l);padding:var(--space-m) var(--space-l);position:relative;isolation:isolate}.now-playing:before{content:"";position:absolute;inset:0;border-radius:var(--radius-l);padding:1px;background:conic-gradient(from var(--border-angle, 0deg),var(--color-primary-dim) 0deg,var(--color-primary) 10deg,var(--color-primary-dim) 20deg,hsl(0 0% 20%) 60deg,hsl(0 0% 20%) 300deg,var(--color-primary-dim) 340deg,var(--color-primary) 350deg,var(--color-primary-dim) 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotate-border 12s linear infinite;z-index:-1}@keyframes rotate-border{to{--border-angle: 360deg}}@property --border-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.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);display:flex;align-items:center;gap:var(--space-xs)}.now-playing-progress{font-variant-numeric:tabular-nums;min-inline-size:3ch}.now-playing-buffer{block-size:3px;background:var(--color-surface-4);border-radius:var(--radius-full);margin-block-end:var(--space-s);overflow:hidden;position:relative;opacity:0;transition:opacity var(--transition-base)}.now-playing-buffer[data-visible=true]{opacity:1}.now-playing-buffer-bar{block-size:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .2s ease-out;box-shadow:var(--glow-primary-subtle);position:relative}.now-playing-buffer-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,hsl(0 0% 100% / .3) 50%,transparent 100%);animation:buffer-shimmer 1.5s ease-in-out infinite}@keyframes buffer-shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}.now-playing-station{font-family:var(--font-display);font-size:var(--font-size-xl);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[data-connecting=true] .now-playing-label{color:var(--color-primary)}.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)}.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)}@keyframes pulse-fast{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.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: 100px;inline-size:var(--_size);block-size:var(--_size);border-radius:var(--radius-full);background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:2px solid var(--glass-border-light);display:inline-flex;align-items:center;justify-content:center;transition:transform var(--transition-base),border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-slow);position:relative;overflow:visible;font-family:var(--font-mono);font-size:var(--font-size-base);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:hsl(var(--hue-primary) 100% 60% / .5);color:var(--color-text-1);transform:scale(1.05);box-shadow:0 0 40px hsl(var(--hue-primary) 100% 60% / .2)}.play-button:hover:before{border-color:hsl(var(--hue-primary) 100% 60% / .3)}.play-button:active{transform:scale(.97)}.play-button[data-playing=true]{background:var(--gradient-primary);border-color:var(--color-primary-bright);color:var(--color-surface-1);box-shadow:var(--glow-primary-intense);animation:pulse-glow 2s ease-in-out infinite}.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 pulse-glow{0%,to{box-shadow:0 0 20px hsl(var(--hue-primary) 100% 60% / .6),0 0 40px hsl(var(--hue-primary) 100% 60% / .3),0 0 60px hsl(var(--hue-primary) 100% 60% / .15)}50%{box-shadow:0 0 30px hsl(var(--hue-primary) 100% 60% / .8),0 0 60px hsl(var(--hue-primary) 100% 60% / .4),0 0 100px hsl(var(--hue-primary) 100% 60% / .2)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.station-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-s);grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.station{display:flex;align-items:center;justify-content:center;block-size:5rem;padding:var(--space-m);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-l);transition:transform var(--transition-base),border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base);cursor:pointer;position:relative;overflow:hidden;animation:fade-in-up .4s ease-out backwards;inline-size:100%;text-align:center}.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(--glass-border-light);background:var(--glass-bg-strong);transform:translateY(-2px) scale(1.01);box-shadow:0 8px 32px #0000004d}.station:hover:before{transform:translate(100%)}.station:active{transform:translateY(0) scale(.99)}.station[data-active=true]{border-color:hsl(var(--hue-primary) 100% 60% / .5);background:linear-gradient(135deg,hsl(var(--hue-primary) 100% 60% / .15),var(--glass-bg));box-shadow:inset 0 0 30px hsl(var(--hue-primary) 100% 60% / .08),0 0 30px hsl(var(--hue-primary) 100% 60% / .15)}.station[data-active=true]:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:var(--gradient-primary-vertical);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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.station[data-active=true] .station-name{color:var(--color-primary-bright)}.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);overflow:hidden}.canvas-visualizer__canvas{display:block;inline-size:100%;block-size:100%}.canvas-visualizer__idle-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0000004d,#00000080);animation:canvas-fade-in .8s ease-out}.canvas-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)}.canvas-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)}.canvas-visualizer__cta:active{transform:scale(.98)}.canvas-visualizer__cta-icon{font-size:var(--font-size-xs);color:var(--color-primary)}.canvas-visualizer__cta-text{font-weight:var(--font-medium)}@keyframes canvas-fade-in{0%{opacity:0}to{opacity:1}}.webgpu-visualizer{position:relative;block-size:clamp(120px,25vw,200px);border-radius:var(--radius-l);overflow:hidden}.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}}