.audio-player {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1rem 1.1rem;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 14px 30px rgba(7, 25, 39, .15);
}

.player-toggle {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}

.player-toggle:hover { background: #22acd7; }
.player-meta { display: flex; align-items: baseline; gap: .75rem; }
.player-meta p { margin: 0; color: var(--blue2); font-size: .55rem; text-transform: uppercase; letter-spacing: .13em; }
.player-meta strong { font: 600 1.15rem var(--cond); text-transform: uppercase; }
.player-timeline { display: grid; grid-template-columns: 36px 1fr 36px; gap: .65rem; align-items: center; margin-top: .45rem; }
.player-timeline span { color: rgba(255,255,255,.62); font-size: .55rem; font-variant-numeric: tabular-nums; }
.player-progress, .player-volume { accent-color: var(--blue); cursor: pointer; }
.player-progress { width: 100%; height: 4px; }
.volume-control { display: flex; align-items: center; gap: .45rem; color: var(--blue2); }
.player-volume { width: 68px; }

.track-preview { margin-top: 0; }
.track-button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto 26px;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid #bac7cd;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.track-button:hover, .track-button.selected { color: #087da4; }
.track-number, .track-button i { color: var(--muted); font-size: .65rem; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }
.track-button strong { font: 600 1.1rem var(--cond); text-transform: uppercase; }
.track-button b { color: var(--blue); font-size: .7rem; }
.track-button.playing b { animation: pulse-play 1s ease-in-out infinite; }

body.has-featured-player { padding-bottom: 94px; }
.featured-player {
  position: fixed;
  z-index: 100;
  inset: auto 0 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 70px 48px minmax(180px, .8fr) minmax(260px, 1.5fr) auto auto;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  padding: .7rem clamp(1rem, 3vw, 3rem);
  color: #fff;
  background: rgba(4, 19, 30, .98);
  border-top: 1px solid rgba(102, 209, 234, .3);
  box-shadow: 0 -12px 35px rgba(0, 0, 0, .24);
}
.featured-artwork { width: 70px; height: 70px; object-fit: cover; }
.featured-toggle {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
}
.featured-toggle:hover { background: #22acd7; }
.featured-copy { min-width: 0; display: grid; line-height: 1.15; }
.featured-copy small { color: var(--blue2); text-transform: uppercase; letter-spacing: .16em; font-size: .55rem; font-weight: 700; }
.featured-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.3rem var(--cond); text-transform: uppercase; }
.featured-copy span { color: rgba(255,255,255,.58); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.featured-timeline { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: .65rem; }
.featured-timeline>span { color: rgba(255,255,255,.58); font-size: .54rem; font-variant-numeric: tabular-nums; }
.featured-progress,.featured-volume input { accent-color: var(--blue); cursor: pointer; }
.featured-progress { width: 100%; }
.featured-volume { display: flex; align-items: center; gap: .4rem; color: var(--blue2); }
.featured-volume input { width: 64px; }
.featured-link { color: #fff; border: 1px solid rgba(255,255,255,.38); padding: .72rem .9rem; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .57rem; font-weight: 700; white-space: nowrap; }
.featured-link span { color: var(--blue2); }

@keyframes pulse-play { 50% { opacity: .3; transform: scale(.82); } }

@media (max-width: 700px) {
  .audio-player { grid-template-columns: 52px 1fr; }
  .volume-control { display: none; }
  .track-button { grid-template-columns: 32px 1fr 22px; }
  .track-button i { display: none; }
  body.has-featured-player { padding-bottom: 126px; }
  .featured-player { min-height: 126px; grid-template-columns: 52px 42px 1fr auto; gap: .65rem; padding: .65rem .8rem; }
  .featured-artwork { width: 52px; height: 52px; }
  .featured-toggle { width: 40px; height: 40px; }
  .featured-copy strong { font-size: 1.05rem; }
  .featured-timeline { grid-column: 1/-1; grid-row: 2; }
  .featured-volume { display: none; }
  .featured-link { padding: .6rem .7rem; }
}

@media (max-width: 430px) {
  .audio-player { margin-top: 2rem; padding: .85rem; }
  .player-meta p { display: none; }
  .player-timeline { grid-template-columns: 32px 1fr 32px; gap: .35rem; }
  .featured-player { grid-template-columns: 44px 38px 1fr; }
  .featured-artwork { width: 44px; height: 44px; }
  .featured-toggle { width: 36px; height: 36px; }
  .featured-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .track-button.playing b { animation: none; }
}