@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--putty: #F5F3EE;--putty-dark: #E8E4DC;--black: #000000;--white: #FFFFFF;--gray: #6B6B6B;--gray-light: #9A9A9A;--accent: #FF3366;--accent-hover: #FF1A53;--accent-subtle: rgba(255, 51, 102, .1);--card-border: rgba(0, 0, 0, .1);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3rem;--radius: 16px;--radius-sm: 8px;--radius-full: 9999px;--ease: cubic-bezier(.4, 0, .2, 1);--duration: .2s;--duration-medium: .3s}html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--black);-webkit-font-smoothing:antialiased;line-height:1.4;background:var(--white)}#root{height:100%}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--white)}.radio-player{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.player-header{padding:var(--space-5) var(--space-6);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--black);background:var(--white);flex-shrink:0}.player-header h1{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--black);display:flex;align-items:center;gap:var(--space-2)}.logo-dot{width:8px;height:8px;background:var(--accent);border-radius:var(--radius-full)}.header-status{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);display:flex;align-items:center;gap:6px;padding:var(--space-1) var(--space-3);background:var(--accent-subtle);border-radius:var(--radius-sm)}.header-status:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:var(--radius-full);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.wrapper-now-playing{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.now-playing{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6) var(--space-6);text-align:center;background:var(--white);min-height:0}.album-art{margin-bottom:var(--space-6)}.album-placeholder{width:200px;height:200px;background:var(--putty);border:1px solid var(--black);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;position:relative;transition:all var(--duration-medium) var(--ease)}.album-placeholder.playing{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-subtle)}.equalizer{display:flex;align-items:flex-end;gap:3px;height:36px}.equalizer-bar{width:4px;background:var(--accent);border-radius:2px}.equalizer-bar:nth-child(1){animation:eq1 .6s ease-in-out infinite}.equalizer-bar:nth-child(2){animation:eq2 .6s ease-in-out infinite .1s}.equalizer-bar:nth-child(3){animation:eq3 .6s ease-in-out infinite .2s}.equalizer-bar:nth-child(4){animation:eq4 .6s ease-in-out infinite .15s}.equalizer-bar:nth-child(5){animation:eq5 .6s ease-in-out infinite .05s}@keyframes eq1{0%,to{height:8px}50%{height:32px}}@keyframes eq2{0%,to{height:20px}50%{height:10px}}@keyframes eq3{0%,to{height:14px}50%{height:36px}}@keyframes eq4{0%,to{height:24px}50%{height:8px}}@keyframes eq5{0%,to{height:10px}50%{height:28px}}.album-placeholder:not(.playing) .equalizer-bar{animation:none;height:5px;background:var(--gray-light)}.track-info h2{font-size:var(--text-2xl);font-weight:700;color:var(--black);margin-bottom:var(--space-2);letter-spacing:-.03em}.track-info p{font-size:var(--text-base);color:var(--gray)}.controls{padding:var(--space-4) var(--space-6) var(--space-10);display:flex;justify-content:center;background:var(--white)}.play-button{width:100px;height:100px;border-radius:var(--radius-full);border:1px solid var(--black);background:var(--black);color:var(--white);font-size:var(--text-xl);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:transform var(--duration) var(--ease)}.play-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);clip-path:inset(0 100% 0 0);transition:clip-path var(--duration-medium) var(--ease)}.play-button:hover:before{clip-path:inset(0 0 0 0)}.play-button:hover{transform:scale(1.05)}.play-button:active{transform:scale(.98)}.play-button span{position:relative;z-index:1}.channel-selector{background:var(--putty);border-top:1px solid var(--black);display:flex;flex-direction:column}.channel-button{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border:none;border-bottom:1px solid var(--card-border);background:transparent;cursor:pointer;transition:all var(--duration) var(--ease);text-align:left;position:relative;overflow:hidden}.channel-button:last-child{border-bottom:none}.channel-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--putty-dark);clip-path:inset(0 100% 0 0);transition:clip-path var(--duration-medium) var(--ease);z-index:0}.channel-button:hover:before{clip-path:inset(0 0 0 0)}.channel-button.active{background:var(--white)}.channel-button.active:before{display:none}.channel-number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;color:var(--gray);background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius-sm);transition:all var(--duration) var(--ease);position:relative;z-index:1;flex-shrink:0}.channel-logo{width:32px;height:32px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--card-border);position:relative;z-index:1;flex-shrink:0;transition:all var(--duration) var(--ease)}.channel-button.active .channel-number{background:var(--accent);border-color:var(--accent);color:var(--white)}.channel-button.active .channel-logo{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.channel-info{min-width:0;position:relative;z-index:1}.channel-name{display:block;font-size:var(--text-sm);font-weight:600;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-button.active .channel-name{color:var(--black)}.channel-description{display:block;font-size:var(--text-xs);color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-button.active .channel-description{color:var(--gray)}.live-indicator{display:flex;align-items:center;gap:4px;padding:var(--space-1) var(--space-2);background:var(--accent);border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--white);position:relative;z-index:1;flex-shrink:0}.live-indicator:before{content:"";width:5px;height:5px;background:var(--white);border-radius:var(--radius-full);animation:pulse 1s ease-in-out infinite}.visualizer{display:none}@media (max-width: 639px){.player-header{padding:var(--space-4) var(--space-4)}.now-playing{padding:var(--space-8) var(--space-4)}.album-placeholder{width:200px;height:200px}.equalizer{height:36px;gap:3px}.equalizer-bar{width:4px}.track-info h2{font-size:var(--text-2xl)}.track-info p{font-size:var(--text-base)}.controls{padding:var(--space-6)}.play-button{width:100px;height:100px}.channel-button{padding:var(--space-3) var(--space-4)}.channel-number{width:32px;height:32px;font-size:var(--text-xs)}}@media (max-width: 374px){.track-info h2{font-size:var(--text-xl)}.album-placeholder{width:100px;height:100px}.channel-button{padding:var(--space-2) var(--space-3)}.channel-number{width:28px;height:28px}}@media (min-width: 1024px){.album-placeholder{width:200px;height:200px}.equalizer{height:60px;gap:5px}.equalizer-bar{width:6px}.track-info h2{font-size:var(--text-5xl)}.play-button{width:100px;height:100px;font-size:var(--text-3xl)}.channel-button:hover .channel-number,.channel-button:hover .channel-logo{transform:translate(4px)}}@media (orientation: landscape) and (max-height: 500px){.now-playing{flex-direction:row;gap:var(--space-8);padding:var(--space-4) var(--space-6);text-align:left}.album-art{margin-bottom:0}.album-placeholder{width:80px;height:80px}.track-info h2{font-size:var(--text-xl)}.controls{padding:var(--space-3) var(--space-6)}.play-button{width:52px;height:52px;font-size:var(--text-lg)}}@supports (padding: max(0px)){.player-header{padding-top:max(var(--space-5),env(safe-area-inset-top));padding-left:max(var(--space-6),env(safe-area-inset-left));padding-right:max(var(--space-6),env(safe-area-inset-right))}.channel-button{padding-left:max(var(--space-6),env(safe-area-inset-left));padding-right:max(var(--space-6),env(safe-area-inset-right))}.channel-button:last-child{padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.play-button:focus-visible,.channel-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}