:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.art-container[data-v-c11b4c11],.meta-container[data-v-c11b4c11]{position:relative;display:grid;place-items:center}.art-frame[data-v-c11b4c11],.meta[data-v-c11b4c11]{grid-area:1 / 1;width:100%;backface-visibility:hidden}.art-crossfade-enter-active[data-v-c11b4c11],.art-crossfade-leave-active[data-v-c11b4c11]{transition:opacity 6s ease-in-out,filter 6s ease-in-out}.art-crossfade-enter-from[data-v-c11b4c11]{opacity:0;filter:blur(15px) saturate(1.5)}.art-crossfade-leave-to[data-v-c11b4c11]{opacity:0;filter:blur(15px) grayscale(1)}.meta-crossfade-enter-active[data-v-c11b4c11],.meta-crossfade-leave-active[data-v-c11b4c11]{transition:opacity 5s ease-in-out,transform 5s ease-in-out}.meta-crossfade-enter-from[data-v-c11b4c11]{opacity:0;transform:scale(.95)}.meta-crossfade-leave-to[data-v-c11b4c11]{opacity:0;transform:scale(1.05)}.bg-bar[data-v-c11b4c11]{flex:1;background:linear-gradient(to top,#9d4edd,#f0209c);height:100%;transform-origin:bottom;animation:bg-pulse-c11b4c11 var(--duration) infinite ease-in-out;mix-blend-mode:screen}.bg-bar[data-v-c11b4c11]:nth-child(n+7):nth-child(-n+14){filter:saturate(1.8) brightness(1.2);animation-duration:calc(var(--duration) * 1.3)}.bg-bar[data-v-c11b4c11]:nth-child(3n){animation-direction:alternate-reverse;background:linear-gradient(to top,#f0209c,#4ade80)}.bg-bar[data-v-c11b4c11]:nth-child(4n){animation-delay:-.8s}.bg-bar[data-v-c11b4c11]:nth-child(odd){animation-delay:-.3s}@keyframes bg-pulse-c11b4c11{0%,to{transform:scaleY(.2) skew(-5deg);opacity:.4}50%{transform:scaleY(calc(.5 + var(--height-factor))) skew(5deg);opacity:1}}.page-wrapper[data-v-c11b4c11]{position:fixed;inset:0;height:100dvh;width:100vw;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 10% 10%,#1a102e,#0f0a1a);font-family:Inter,sans-serif;color:#fff;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);opacity:0;transition:opacity 1s ease}.page-wrapper.is-visible[data-v-c11b4c11]{opacity:1}.shell[data-v-c11b4c11]{width:100%;max-width:400px;background:#ffffff08;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.1);border-radius:40px;box-shadow:0 30px 60px #00000080;display:flex;flex-direction:column;overflow:hidden}.card-header[data-v-c11b4c11]{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;background:#0003}.brand-group[data-v-c11b4c11]{display:flex;align-items:center;gap:10px}.logo-square[data-v-c11b4c11]{width:36px;height:36px;background:linear-gradient(135deg,#f0209c,#9d4edd);border-radius:10px;display:flex;align-items:center;justify-content:center}.logo-square img[data-v-c11b4c11]{width:75%;height:75%}.brand-text h1[data-v-c11b4c11]{font-size:1rem;margin:0;font-weight:800}.brand-text p[data-v-c11b4c11]{font-size:.7rem;margin:0;color:#ffffff80}.status[data-v-c11b4c11]{padding:4px 10px;border-radius:20px;font-size:.6rem;font-weight:800;background:#0000004d;display:flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.1)}.status--live[data-v-c11b4c11]{color:#4ade80;border-color:#4ade804d;box-shadow:0 0 12px #4ade801a;animation:live-glow-c11b4c11 2s infinite ease-in-out}.dot[data-v-c11b4c11]{width:5px;height:5px;border-radius:50%;background:currentColor}@keyframes live-glow-c11b4c11{0%,to{border-color:#4ade8033}50%{border-color:#4ade8080}}.card-body[data-v-c11b4c11]{padding:20px;text-align:center;display:flex;flex-direction:column;flex:1;justify-content:space-around}.art-container[data-v-c11b4c11]{width:min(220px,45vh);height:min(220px,45vh);margin:0 auto}.art-frame[data-v-c11b4c11]{width:100%;height:100%;border-radius:24px;overflow:hidden;box-shadow:0 10px 25px #0006;border:1px solid rgba(255,255,255,.1)}.art-frame img[data-v-c11b4c11]{width:100%;height:100%;object-fit:cover}.art-placeholder[data-v-c11b4c11]{width:100%;height:100%;background:#ffffff0d;display:flex;align-items:center;justify-content:center}.track-name[data-v-c11b4c11]{font-size:1.25rem;margin:15px 0 0;font-weight:800;line-height:1.2}.artist-name[data-v-c11b4c11]{font-size:.95rem;color:#ffffffb3;margin:4px 0 10px}.album-name[data-v-c11b4c11]{font-size:.75rem;color:#ffffff4d;font-style:italic}.controls[data-v-c11b4c11]{display:flex;gap:10px;margin-top:15px}.btn-play[data-v-c11b4c11]{position:relative;flex:1;background:linear-gradient(135deg,#f0209c,#9d4edd);border-radius:18px;border:none;display:flex;align-items:center;justify-content:center;height:56px;color:#fff;cursor:pointer;overflow:hidden}.btn-play.is-playing-state[data-v-c11b4c11]{background:#120c1f}.btn-bg-wave[data-v-c11b4c11]{position:absolute;inset:-5px;display:flex;align-items:flex-end;z-index:1}.btn-frost[data-v-c11b4c11]{position:absolute;inset:0;z-index:2;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);background:radial-gradient(circle,#1a102e33,#1a102e99)}.btn-content[data-v-c11b4c11]{position:relative;z-index:10;display:flex;align-items:center;gap:10px}.btn-reconnect[data-v-c11b4c11]{width:56px;background:#ffffff1a;border-radius:18px;border:none;color:#fff;cursor:pointer;height:56px}.footer-hint[data-v-c11b4c11]{margin-top:12px;font-size:.6rem;color:#fff3}.spinner[data-v-c11b4c11]{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin-c11b4c11 .8s linear infinite}@keyframes spin-c11b4c11{to{transform:rotate(360deg)}}@media(max-width:480px){.page-wrapper[data-v-c11b4c11]{padding:0}.shell[data-v-c11b4c11]{height:100dvh;border-radius:0}.card-body[data-v-c11b4c11]{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}}