*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark;--app-pad-x: 1.25rem;--app-pad-top: 1.5rem;--bg: #f6f5f8;--bg-elevated: #ffffff;--fg: #16121f;--fg-muted: #5b5468;--accent: #ff2e63;--accent-2: #6c5ce7;--border: rgba(22, 18, 31, .08);--shadow: 0 8px 24px rgba(22, 18, 31, .08);--hero-grad: radial-gradient(circle at 20% 0%, rgba(255, 46, 99, .18), transparent 55%), radial-gradient(circle at 80% 10%, rgba(108, 92, 231, .18), transparent 55%)}@media(prefers-color-scheme:dark){:root{--bg: #0f0a1a;--bg-elevated: #181126;--fg: #f5f1ff;--fg-muted: #b5acc7;--border: rgba(245, 241, 255, .08);--shadow: 0 8px 24px rgba(0, 0, 0, .4);--hero-grad: radial-gradient(circle at 20% 0%, rgba(255, 46, 99, .28), transparent 55%), radial-gradient(circle at 80% 10%, rgba(108, 92, 231, .32), transparent 55%)}}body{min-height:100dvh;background-color:var(--bg);color:var(--fg)}#app{max-width:1200px;margin-inline:auto;padding:var(--app-pad-top) var(--app-pad-x) 4rem}@media(min-width:768px){:root{--app-pad-x: 2rem;--app-pad-top: 2rem}#app{padding-bottom:5rem}}a{color:var(--accent);text-decoration:none}a:hover,a:focus-visible{text-decoration:underline}.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;margin-top:calc(var(--app-pad-top) * -1);margin-inline:calc(var(--app-pad-x) * -1);margin-bottom:1.5rem;padding:.75rem var(--app-pad-x);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.site-nav{background:var(--bg)}}.site-nav__brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;letter-spacing:.01em;color:var(--fg);text-decoration:none}.site-nav__brand:hover,.site-nav__brand:focus-visible{text-decoration:none}.site-nav__logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border-radius:.625rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 4px 12px #ff2e634d}.trending__hero{background-image:var(--hero-grad);border-radius:1.25rem;padding:2rem 1.5rem;margin-bottom:2rem;border:1px solid var(--border)}@media(min-width:768px){.trending__hero{padding:3rem 2.5rem}}.trending__title{font-size:clamp(1.75rem,3.5vw + 1rem,3rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}.trending__subtitle{margin-top:.75rem;color:var(--fg-muted);max-width:50ch;font-size:1.05rem}.trending__state{background:var(--bg-elevated);border:1px solid var(--border);border-radius:1rem;padding:3rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}.trending__state h2{font-size:1.25rem}.trending__state--error h2{color:var(--accent)}.trending__spinner{width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:trending-spin .9s linear infinite}@keyframes trending-spin{to{transform:rotate(360deg)}}.trending__retry{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:.65rem 1.5rem;font-weight:600;cursor:pointer;margin-top:.5rem}.trending__retry:hover,.trending__retry:focus-visible{background:var(--accent-2)}.trending__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:.75rem}@media(min-width:640px){.trending__list{grid-template-columns:repeat(2,1fr);gap:1rem}}@media(min-width:1024px){.trending__list{grid-template-columns:repeat(3,1fr)}}.song-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:1rem;padding:.875rem;display:grid;grid-template-columns:auto 80px 1fr;gap:.875rem;align-items:center;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}.song-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #16121f1f}.song-card__rank{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.5rem;color:var(--fg-muted);min-width:2.25rem;text-align:center}.song-card:nth-child(1) .song-card__rank,.song-card:nth-child(2) .song-card__rank,.song-card:nth-child(3) .song-card__rank{color:var(--accent)}.song-card__art{position:relative;width:80px;height:80px;border-radius:.625rem;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}.song-card__art img{width:100%;height:100%;object-fit:cover}.song-card__art-placeholder{font-size:2rem;color:var(--fg-muted)}.song-card__art--button{border:none;padding:0;cursor:pointer;color:inherit;font:inherit;appearance:none}.song-card__art--button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.song-card__art-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000059;color:#fff;opacity:0;transition:opacity .15s ease,background .15s ease}.song-card__art-overlay svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.song-card__art--button:hover .song-card__art-overlay,.song-card__art--button:focus-visible .song-card__art-overlay,.song-card__art--playing .song-card__art-overlay{opacity:1}.song-card__art--playing .song-card__art-overlay{background:#ff2e638c}@media(hover:none){.song-card__art-overlay{opacity:1;background:#00000047}}.song-card--playing{border-color:var(--accent);box-shadow:0 12px 28px #ff2e6338}.song-card__body{min-width:0;display:flex;flex-direction:column;gap:.15rem}.song-card__title{font-size:1rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card__artist{color:var(--fg-muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card__album{color:var(--fg-muted);font-size:.8rem;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;align-items:center}.song-card__link{font-size:.8rem;font-weight:600}
