.music-page{
  --panel:rgba(10, 20, 21, .72);
  --panel-strong:rgba(8, 14, 18, .88);
  --line:rgba(224, 201, 122, .24);
  --line-hot:rgba(255, 226, 150, .5);
  --glass:rgba(176, 219, 214, .07);
  --cyan:rgba(151, 231, 222, .72);
  --violet-soft:rgba(157, 136, 199, .28);
  min-height:100vh;
  padding-top:1.35rem;
  overflow-x:hidden;
  background-image:url("../images/music-bg.webp");
  background-image:image-set(
    url("../images/music-bg.webp") type("image/webp"),
    url("../images/music-bg.png") type("image/png")
  );
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.music-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(224,201,122,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(151,231,222,.035) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 35%, #000 0 42%, transparent 78%);
}

.music-nav,
.music-hero,
.music-shell{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  max-width:100%;
}

.music-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.45rem 1.15rem;
  max-width:760px;
  margin:0 auto 2.4rem;
  padding:0 3.25rem;
}
.music-nav a{
  margin:0;
}
.music-nav a::after{
  content:"";
  display:block;
  height:1px;
  margin-top:.12rem;
  background:linear-gradient(90deg, transparent, rgba(224,201,122,.54), transparent);
}

.music-moon{
  position:fixed;
  left:clamp(.75rem, 2.6vw, 2rem);
  top:clamp(.75rem, 2.6vw, 2rem);
  width:42px;
  height:42px;
  color:var(--gold);
  z-index:4;
  opacity:.9;
  filter:drop-shadow(0 0 8px rgba(224,201,122,.55));
  animation:none;
}
.music-moon svg{ width:100%; height:100%; display:block; }

.music-hero{
  max-width:1120px;
  margin:0 auto 2rem;
  padding:0 1rem;
  text-align:left;
}
.music-hero h1{
  margin:.1rem 0 .35rem;
  text-align:left;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:.95;
}
.hero-copy{
  max-width:58rem;
  color:rgba(246,241,231,.9);
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  overflow-wrap:anywhere;
}
.eyebrow{
  margin:0 0 .25rem;
  color:var(--gold);
  font:600 .74rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.music-shell{
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}
.live-section,
.music-shell > section{
  margin:0 0 2rem;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .75rem;
}
.section-head h2{
  margin:0;
  font-size:clamp(1.35rem, 3vw, 2rem);
  line-height:1;
}
.section-kicker{
  max-width:30rem;
  margin:0;
  color:rgba(246,241,231,.72);
  text-align:right;
  font-size:.98rem;
  overflow-wrap:anywhere;
}

.music-grid,
.artist-grid,
.playlist-grid{
  display:grid;
  gap:1rem;
  min-width:0;
}
.live-grid{
  grid-template-columns:minmax(0, 1.2fr) repeat(2, minmax(230px, .9fr));
  align-items:stretch;
}
.favorites-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  min-width:0;
}
.playlist-grid{
  grid-template-columns:minmax(0, 1fr);
}
.artist-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  padding-top:4.65rem;
}

.music-card,
.fav-card,
.artist-card,
.playlist-card,
.music-actions{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 28%),
    radial-gradient(90% 90% at 100% 0%, rgba(224,201,122,.12), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--panel-strong));
  box-shadow:
    0 18px 48px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.04);
  min-width:0;
}
.music-card::before,
.fav-card::before,
.artist-card::before,
.playlist-card::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(224,201,122,.14);
  border-radius:10px;
  background:
    linear-gradient(90deg, transparent, rgba(151,231,222,.12), transparent) 0 0 / 180% 1px no-repeat,
    linear-gradient(180deg, rgba(224,201,122,.08), transparent 42%);
}
.music-card{
  min-height:210px;
  padding:1.15rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.now-card{
  padding-right:clamp(1.15rem, 8vw, 8rem);
}
.music-card__row,
.fav-card__top{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  min-width:0;
}
.music-card__copy{
  min-width:0;
  flex:1;
}
.album-cover,
.fav-cover,
.playlist-cover,
.artist-cover,
.track-cover,
.cover-fallback{
  display:block;
  flex:0 0 auto;
  border:1px solid rgba(224,201,122,.24);
  background:
    radial-gradient(circle at 35% 30%, rgba(224,201,122,.28), transparent 38%),
    linear-gradient(135deg, rgba(151,231,222,.12), rgba(0,0,0,.24));
  box-shadow:0 10px 24px rgba(0,0,0,.3), 0 0 18px rgba(224,201,122,.08);
  object-fit:cover;
  
}
.album-cover{
  width:86px;
  height:86px;
  border-radius:10px;
}
.fav-cover{
  width:82px;
  height:82px;
  border-radius:10px;
}
.playlist-cover{
  width:96px;
  height:96px;
  border-radius:12px;
}
.artist-cover,
.artist-cover.cover-fallback{
  width:86px;
  height:86px;
  border-radius:50%;
  object-fit:cover;
}
.track-cover{
  width:46px;
  height:46px;
  border-radius:8px;
}
.cover-fallback::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(224,201,122,.16) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(151,231,222,.12) 49% 51%, transparent 52%);
  background-size:14px 14px;
}
.fav-cover.cover-fallback{ width:82px; height:82px; }
.playlist-cover.cover-fallback{ width:96px; height:96px; }
.artist-cover.cover-fallback{ width:86px; height:86px; }
.track-cover.cover-fallback{ width:46px; height:46px; }
.now-card{
  border-color:var(--line-hot);
  box-shadow:0 18px 52px rgba(0,0,0,.48), 0 0 22px rgba(224,201,122,.13);
}
.card-label{
  display:inline-flex;
  margin-bottom:.55rem;
  padding:.18rem .46rem;
  border:1px solid rgba(224,201,122,.25);
  border-radius:999px;
  color:var(--gold);
  font:700 .72rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.music-card h3,
.fav-card h3,
.playlist-card h3{
  margin:.1rem 0 .35rem;
  color:var(--cream);
  font-size:clamp(1.15rem, 1.9vw, 1.45rem);
  line-height:1.12;
  overflow-wrap:anywhere;
}
.music-card p,
.fav-card p,
.playlist-card p{
  color:rgba(246,241,231,.82);
  overflow-wrap:anywhere;
}
.signal-bars{
  position:absolute;
  right:clamp(1.2rem, 4vw, 3.8rem);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:end;
  gap:4px;
  height:72px;
  width:76px;
  opacity:.9;
}
.signal-bars span{
  width:6px;
  height:38%;
  border-radius:999px 999px 3px 3px;
  background:linear-gradient(180deg, rgba(151,231,222,.78), rgba(224,201,122,.86));
  box-shadow:0 0 12px rgba(224,201,122,.25);
  animation:signal-rise 1.1s ease-in-out infinite alternate;
}
.signal-bars span:nth-child(2){ animation-duration:.82s; }
.signal-bars span:nth-child(3){ animation-duration:1.34s; }
.signal-bars span:nth-child(4){ animation-duration:.96s; }
.signal-bars span:nth-child(5){ animation-duration:1.56s; }
.signal-bars span:nth-child(6){ animation-duration:.9s; }
.signal-bars span:nth-child(7){ animation-duration:1.24s; }
.signal-bars span:nth-child(8){ animation-duration:1.02s; }
.signal-bars span:nth-child(9){ animation-duration:1.42s; }
@keyframes signal-rise{
  from{ height:22%; opacity:.48; }
  to{ height:100%; opacity:1; }
}
.micro{
  margin-bottom:auto;
  margin-top:.45rem;
  color:rgba(246,241,231,.58) !important;
  font-size:.92rem;
}
.ghost-link{
  display:inline-flex;
  margin-top:.8rem;
  color:var(--gold);
  border-bottom:1px solid rgba(224,201,122,.35);
}
.ghost-link[href="#"]{
  pointer-events:none;
  opacity:.5;
}

.fav-card{
  flex:1 1 300px;
  max-width:340px;
  min-height:0;
  padding:1rem;
  overflow:visible;
}
.fav-card > *{
  position:relative;
  z-index:2;
}
.fav-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,244,207,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 16%, rgba(151,231,222,.78) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 74%, rgba(224,201,122,.82) 0 1.5px, transparent 3px),
    radial-gradient(circle at 24% 82%, rgba(255,244,207,.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 48% 9%, rgba(224,201,122,.8) 0 1px, transparent 2.5px);
  filter:drop-shadow(0 0 7px rgba(224,201,122,.7));
  transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.fav-card:hover::after,
.fav-card:focus-within::after{
  opacity:1;
  transform:scale(1);
  animation:fav-sparkle 1.4s ease-in-out infinite alternate;
}
.fav-card:hover,
.fav-card:focus-within{
  z-index:8;
}
@keyframes fav-sparkle{
  from{ background-position:0 0, 0 0, 0 0, 0 0, 0 0; }
  to{ background-position:8px -6px, -6px 5px, 7px 6px, -5px -5px, 4px 7px; }
}
.fav-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem;
  margin:.7rem 0 0;
}
.fav-meta span{
  border:1px solid rgba(151,231,222,.18);
  border-radius:999px;
  padding:.18rem .45rem;
  color:rgba(246,241,231,.78);
  background:rgba(151,231,222,.055);
  font-size:.86rem;
}
.note-tooltip{
  position:absolute;
  z-index:30;
  width:min(28rem, calc(100vw - 2rem));
  max-width:calc(100vw - 2rem);
  padding:.85rem .95rem;
  pointer-events:none;
  color:rgba(246,241,231,.92);
  border:1px solid rgba(224,201,122,.28);
  border-radius:12px;
  background:
    radial-gradient(100% 80% at 18% 0%, rgba(224,201,122,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,14,18,.96), rgba(4,8,11,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.55), 0 0 22px rgba(224,201,122,.12);
  font-size:.96rem;
  line-height:1.42;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.note-tooltip::before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:rgba(8,14,18,.96);
  border-left:1px solid rgba(224,201,122,.28);
  border-top:1px solid rgba(224,201,122,.28);
  transform:rotate(45deg);
}
.fav-tooltip{
  top:calc(100% + .58rem);
  left:1rem;
}
.fav-tooltip::before{
  top:-6px;
  left:2rem;
}
.fav-card:hover .fav-tooltip,
.fav-card:focus-within .fav-tooltip,
.note-host:hover .artist-tooltip,
.note-host:focus-within .artist-tooltip,
.note-host:hover .track-tooltip,
.note-host:focus-visible .track-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.playlist-card{
  padding:0;
  overflow:visible;
}
.playlist-summary{
  width:100%;
  appearance:none;
  border:0;
  border-radius:14px;
  padding:1rem 1.6rem 1rem 1rem;
  display:grid;
  grid-template-columns:auto minmax(170px, .8fr) minmax(220px, 1fr) auto;
  align-items:start;
  gap:1rem;
  text-align:left;
  color:var(--cream);
  cursor:pointer;
  background:transparent;
  font:inherit;
}
.playlist-main{
  display:block;
  min-width:0;
}
.playlist-title{
  display:block;
  margin:.1rem 0 .15rem;
  color:var(--cream);
  font-size:clamp(1.25rem, 2vw, 1.65rem);
  font-weight:700;
  line-height:1.08;
}
.playlist-stats{
  display:block;
  color:rgba(246,241,231,.68);
  font-size:.94rem;
}
.playlist-note{
  display:block;
  align-self:center;
  color:rgba(246,241,231,.82);
  line-height:1.38;
}
.playlist-chevron{
  align-self:center;
  justify-self:end;
  margin-right:.35rem;
  width:.72rem;
  height:.72rem;
  border-right:2px solid rgba(224,201,122,.75);
  border-bottom:2px solid rgba(224,201,122,.75);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.playlist-card.is-open .playlist-chevron{
  transform:rotate(225deg);
}
.playlist-body{
  max-height:0;
  opacity:0;
  transform:translateY(-.25rem);
  overflow:hidden;
  transition:max-height .28s ease, opacity .2s ease, transform .2s ease;
}
.playlist-card.is-open .playlist-body{
  max-height:4200px;
  opacity:1;
  overflow:visible;
  transform:translateY(0);
}
.playlist-open{
  margin:0 1rem 1rem;
}
.track-list{
  display:grid;
  gap:.5rem;
  margin:0 1rem 1rem;
}
.track-button{
  width:100%;
  display:flex;
  position:relative;
  align-items:center;
  gap:.7rem;
  border:1px solid rgba(224,201,122,.14);
  border-radius:10px;
  padding:.65rem .75rem;
  text-align:left;
  color:var(--cream);
  background:linear-gradient(90deg, rgba(224,201,122,.08), rgba(151,231,222,.035));
}
.track-button:hover,
.track-button:focus-visible{
  border-color:rgba(224,201,122,.38);
  outline:none;
  box-shadow:0 0 0 2px rgba(224,201,122,.12);
}
.track-button span{
  display:block;
}
.track-button__copy{
  min-width:0;
  flex:1;
}
.track-button strong{
  display:block;
  font-weight:600;
}
.track-button em{
  display:block;
  color:rgba(246,241,231,.68);
  font-style:normal;
  font-size:.92rem;
}
.track-duration{
  flex:0 0 auto;
  color:rgba(246,241,231,.52);
  font-size:.88rem;
}
.track-tooltip{
  left:4.6rem;
  bottom:calc(100% + .5rem);
}
.track-tooltip::before{
  bottom:-6px;
  left:1.4rem;
  transform:rotate(225deg);
}

.artist-card{
  flex:1 1 320px;
  max-width:calc((100% - 2rem) / 3);
  overflow:visible;
  transform-origin:top left;
  will-change:transform;
  transition:
    flex-basis .46s cubic-bezier(.16,1,.3,1),
    max-width .46s cubic-bezier(.16,1,.3,1),
    box-shadow .18s ease,
    border-color .18s ease,
    transform .46s cubic-bezier(.16,1,.3,1);
}
.artist-card:hover,
.artist-card:focus-within{
  z-index:45;
}
.artist-card.is-open{
  flex-basis:100%;
  max-width:100%;
  z-index:20;
}
.artist-grid.has-open .artist-card.is-row-peer{
  flex-basis:calc(50% - .5rem);
  max-width:calc(50% - .5rem);
}
.artist-card > *{
  position:relative;
  z-index:2;
}
.artist-summary{
  width:100%;
  min-height:140px;
  appearance:none;
  border:0;
  border-radius:14px;
  padding:1rem 1.05rem;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:.9rem;
  color:var(--cream);
  cursor:pointer;
  background:transparent;
  text-align:left;
  font:inherit;
}
.artist-copy{
  display:block;
  min-width:0;
}
.artist-name{
  display:block;
  margin:.08rem 0 .25rem;
  color:var(--cream);
  font-size:clamp(1.18rem, 2.1vw, 1.55rem);
  font-weight:700;
  line-height:1.08;
  overflow-wrap:anywhere;
}
.artist-genres{
  display:block;
  color:rgba(246,241,231,.62);
  font-size:.88rem;
  line-height:1.3;
}
.artist-plus{
  width:1rem;
  height:1rem;
  position:relative;
  margin-left:.25rem;
  opacity:.85;
}
.artist-plus::before,
.artist-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:2px;
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 10px rgba(224,201,122,.35);
  transform:translate(-50%, -50%);
  transition:transform .18s ease;
}
.artist-plus::after{
  transform:translate(-50%, -50%) rotate(90deg);
}
.artist-card.is-open .artist-plus::after{
  transform:translate(-50%, -50%) rotate(0deg);
}
.artist-tooltip{
  position:absolute;
  z-index:60;
  display:block;
  box-sizing:border-box;
  left:50%;
  top:0;
  bottom:auto;
  width:min(18rem, calc(100vw - 2rem));
  color:rgba(45, 28, 10, .9);
  border-color:rgba(226, 202, 130, .46);
  background:
    radial-gradient(110% 90% at 18% 0%, rgba(255, 248, 210, .66), transparent 66%),
    linear-gradient(180deg, rgba(222, 190, 108, .78), rgba(128, 92, 46, .72));
  box-shadow:
    0 18px 42px rgba(0,0,0,.44),
    0 0 16px rgba(224, 201, 122, .18),
    inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
  backdrop-filter:blur(8px) saturate(125%);
  font-size:.9rem;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:normal;
  transform:translate(-50%, calc(-100% - .35rem));
}
.artist-card.is-open .artist-tooltip{
  display:none;
}
.artist-tooltip::before{
  bottom:-6px;
  left:50%;
  background:rgba(128, 92, 46, .72);
  border-color:rgba(226, 202, 130, .46);
  transform:translateX(-50%) rotate(225deg);
}
.artist-tooltip::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(73, 43, 9, .18);
  border-radius:9px;
}
.note-host:hover .artist-tooltip,
.note-host:focus-within .artist-tooltip{
  transform:translate(-50%, calc(-100% - .75rem));
}
.artist-body{
  max-height:0;
  opacity:0;
  transform:translateY(-.2rem);
  overflow:hidden;
  transition:max-height .42s cubic-bezier(.16,1,.3,1), opacity .22s ease, transform .28s ease;
}
.artist-card.is-open .artist-body{
  max-height:min(62vh, 620px);
  opacity:1;
  overflow:hidden;
  transform:translateY(0);
}
.artist-song-list{
  display:grid;
  gap:.45rem;
  padding:0 1rem 1rem;
  max-height:min(50vh, 490px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(224,201,122,.45) transparent;
  mask-image:linear-gradient(to bottom, transparent 0, black .75rem, black calc(100% - 1rem), transparent 100%);
}
.artist-song-list::-webkit-scrollbar{
  width:8px;
}
.artist-song-list::-webkit-scrollbar-track{
  background:transparent;
}
.artist-song-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(224,201,122,.38);
}
.artist-song{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.58rem .65rem;
  border:1px solid rgba(224,201,122,.14);
  border-radius:10px;
  color:var(--cream);
  background:linear-gradient(90deg, rgba(224,201,122,.075), rgba(151,231,222,.035));
}
.artist-song:hover,
.artist-song:focus-visible{
  outline:none;
  border-color:rgba(224,201,122,.38);
  box-shadow:0 0 0 2px rgba(224,201,122,.12);
}
.artist-song span{
  min-width:0;
}
.artist-song strong,
.artist-song em{
  display:block;
  overflow-wrap:anywhere;
}
.artist-song strong{
  font-weight:600;
}
.artist-song em{
  color:rgba(246,241,231,.64);
  font-style:normal;
  font-size:.88rem;
}
.artist-open{
  margin:0 1rem 1rem;
}

.music-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:1.25rem;
  padding:1rem;
}
.music-button{
  appearance:none;
  border:1px solid rgba(224,201,122,.38);
  border-radius:999px;
  padding:.62rem .95rem;
  color:#120f08;
  background:linear-gradient(180deg, #f0dc95, #c8aa53);
  font:700 .92rem/1 ui-sans-serif, system-ui, sans-serif;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.28), 0 0 16px rgba(224,201,122,.12);
}
.music-button.secondary{
  color:var(--gold);
  background:rgba(224,201,122,.08);
}
.music-button:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.spotify-status{
  flex:1 1 280px;
  min-width:0;
  color:rgba(246,241,231,.74);
  font-size:.94rem;
  overflow-wrap:anywhere;
}
.spotify-status code{
  color:var(--gold);
}

body.night.music-page .music-card,
body.night.music-page .fav-card,
body.night.music-page .artist-card,
body.night.music-page .playlist-card,
body.night.music-page .music-actions{
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(90% 90% at 100% 0%, rgba(224,201,122,.08), transparent 55%),
    linear-gradient(180deg, rgba(5, 9, 13, .86), rgba(3, 6, 10, .94));
}

@media (max-width:820px){
  .live-grid,
  .playlist-grid{
    grid-template-columns:1fr;
  }
  .music-card{
    min-height:175px;
  }
  .section-head{
    align-items:flex-start;
  }
  .section-kicker{
    text-align:left;
  }
}
@media (max-width:680px){
  .music-page{
    background-attachment:scroll;
    padding-top:.8rem;
  }
  .music-nav,
  .music-hero,
  .music-shell{
    width:100%;
    max-width:100%;
  }
  .music-nav{
    justify-content:center;
    margin:0 0 2rem;
    padding:0 3.65rem;
    gap:.5rem .8rem;
  }
  .music-moon{
    position:absolute;
    left:.85rem;
    top:.8rem;
  }
  .music-hero h1{
    text-align:center;
  }
  .music-hero{
    margin-bottom:1.45rem;
    padding:0 .85rem;
    text-align:center;
  }
  .hero-copy{
    max-width:100%;
    text-align:center;
    font-size:clamp(1rem, 4.7vw, 1.12rem);
  }
  .music-shell{
    padding:0 .85rem;
  }
  .section-head{
    display:block;
  }
  .section-kicker{
    max-width:100%;
    margin-top:.25rem;
  }
  .music-grid,
  .artist-grid,
  .playlist-grid{
    grid-template-columns:minmax(0, 1fr);
  }
  .artist-grid{
    display:grid;
  }
  .favorites-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
  }
  .music-card,
  .fav-card,
  .artist-card,
  .playlist-card{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    border-radius:12px;
  }
  .music-card__row,
  .fav-card__top,
  .playlist-top{
    gap:.7rem;
  }
  .album-cover{
    width:70px;
    height:70px;
  }
  .fav-cover,
  .fav-cover.cover-fallback{
    width:68px;
    height:68px;
  }
  .playlist-cover,
  .playlist-cover.cover-fallback{
    width:76px;
    height:76px;
  }
  .artist-cover,
  .artist-cover.cover-fallback{
    width:76px;
    height:76px;
  }
  .music-card h3,
  .fav-card h3,
  .playlist-card h3{
    font-size:clamp(1.08rem, 5.2vw, 1.32rem);
  }
  .now-card{
    padding-right:1rem;
  }
  .signal-bars{
    position:static;
    transform:none;
    height:30px;
    width:100%;
    justify-content:center;
    margin-top:.65rem;
  }
  .fav-tooltip,
  .artist-tooltip,
  .track-tooltip{
    left:.75rem;
    right:.75rem;
    width:auto;
    max-width:none;
  }
  .artist-tooltip{
    left:50%;
    right:auto;
    width:min(20rem, calc(100vw - 1.5rem));
  }
  .artist-grid.has-open .artist-card.is-row-peer{
    flex-basis:100%;
    max-width:none;
  }
  .playlist-summary{
    grid-template-columns:auto minmax(0, 1fr) auto;
    padding-right:1.35rem;
  }
  .playlist-note{
    grid-column:1 / -1;
  }
  .playlist-chevron{
    grid-column:3;
    grid-row:1;
  }
  .track-duration{
    display:none;
  }
  .music-actions{
    box-sizing:border-box;
    width:100%;
  }
}
@media (prefers-reduced-motion:reduce){
  .note-tooltip,
  .playlist-body,
  .artist-body,
  .artist-card,
  .playlist-chevron,
  .artist-plus::before,
  .artist-plus::after,
  .fav-card::after{
    transition:none;
  }
  .signal-bars span,
  .fav-card:hover::after,
  .fav-card:focus-within::after{
    animation:none;
  }
}