:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--glow-sens:30;--card-bg:linear-gradient(8deg,var(--dark)75%,color-mix(in hsl,var(--dark),white 2.5%)75.5%);--blend:soft-light;--glow-blend:plus-lighter;--glow-color:40deg 80% 80%;--glow-boost:0%;--dark:#1d1924;--fg:white}body{color:#fff;background:#1d1924;place-items:center;min-height:100vh;margin:0;font-family:system-ui,-apple-system,sans-serif;display:grid;overflow-x:hidden}.card{--pads:30px;--color-sens:calc(var(--glow-sens) + 20);--pointer-x:50%;--pointer-y:50%;--pointer-deg:45deg;--pointer-d:0;isolation:isolate;background:var(--card-bg);background-repeat:no-repeat;border:1px solid #ffffff40;border-radius:1.768em;flex-direction:column;width:320px;min-height:450px;transition:transform .2s;display:flex;position:relative;box-shadow:0 10px 30px #0000004d,0 4px 8px #0000001a}.card:before,.card:after,.card>.glow{content:"";border-radius:inherit;z-index:-1;pointer-events:none;transition:opacity .25s ease-out;position:absolute;inset:0}.card:before{background:linear-gradient(var(--card-bg)0 100%)padding-box,linear-gradient(#fff0 0% 100%)border-box,radial-gradient(at 80% 55%,#be85ff 0px,transparent 50%)border-box,radial-gradient(at 69% 34%,#ff7a93 0px,transparent 50%)border-box,radial-gradient(at 8% 6%,#8fffad 0px,transparent 50%)border-box,linear-gradient(#c299ff 0 100%)border-box;opacity:calc((var(--pointer-d) - var(--color-sens))/(100 - var(--color-sens)));-webkit-mask-image:conic-gradient(from var(--pointer-deg)at center,black 25%,transparent 40%,transparent 60%,black 75%);mask-image:conic-gradient(from var(--pointer-deg)at center,black 25%,transparent 40%,transparent 60%,black 75%);border:1px solid #0000}.card:after{-webkit-mask-image:linear-gradient(to bottom,black,black),conic-gradient(from var(--pointer-deg)at center,transparent 5%,black 15%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,black,black),conic-gradient(from var(--pointer-deg)at center,transparent 5%,black 15%,black 85%,transparent 95%);opacity:calc((var(--pointer-d) - var(--color-sens))/(100 - var(--color-sens)));mix-blend-mode:var(--blend);background:radial-gradient(at 80% 55%,#be85ff 0,#0000 50%) padding-box padding-box,radial-gradient(at 69% 34%,#ff7a93 0,#0000 50%) padding-box padding-box,radial-gradient(at 8% 6%,#8fffad 0,#0000 50%) padding-box padding-box,linear-gradient(#c299ff 0 100%) padding-box padding-box;-webkit-mask-composite:source-out,source-over;mask-composite:subtract,add}.card>.glow{--outset:var(--pads);inset:calc(var(--outset)*-1);-webkit-mask-image:conic-gradient(from var(--pointer-deg)at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask-image:conic-gradient(from var(--pointer-deg)at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:calc((var(--pointer-d) - var(--glow-sens))/(100 - var(--glow-sens)));mix-blend-mode:var(--glow-blend)}.card>.glow:before{content:"";inset:var(--outset);border-radius:inherit;box-shadow:inset 0 0 0 1px hsl(var(--glow-color)/100%),0 0 25px 2px hsl(var(--glow-color)/calc(var(--glow-boost) + 20%));position:absolute}.inner{z-index:2;flex-direction:column;height:100%;padding:2em;display:flex}header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}header h2{letter-spacing:1px;text-transform:uppercase;color:#fffc;margin:0;font-size:1.1em;font-weight:600}.album-cover{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%;margin-bottom:20px;transition:transform .3s;box-shadow:0 8px 20px #0006}.album-cover:hover{transform:scale(1.02)}.song-info h2{white-space:nowrap;text-overflow:ellipsis;margin:0 0 5px;font-size:1.4em;overflow:hidden}.song-info p{color:#b3b3b3;margin:0;font-size:1em}.login-btn,.spotify-btn{color:#fff;cursor:pointer;background:#1db954;border:none;border-radius:30px;margin-top:auto;padding:12px 24px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-block}.login-btn:hover,.spotify-btn:hover{background:#1ed760;transform:scale(1.05);box-shadow:0 0 15px #1db95480}.logout-btn{color:#fff9;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:10px;margin-top:15px;padding:5px 10px;font-size:.7em}.logout-btn:hover{color:#fff;border-color:#fff}.loading-pulse{animation:2s infinite pulse}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}