:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a26;--bg-card: rgba(255, 255, 255, .03);--bg-glass: rgba(255, 255, 255, .06);--bg-glass-hover: rgba(255, 255, 255, .1);--text-primary: #f0f0f5;--text-secondary: rgba(240, 240, 245, .65);--text-muted: rgba(240, 240, 245, .35);--border-subtle: rgba(255, 255, 255, .06);--border-medium: rgba(255, 255, 255, .12);--accent-trance: #00e5ff;--accent-hard: #ff1744;--accent-acid: #76ff03;--accent-deep: #7c4dff;--accent-dark: #ff9100;--accent: #00e5ff;--accent-glow: rgba(0, 229, 255, .25);--accent-dim: rgba(0, 229, 255, .1);--font-primary: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", monospace;--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--text-4xl: 3.75rem;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 900;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);--shadow-glow: 0 0 40px var(--accent-glow);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--z-base: 1;--z-overlay: 100;--z-player: 200;--z-narrator: 300;--z-modal: 400}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-primary);font-weight:var(--weight-regular);color:var(--text-primary);background:var(--bg-primary);line-height:1.5;overflow-x:hidden;min-height:100vh;min-height:100dvh}body:before{content:"";position:fixed;top:-30%;left:-20%;width:80%;height:80%;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background var(--duration-slow) var(--ease-out)}body:after{content:"";position:fixed;bottom:-40%;right:-20%;width:60%;height:60%;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background var(--duration-slow) var(--ease-out)}#app{position:relative;z-index:var(--z-base);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:var(--weight-bold);line-height:1.15;letter-spacing:-.02em}a{color:var(--accent);text-decoration:none;transition:opacity var(--duration-fast) var(--ease-out)}a:hover{opacity:.8}button{font-family:var(--font-primary);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}img,svg{display:block;max-width:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#fff3}::selection{background:var(--accent);color:var(--bg-primary)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes livePulse{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 8px transparent}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes equalizerBar{0%,to{height:4px}50%{height:16px}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-8);position:sticky;top:0;z-index:var(--z-overlay);background:#0a0a0fd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle)}.header__logo{display:flex;align-items:center;gap:var(--space-3)}.header__logo-icon{width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent) 0%,rgba(255,255,255,.1) 100%);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);box-shadow:var(--shadow-glow);transition:background var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}.header__logo-text{font-size:var(--text-xl);font-weight:var(--weight-black);letter-spacing:-.03em;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header__live-badge{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--bg-glass);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.header__live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:livePulse 2s var(--ease-out) infinite}.main{flex:1;display:flex;flex-direction:column;padding:var(--space-8);padding-bottom:140px}.section-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-6)}.stations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5);margin-bottom:var(--space-12)}.station-card{position:relative;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);overflow:hidden;animation:fadeInUp var(--duration-slow) var(--ease-out) both}.station-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--station-color);opacity:.6;transition:opacity var(--duration-normal) var(--ease-out)}.station-card:hover{background:var(--bg-glass-hover);border-color:var(--border-medium);transform:translateY(-2px);box-shadow:var(--shadow-md)}.station-card:hover:before{opacity:1}.station-card.active{border-color:var(--station-color);background:#ffffff0d;box-shadow:0 0 30px rgba(var(--station-color-rgb, 0, 229, 255),.15)}.station-card.active:before{opacity:1;height:3px}.station-card__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-4)}.station-card__number{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-medium)}.station-card__equalizer{display:flex;align-items:flex-end;gap:2px;height:16px;opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.station-card.active .station-card__equalizer{opacity:1}.station-card__equalizer-bar{width:3px;background:var(--station-color);border-radius:2px;animation:equalizerBar .8s ease-in-out infinite}.station-card__equalizer-bar:nth-child(2){animation-delay:.15s}.station-card__equalizer-bar:nth-child(3){animation-delay:.3s}.station-card__equalizer-bar:nth-child(4){animation-delay:.1s}.station-card__name{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-1);color:var(--text-primary)}.station-card__genre{font-size:var(--text-sm);color:var(--station-color);font-weight:var(--weight-medium);margin-bottom:var(--space-3)}.station-card__description{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin-bottom:var(--space-4)}.station-card__meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.station-card__bpm{display:flex;align-items:center;gap:var(--space-1)}.player{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-player);background:#0a0a0feb;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-top:1px solid var(--border-subtle);padding:var(--space-4) var(--space-8);transform:translateY(100%);transition:transform var(--duration-slow) var(--ease-out)}.player.visible{transform:translateY(0)}.player__inner{display:flex;align-items:center;gap:var(--space-6);max-width:1200px;margin:0 auto}.player__visualizer-container{width:56px;height:56px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;background:var(--bg-tertiary);position:relative}.player__visualizer-canvas{width:100%;height:100%}.player__info{flex:1;min-width:0}.player__station-name{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:2px}.player__track-name{font-size:var(--text-base);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.player__track-artist{font-size:var(--text-sm);color:var(--text-secondary)}.player__controls{display:flex;align-items:center;gap:var(--space-3)}.player__btn{width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--bg-glass);color:var(--text-primary);transition:all var(--duration-fast) var(--ease-out);font-size:var(--text-lg)}.player__btn:hover{background:var(--bg-glass-hover);transform:scale(1.05)}.player__btn--play{width:48px;height:48px;background:var(--accent);color:var(--bg-primary);font-size:var(--text-xl)}.player__btn--play:hover{background:var(--accent);opacity:.9;transform:scale(1.08)}.player__live-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:#ff17441f;border:1px solid rgba(255,23,68,.3);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.12em;color:#ff1744;white-space:nowrap}.player__live-dot{width:8px;height:8px;border-radius:50%;background:#ff1744;animation:livePulse 1.5s ease-in-out infinite}.player__btn--narrator{width:40px;height:40px;border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-primary);font-size:18px;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);display:flex;align-items:center;justify-content:center}.player__btn--narrator:hover{background:var(--accent-dim);border-color:var(--accent);transform:scale(1.1)}.player__volume{display:flex;align-items:center;gap:var(--space-2)}.player__volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--bg-glass);outline:none}.player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}.player__volume-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.player__progress{position:absolute;top:-2px;left:0;right:0;height:3px;background:#ffffff0d}.player__progress-bar{height:100%;background:var(--accent);border-radius:0 2px 2px 0;width:0%;transition:width 1s linear}.visualizer-section{width:100%;height:180px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--border-subtle);margin-bottom:var(--space-8);position:relative}.visualizer-canvas{width:100%;height:100%}.visualizer-section__overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--space-4) var(--space-6);background:linear-gradient(transparent,#0a0a0fe6);display:flex;align-items:flex-end;justify-content:space-between}.visualizer-section__track-info{display:flex;flex-direction:column;gap:2px}.visualizer-section__track-title{font-size:var(--text-lg);font-weight:var(--weight-bold)}.visualizer-section__track-artist{font-size:var(--text-sm);color:var(--text-secondary)}.visualizer-section__bpm{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent);font-weight:var(--weight-medium)}.narrator-overlay{position:fixed;bottom:100px;left:50%;transform:translate(-50%) translateY(20px);z-index:var(--z-narrator);background:#0a0a0ff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-4);max-width:500px;opacity:0;pointer-events:none;transition:all var(--duration-normal) var(--ease-out);box-shadow:0 0 40px var(--accent-glow)}.narrator-overlay.visible{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.narrator-overlay__icon{width:40px;height:40px;border-radius:var(--radius-full);background:var(--accent-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--text-lg);animation:pulse 1.5s ease-in-out infinite}.narrator-overlay__text{font-size:var(--text-sm);color:var(--text-primary);line-height:1.5;font-weight:var(--weight-medium)}.narrator-overlay__label{font-size:var(--text-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--weight-semibold);margin-bottom:2px}.mixing-overlay{position:fixed;top:80px;left:50%;transform:translate(-50%) translateY(-20px);z-index:var(--z-overlay);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);background:#0a0a0feb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--accent);box-shadow:0 0 30px var(--accent-glow),0 4px 20px #00000080;opacity:0;pointer-events:none;transition:all .4s var(--ease-out)}.mixing-overlay.visible{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.mixing-overlay__icon{font-size:var(--text-lg);animation:mixPulse 1s ease-in-out infinite}.mixing-overlay__text{font-size:var(--text-sm);font-weight:var(--weight-black);text-transform:uppercase;letter-spacing:.2em;color:var(--accent);background:linear-gradient(90deg,var(--accent),var(--text-primary),var(--accent));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:mixTextShimmer 2s linear infinite}@keyframes mixPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes mixTextShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);transition:opacity var(--duration-slow) var(--ease-out)}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-screen__logo{font-size:var(--text-3xl);font-weight:var(--weight-black);letter-spacing:-.03em;background:linear-gradient(135deg,var(--text-primary),var(--accent-trance));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading-screen__spinner{width:32px;height:32px;border:2px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@media(max-width:768px){.header{padding:var(--space-4)}.main{padding:var(--space-4);padding-bottom:130px}.stations-grid{grid-template-columns:1fr;gap:var(--space-4)}.player__inner{gap:var(--space-3)}.player{padding:var(--space-3) var(--space-4)}.player__volume{display:none}.visualizer-section{height:140px}.header__logo-text{font-size:var(--text-lg)}}@media(max-width:480px){.player__track-artist{display:none}.visualizer-section{height:120px}}