:root{--a:#06060a;--b:rgba(255,255,255,.02);--c:rgba(255,255,255,.06);--d:#e8e8ec;--e:rgba(255,255,255,.5);--f:rgba(255,255,255,.3);--g:#00fff2;--h:#ff00aa;--i:#8b5cf6;--j:rgba(0,255,242,.15);--k:rgba(255,0,170,.12)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:'Outfit',-apple-system,sans-serif;min-height:100vh;min-height:100dvh;background:var(--a);color:var(--d);display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:hidden}.atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#06060a 0%,#12081a 50%,#0a1018 100%);background-size:400% 400%;animation:gs 20s ease infinite}@keyframes gs{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.atmosphere::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse 60% 40% at 25% 30%,var(--k),transparent 50%),radial-gradient(ellipse 50% 50% at 75% 70%,var(--j),transparent 45%),radial-gradient(ellipse 40% 40% at 50% 90%,rgba(139,92,246,.08),transparent 40%);animation:dr 25s ease-in-out infinite alternate}.atmosphere::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none}@keyframes dr{0%{transform:translate(0,0) rotate(0) scale(1)}100%{transform:translate(-3%,3%) rotate(2deg) scale(1.05)}}.orb{position:fixed;border-radius:50%;filter:blur(60px);opacity:.3;pointer-events:none;z-index:-1}.orb-1{width:400px;height:400px;background:radial-gradient(circle,var(--h),transparent 70%);top:-10%;left:-5%;animation:f1 18s ease-in-out infinite}.orb-2{width:350px;height:350px;background:radial-gradient(circle,var(--g),transparent 70%);bottom:-10%;right:-5%;animation:f2 22s ease-in-out infinite}.orb-3{width:250px;height:250px;background:radial-gradient(circle,var(--i),transparent 70%);top:50%;left:60%;animation:f3 20s ease-in-out infinite}@keyframes f1{0%,100%{transform:translate(0,0) scale(1);opacity:.25}33%{transform:translate(50px,30px) scale(1.1);opacity:.4}66%{transform:translate(20px,-20px) scale(.95);opacity:.3}}@keyframes f2{0%,100%{transform:translate(0,0) scale(1);opacity:.3}50%{transform:translate(-40px,-30px) scale(1.15);opacity:.45}}@keyframes f3{0%,100%{transform:translate(0,0) scale(1);opacity:.2}33%{transform:translate(-30px,40px) scale(1.1);opacity:.35}66%{transform:translate(20px,-30px) scale(.9);opacity:.25}}.grid-overlay{position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 10%,transparent 70%);opacity:.5}.container{width:100%;max-width:630px;position:relative;z-index:1;zoom:1.5;-moz-transform:scale(1.5);-moz-transform-origin:center center}.header{text-align:center;margin-bottom:48px;animation:fi 1s ease-out}.logo{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--d);margin-bottom:12px;position:relative;display:inline-block}.logo::before{content:'';position:absolute;top:50%;left:-40px;width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--g))}.logo::after{content:'';position:absolute;top:50%;right:-40px;width:24px;height:1px;background:linear-gradient(90deg,var(--h),transparent)}.tagline{font-size:.7rem;font-weight:300;color:var(--f);letter-spacing:.25em;text-transform:uppercase}.player-card{background:var(--b);border:1px solid var(--c);border-radius:20px;padding:40px 32px;position:relative;animation:su .8s ease-out .2s both;backdrop-filter:blur(40px)}.player-card::before{content:'';position:absolute;inset:-1px;border-radius:21px;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,transparent 30%,transparent 70%,rgba(0,255,242,.05) 100%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.status-display{display:flex;align-items:center;justify-content:center;gap:12px;height:72px;margin-bottom:32px}.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--f);transition:all .4s ease}.status-display.live .status-indicator{background:var(--g);box-shadow:0 0 12px var(--g),0 0 24px var(--j);animation:pd 2s ease-in-out infinite}.status-display.connecting .status-indicator{background:var(--h);animation:pd 1s ease-in-out infinite}@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.status-text{font-family:'Space Mono',monospace;font-size:1.4rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--f);transition:all .4s ease}.status-display.live .status-text{color:var(--g);text-shadow:0 0 30px var(--j)}.status-display.connecting .status-text{color:var(--h);animation:pu 1.5s ease-in-out infinite}.status-display.paused .status-text{color:var(--e)}@keyframes pu{0%,100%{opacity:.6}50%{opacity:1}}.controls{display:flex;align-items:center;justify-content:center;margin-bottom:32px}.play-btn{width:72px;height:72px;border-radius:50%;border:1px solid var(--c);background:rgba(255,255,255,.02);color:var(--d);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.play-btn::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--h));opacity:0;transition:opacity .3s ease;z-index:-1;filter:blur(12px)}.play-btn:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05);transform:scale(1.05)}.play-btn:hover::before{opacity:.4}.play-btn:active{transform:scale(.98)}.play-btn.playing{border-color:var(--g);box-shadow:0 0 30px var(--j),inset 0 0 20px rgba(0,255,242,.05)}.play-btn.playing::before{opacity:.3;animation:gp 3s ease-in-out infinite}.play-btn.connecting{border-color:var(--h);box-shadow:0 0 30px var(--k),inset 0 0 20px rgba(255,0,170,.05);cursor:wait}.play-btn.connecting::before{opacity:.3;background:var(--h);animation:gp 1.5s ease-in-out infinite}@keyframes gp{0%,100%{opacity:.2;filter:blur(12px)}50%{opacity:.5;filter:blur(16px)}}.play-icon{transition:transform .2s ease}.volume-control{display:flex;align-items:center;gap:14px;margin-bottom:32px;padding:0 8px}.mute-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--c);background:0 0;color:var(--e);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.mute-btn:hover{border-color:rgba(255,255,255,.12);color:var(--d)}.mute-btn.muted{color:var(--f)}.volume-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.08);border-radius:2px;outline:0;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--d);border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.3)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px var(--j)}.volume-slider::-moz-range-thumb{width:14px;height:14px;background:var(--d);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}.now-playing{padding-top:24px;border-top:1px solid var(--c)}.now-playing-label{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f);margin-bottom:12px}.track-info{display:flex;align-items:flex-start;gap:12px}.track-indicator{width:3px;height:36px;background:linear-gradient(180deg,var(--g),var(--h));border-radius:2px;flex-shrink:0;opacity:.6;margin-top:2px}.track-details{min-width:0;flex:1}.track-title{font-weight:500;font-size:.95rem;color:var(--d);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:.8rem;color:var(--e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer{text-align:center;margin-top:40px;animation:fi 1s ease-out .5s both}.social-links{display:flex;justify-content:center;gap:16px;margin-bottom:20px}.social-link{width:40px;height:40px;border-radius:10px;border:1px solid var(--c);background:0 0;display:flex;align-items:center;justify-content:center;color:var(--e);text-decoration:none;transition:all .2s ease}.social-link:hover{border-color:rgba(255,255,255,.12);color:var(--d);transform:translateY(-2px)}.social-link svg{width:18px;height:18px}.copyright{font-size:.65rem;color:var(--f);letter-spacing:.1em}@keyframes fi{from{opacity:0}to{opacity:1}}@keyframes su{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:720px){.container{zoom:1;-moz-transform:scale(1);max-width:420px}}@media(max-width:480px){body{padding:16px}.logo{font-size:.95rem}.logo::before,.logo::after{display:none}.player-card{padding:32px 24px}.play-btn{width:64px;height:64px}.orb-1,.orb-2,.orb-3{opacity:.2}}