/* ASTROMER / Astro Dot invites the audience into one real featured song. */
#top.hero{isolation:isolate}
#top .hero-featured-track{
 position:absolute;z-index:5;top:clamp(160px,18svh,220px);left:50%;
 width:min(510px,calc(100% - 42px));min-height:91px;transform:translateX(-50%);
 display:flex;align-items:center;gap:15px;padding:10px 23px 10px 8px;
 border:1px solid rgba(230,241,246,.42);
 background:linear-gradient(113deg,rgba(12,17,21,.9),rgba(17,22,26,.8) 58%,rgba(5,7,9,.9));
 backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);
 color:#f3f5f5;text-align:left;cursor:pointer;
 box-shadow:0 20px 60px #000b,0 0 80px #d5e5ec09;isolation:isolate;
 transition:border-color .35s,box-shadow .4s,transform .4s
}
#top .hero-featured-track:hover{
 border-color:#fff9;box-shadow:0 20px 65px #000b,0 0 33px #e8f3f42a;
 transform:translateX(-50%) translateY(-3px)
}
#top .hero-featured-track:focus-visible{outline:2px solid #f9feff;outline-offset:5px}
#top .hero-featured-track::before{
 content:"";pointer-events:none;position:absolute;inset:0;
 background:linear-gradient(90deg,transparent,#e2f1f49a,transparent) 0 0/225% 1px no-repeat;
 animation:astro-featured-lightline 9s ease-in-out infinite
}
@keyframes astro-featured-lightline{0%,17%,100%{background-position:210% 0;opacity:.15}52%,77%{background-position:-210% 0;opacity:.9}}
#top .hero-featured-avatar{
 display:grid;place-items:center;flex:0 0 78px;align-self:stretch;min-height:74px;
 background:radial-gradient(ellipse at 50% 47%,rgba(234,245,250,.15),transparent 64%);
 border-right:1px solid #d7e2e626;overflow:visible
}
#top .hero-featured-avatar img{
 display:block;width:58px;height:72px;object-fit:contain;filter:grayscale(1) drop-shadow(0 4px 11px #e5f3ff30);
 animation:astro-featured-float 4.2s ease-in-out infinite
}
@keyframes astro-featured-float{0%,100%{transform:translateY(1px) rotate(-7deg)}55%{transform:translateY(-6px) rotate(4deg)}}
#top .hero-featured-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
#top .hero-featured-meta{
 font:400 8px/1.3 'Space Grotesk',Arial,sans-serif;
 letter-spacing:.2em;color:#a8b6bb
}
#top .hero-featured-pulse{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;vertical-align:middle;margin:0 6px;box-shadow:0 0 13px #f4faff;animation:astro-featured-pulse 1.8s infinite}
@keyframes astro-featured-pulse{0%,100%{opacity:.25;transform:scale(.8)}45%{opacity:1;transform:scale(1.4)}}
#top .hero-featured-copy strong{
 color:#f4f7f7;font:400 clamp(13px,1.3vw,18px)/1.35 'Space Grotesk',Arial,sans-serif;
 letter-spacing:-.025em;white-space:normal
}
#top .hero-featured-track-name{
 color:#c4cdd1;font:400 9px/1.2 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em
}
#top .hero-featured-arrow{
 display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;
 border:1px solid #ecf3f44f;font:400 23px/1 Arial,sans-serif;transition:color .3s,background .3s,transform .3s
}
#top .hero-featured-track:hover .hero-featured-arrow{background:#f2f6f6;color:#0c1012;transform:translate(2px,-2px)}
@media(max-width:700px){
 #top .hero-featured-track{top:clamp(154px,21svh,185px);width:calc(100% - 36px);min-height:79px;gap:7px;padding:7px 12px 7px 4px}
 #top .hero-featured-avatar{flex-basis:65px;min-height:63px}
 #top .hero-featured-avatar img{width:49px;height:61px}
 #top .hero-featured-meta{font-size:7px;letter-spacing:.1em}
 #top .hero-featured-copy strong{font-size:clamp(12px,3.4vw,16px)}
 #top .hero-featured-track-name{font-size:8px;letter-spacing:.08em}
 #top .hero-featured-arrow{flex-basis:27px;width:27px;height:27px;font-size:17px}
}
@media(max-width:360px){#top .hero-featured-avatar{flex-basis:44px}#top .hero-featured-avatar img{width:38px}#top .hero-featured-meta{font-size:6px}}
@media(max-height:650px){#top .hero-featured-track{top:124px;min-height:67px}#top .hero-featured-avatar{min-height:55px}#top .hero-featured-avatar img{height:54px}}
@media(prefers-reduced-motion:reduce){#top .hero-featured-avatar img,#top .hero-featured-pulse,#top .hero-featured-track::before{animation:none!important}}