@gentomiyano/optimized-web-audio-player 0.2.3 → 0.3.0

package/dist/ui/player-views.css

@@ -1,691 +1,1337 @@
-.player-compact,
-.player-wide,
-.player-detailed,
-.player-podcast,
-.player-mini,
-.player-queue-panel {
-  container-name: player-surface;
-  container-type: inline-size;
-}
-
-.player-compact {
-  max-width: 480px;
-  overflow: visible;
-}
-
-.player-compact__main {
-  display: grid;
-  grid-template-areas:
-    "play artwork metadata volume"
-    "play artwork signal volume";
-  grid-template-columns: auto 48px minmax(0, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  column-gap: 0.65rem;
-  row-gap: 0.18rem;
-  padding: 0.55rem 0.65rem;
-}
-
-.player-compact__main > .player-play-button {
-  grid-area: play;
-  min-width: var(--player-hit);
-  min-height: var(--player-hit);
-}
-
-.player-compact__main[data-has-trailing-control="false"] {
-  grid-template-areas:
-    "play artwork metadata"
-    "play artwork signal";
-  grid-template-columns: auto 48px minmax(0, 1fr);
-}
-
-.player-compact__artwork {
-  grid-area: artwork;
-  width: 48px;
-  height: 48px;
-}
-
-.player-compact__main > .player-metadata {
-  grid-area: metadata;
-  gap: 0.05rem;
-}
-
-.player-compact .player-collection {
-  display: none;
-}
-
-.player-compact .player-title {
-  font-size: 0.82rem;
-}
-
-.player-compact .player-creator {
-  font-size: 0.63rem;
-}
-
-.player-compact__signal {
-  display: grid;
-  grid-area: signal;
-  grid-template-columns: auto minmax(48px, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  gap: 0.4rem;
-}
-
-.player-compact__main[data-has-status="false"] .player-compact__signal {
-  grid-template-columns: minmax(48px, 1fr) auto;
-}
-
-.player-compact__scrubber {
-  position: relative;
-  display: grid;
-  min-width: 48px;
-  align-items: center;
-}
-
-.player-compact__scrubber > * {
-  grid-area: 1 / 1;
-}
-
-.player-compact__scrubber > .player-seek {
-  position: absolute;
-  inset: -8px 0;
-  min-height: 30px;
-}
-
-.player-compact__scrubber > .player-seek::before,
-.player-compact__scrubber > .player-seek > .player-seek__progress {
-  opacity: 0;
-}
-
-.player-compact__scrubber > .player-seek input {
-  height: 30px;
-}
-
-.player-compact__main > .player-volume-popover {
-  grid-area: volume;
-}
-
-.player-compact .player-waveform {
-  height: 14px;
-}
-
-.player-compact .player-status,
-.player-compact .player-time {
-  font-size: 0.52rem;
-  letter-spacing: 0.05em;
-}
-
-.player-compact .player-time {
-  gap: 0.18rem;
-}
-
-.player-wide {
-  max-width: 680px;
-}
-
-.player-wide__grid {
-  min-width: 0;
-}
-
-.player-wide__header {
-  display: grid;
-  grid-template-columns: 96px minmax(0, 1fr);
-  align-items: center;
-  min-width: 0;
-  gap: clamp(0.9rem, 3vw, 1.2rem);
-  padding: 0.9rem 1.1rem;
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-wide__artwork {
-  width: 96px;
-  height: 96px;
-}
-
-.player-wide__identity {
-  display: grid;
-  min-width: 0;
-  gap: 0.55rem;
-}
-
-.player-wide[data-appearance="light"] .player-wide__identity {
-  padding: 0.65rem 0.8rem;
-  border: 1px solid var(--player-lcd-rule);
-  background: var(--player-lcd);
-}
-
-.player-wide__identity .player-title {
-  font-size: clamp(1.05rem, 4cqi, 1.42rem);
-  font-weight: 350;
-}
-
-.player-wide__content {
-  display: grid;
-  min-width: 0;
-  gap: 0.35rem;
-  padding: 0.65rem 1.1rem 0.8rem;
-}
-
-.player-wide .player-transport {
-  padding-top: 0.4rem;
-  border-top: 1px solid var(--player-faint);
-}
-
-.player-timeline,
-.player-podcast__timeline {
-  display: grid;
-  grid-template-rows: auto auto auto;
-  min-width: 0;
-}
-
-.player-timeline > .player-waveform,
-.player-podcast__timeline > .player-waveform {
-  grid-row: 1;
-}
-
-.player-timeline > .player-seek,
-.player-podcast__timeline > .player-seek {
-  grid-row: 2;
-}
-
-.player-timeline > .player-wide__timeline-footer,
-.player-podcast__timeline > .player-time {
-  grid-row: 3;
-}
-
-.player-wide .player-waveform {
-  height: 50px;
-  margin-block: 0;
-}
-
-.player-timeline .player-seek,
-.player-podcast__timeline .player-seek {
-  min-height: 30px;
-}
-
-.player-wide__timeline-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 0;
-  gap: 1.5rem;
-}
-
-.player-wide__timeline-footer .player-time {
-  width: min(13rem, 42%);
-}
-
-.player-wide__timeline-footer .player-volume {
-  justify-content: flex-end;
-}
-
-.player-detailed {
-  max-width: 720px;
-}
-
-.player-detailed__display {
-  display: grid;
-  grid-template-columns: 170px minmax(0, 1fr) 126px;
-  min-width: 0;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-detailed__artwork {
-  width: 170px;
-  min-height: 170px;
-}
-
-.player-detailed__primary {
-  display: grid;
-  align-content: center;
-  min-width: 0;
-  gap: 0.25rem;
-  padding: 0.65rem 1.2rem 0.25rem;
-  border-right: 1px solid var(--player-faint);
-}
-
-.player-detailed[data-appearance="light"] .player-detailed__primary {
-  background: var(--player-lcd);
-}
-
-.player-detailed__primary .player-title {
-  font-size: clamp(1.02rem, 3.2cqi, 1.32rem);
-  font-weight: 350;
-}
-
-.player-detailed__primary .player-waveform {
-  height: 28px;
-}
-
-.player-detailed__primary .player-seek {
-  min-height: 30px;
-}
-
-.player-detailed__numbers {
-  display: grid;
-  align-content: center;
-  min-width: 0;
-  gap: 0.55rem;
-  padding: 0.95rem;
-}
-
-.player-detailed__metric {
-  display: grid;
-  min-width: 0;
-  gap: 0.12rem;
-  justify-items: end;
-}
-
-.player-detailed__metric-label {
-  color: var(--player-muted);
-  font-size: 0.5rem;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-
-.player-detailed__metric-value {
-  color: var(--player-text);
-  font-family: var(--player-font-digital);
-  font-size: 0.68rem;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.09em;
-}
-
-.player-detailed__transport {
-  padding: 0.4rem 1rem;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 38px;
-  border-bottom: 1px solid var(--player-faint);
-  color: var(--player-muted);
-  font-size: 0.67rem;
-  letter-spacing: 0.13em;
-  text-transform: uppercase;
-}
-
-.player-detailed__queue {
-  padding: 0 1rem 0.65rem;
-}
-
-.player-detailed__queue ol,
-.player-queue-panel ol {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.player-detailed__queue li,
-.player-queue-panel li {
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-detailed__queue li:last-child,
-.player-queue-panel li:last-child {
-  border-bottom: 0;
-}
-
-.player-detailed__queue li[data-current="true"],
-.player-queue-panel li[data-current="true"] {
-  background: var(--player-active-wash);
-}
-
-.player-detailed__queue li[data-current="true"] .player-queue-number,
-.player-detailed__queue li[data-current="true"] .player-queue-title,
-.player-queue-panel li[data-current="true"] .player-queue-number {
-  color: var(--player-brand);
-}
-
-.player-detailed__queue li[data-current="true"] .player-queue-title,
-.player-queue-panel li[data-current="true"] .player-queue-copy strong {
-  font-weight: 650;
-}
-
-.player-detailed__queue li > button {
-  display: grid;
-  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
-  align-items: center;
-  width: 100%;
-  min-height: 38px;
-  padding: 0 0.55rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.player-detailed__queue li > button:hover,
-.player-queue-panel li > button:hover {
-  background: var(--player-faint);
-}
-
-.player-detailed__queue time,
-.player-queue-panel time {
-  color: var(--player-muted);
-  font-family: var(--player-font-digital);
-  font-size: 0.66rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.player-queue-title {
-  overflow: hidden;
-  font-size: 0.76rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-empty {
-  margin: 0;
-  padding: 1.4rem 0.6rem;
-  color: var(--player-muted);
-  font-size: 0.8rem;
-}
-
-.player-podcast {
-  max-width: 760px;
-}
-
-.player-podcast__header {
-  display: grid;
-  grid-template-columns: 112px minmax(0, 1fr) auto;
-  align-items: center;
-  min-width: 0;
-  gap: clamp(1rem, 4vw, 1.6rem);
-  padding: 1.15rem;
-  border-bottom: 1px solid var(--player-faint);
-}
-
-.player-podcast__artwork {
-  width: 112px;
-  height: 112px;
-}
-
-.player-podcast__header .player-title {
-  font-size: clamp(1.05rem, 3.6cqi, 1.4rem);
-  font-weight: 350;
-}
-
-.player-podcast[data-appearance="light"]
-  .player-podcast__header
-  > .player-metadata {
-  padding: 0.65rem 0.8rem;
-  border: 1px solid var(--player-lcd-rule);
-  background: var(--player-lcd);
-}
-
-.player-podcast__transport {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: clamp(0.15rem, 2vw, 1rem);
-  padding: 0.45rem 1rem;
-  border-top: 1px solid var(--player-rule);
-}
-
-.player-podcast__timeline {
-  padding: 0.75rem 1.15rem 1.1rem;
-}
-
-.player-podcast__timeline .player-waveform {
-  height: 60px;
-}
-
-.player-mini {
-  max-width: 100%;
-  overflow: visible;
-}
-
-.player-mini__main {
-  display: grid;
-  grid-template-columns: 48px minmax(120px, 1fr) auto auto minmax(130px, 0.65fr);
-  align-items: center;
-  min-width: 0;
-  gap: 0.55rem;
-  padding: 0.4rem 0.65rem;
-}
-
-.player-mini__artwork {
-  width: 48px;
-  height: 48px;
-}
-
-.player-mini__controls {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.player-mini__timeline {
-  display: grid;
-  min-width: 0;
-}
-
-.player-mini__timeline .player-seek {
-  min-height: 24px;
-}
-
-.player-queue-panel {
-  max-width: 460px;
-}
-
-.player-queue-panel > header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  min-height: 60px;
-  padding: 0.5rem 0.65rem 0.5rem 1rem;
-  border-bottom: 1px solid var(--player-rule);
-}
-
-.player-queue-panel h2 {
-  margin: 0.12rem 0 0;
-  overflow: hidden;
-  font-size: 0.92rem;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-queue-panel li > button {
-  display: grid;
-  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
-  align-items: center;
-  width: 100%;
-  min-height: 48px;
-  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.player-queue-copy {
-  display: grid;
-  min-width: 0;
-  gap: 0.08rem;
-}
-
-.player-queue-copy strong,
-.player-queue-copy small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.player-queue-copy strong {
-  font-size: 0.78rem;
-  font-weight: 540;
-}
-
-.player-queue-copy small {
-  color: var(--player-muted);
-  font-size: 0.66rem;
-}
-
-.player-transport .player-icon-button:not(.player-play-button),
-.player-podcast__transport .player-icon-button:not(.player-play-button) {
-  color: var(--player-muted);
-}
-
-.player-transport .player-icon-button[aria-pressed="true"],
-.player-transport .player-icon-button:hover:not(:disabled),
-.player-podcast__transport .player-icon-button:hover:not(:disabled) {
-  color: var(--player-brand);
-}
-
-@container player-surface (max-width: 680px) {
-  .player-detailed__display {
-    grid-template-columns: 104px minmax(0, 1fr);
-  }
-
-  .player-detailed__artwork {
-    width: 104px;
-    height: 104px;
-    min-height: 0;
-    align-self: start;
-  }
-
-  .player-detailed__primary {
-    padding: 0.75rem;
-    border-right: 0;
-  }
-
-  .player-detailed__primary .player-waveform {
-    height: 24px;
-  }
-
-  .player-detailed__numbers {
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    align-items: center;
-    padding: 0.5rem 0.75rem;
-    border-top: 1px solid var(--player-faint);
-  }
-
-  .player-detailed__metric {
-    justify-items: start;
-  }
-
-  .player-detailed__transport {
-    padding-inline: 0.5rem;
-  }
-
-  .player-detailed__transport .player-transport {
-    width: 100%;
-    justify-content: space-between;
-    gap: 0;
-  }
-
-  .player-podcast__header {
-    grid-template-columns: 86px minmax(0, 1fr);
-    gap: 0.85rem;
-    padding: 0.85rem;
-  }
-
-  .player-podcast__artwork {
-    width: 86px;
-    height: 86px;
-  }
-
-  .player-podcast__header > .player-status {
-    grid-column: 2;
-  }
-
-  .player-podcast__transport {
-    gap: 0;
-    padding-inline: 0.3rem;
-  }
-
-  .player-mini__main {
-    grid-template-columns: 46px minmax(0, 1fr) auto;
-  }
-
-  .player-mini__controls > .player-volume-popover {
-    display: none;
-  }
-
-  .player-mini__artwork {
-    width: 46px;
-    height: 46px;
-  }
-
-  .player-mini__main > .player-status,
-  .player-mini__timeline {
-    display: none;
-  }
-}
-
-@container player-surface (max-width: 440px) {
-  .player-compact__main {
-    grid-template-areas:
-      "play artwork metadata"
-      "play artwork signal";
-    grid-template-columns: auto 48px minmax(0, 1fr);
-  }
-
-  .player-compact__main > .player-volume-popover {
-    display: none;
-  }
-
-  .player-compact__signal {
-    grid-template-columns: minmax(48px, 1fr) auto;
-  }
-
-  .player-compact .player-status {
-    display: none;
-  }
-
-  .player-wide__header {
-    grid-template-columns: 78px minmax(0, 1fr);
-    gap: 0.85rem;
-    padding: 0.85rem;
-  }
-
-  .player-wide__artwork {
-    width: 78px;
-    height: 78px;
-  }
-
-  .player-wide__identity {
-    gap: 0.55rem;
-  }
-
-  .player-wide__content {
-    padding: 0.7rem 0.85rem 1rem;
-  }
-
-  .player-wide__timeline-footer .player-volume {
-    display: none;
-  }
-
-  .player-wide__timeline-footer .player-time {
-    width: 100%;
-  }
-
-  .player-transport {
-    justify-content: space-between;
-  }
-
-  .player-detailed__queue {
-    padding-inline: 0.5rem;
-  }
-
-  .player-detailed__transport {
-    padding-inline: 0.25rem;
-  }
-
-  .player-queue-panel > header {
-    padding-left: 0.65rem;
-  }
-
-  .player-queue-panel li > button {
-    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
-    padding-inline: 0.45rem;
-  }
-}
+.player-compact,
+.player-wide,
+.player-detailed,
+.player-podcast,
+.player-content,
+.player-mini,
+.player-queue-panel {
+  container-name: player-surface;
+  container-type: inline-size;
+}
+
+.player-content {
+  max-width: 760px;
+}
+
+.player-release {
+  max-width: 980px;
+}
+
+.player-program {
+  max-width: 980px;
+}
+
+.player-release__hero {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1.08fr);
+  align-items: start;
+  gap: clamp(1.5rem, 4cqi, 3.2rem);
+  padding: clamp(1.2rem, 3.5cqi, 2.4rem);
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-release .player-release__artwork {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  box-shadow: 0 20px 48px rgb(0 0 0 / 0.34);
+}
+
+.player-release__detail {
+  display: grid;
+  align-self: stretch;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.player-release__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.28rem;
+}
+
+.player-release__identity h2,
+.player-release__identity p {
+  min-width: 0;
+  margin: 0;
+}
+
+.player-release__identity h2 {
+  font-family: var(--player-font-title);
+  font-size: clamp(2rem, 6.4cqi, 4rem);
+  font-stretch: semi-condensed;
+  font-weight: 350;
+  font-variation-settings: "wght" 340, "wdth" 88;
+  letter-spacing: -0.025em;
+  line-height: 0.96;
+}
+
+.player-release__artist {
+  color: var(--player-text);
+  font-size: clamp(1rem, 2.2cqi, 1.35rem);
+  font-weight: 450;
+}
+
+.player-release__facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 1.5rem;
+  margin: 0.65rem 0 0;
+}
+
+.player-release__facts > div {
+  display: grid;
+  gap: 0.12rem;
+}
+
+.player-release__facts dt,
+.player-release__credits > span,
+.player-release__now-playing > span {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.58rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.player-release__facts dd {
+  margin: 0;
+  font-size: 0.78rem;
+}
+
+.player-release__notes {
+  max-width: 44rem;
+  margin: 0;
+  color: var(--player-muted);
+  font-size: 0.78rem;
+  line-height: 1.55;
+}
+
+.player-release__credits {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.player-release__credits ul {
+  display: grid;
+  gap: 0.18rem;
+  padding: 0;
+  margin: 0;
+  color: var(--player-muted);
+  font-size: 0.68rem;
+  list-style: none;
+}
+
+.player-release__playback {
+  display: grid;
+  min-width: 0;
+  gap: 0.65rem;
+  padding: 0.9rem 0 0 !important;
+  border-top: 1px solid var(--player-rule);
+}
+
+.player-release__now-playing {
+  display: grid;
+  min-width: 0;
+  gap: 0.15rem;
+}
+
+.player-release__now-playing strong {
+  overflow: hidden;
+  font-family: var(--player-font-title);
+  font-size: clamp(1rem, 2.6cqi, 1.45rem);
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-release__signal {
+  display: grid;
+  min-width: 0;
+  grid-template-rows: auto auto auto;
+}
+
+.player-release__signal .player-waveform {
+  height: clamp(74px, 12cqi, 112px);
+}
+
+.player-release__signal .player-seek {
+  min-height: 34px;
+}
+
+.player-release__signal .player-time {
+  justify-self: end;
+}
+
+.player-release__playback > .player-content__transport {
+  justify-content: flex-start;
+  min-height: var(--player-hit);
+}
+
+.player-release__tracklist {
+  padding: 0 clamp(1rem, 3.5cqi, 2.4rem) 1.2rem !important;
+}
+
+.player-release__tracklist .player-section-heading {
+  min-height: 52px;
+}
+
+.player-content__header {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: clamp(0.8rem, 3vw, 1.4rem);
+  padding: 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-content__artwork {
+  display: block;
+  width: 112px;
+  height: 112px;
+  overflow: hidden;
+  background: var(--player-panel-soft);
+}
+
+.player-content__artwork img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.player-content__heading {
+  display: grid;
+  min-width: 0;
+  gap: 0.2rem;
+}
+
+.player-content__heading h2,
+.player-content__heading p {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-content__heading h2 {
+  font-family: var(--player-font-title);
+  font-size: clamp(1.1rem, 4cqi, 1.6rem);
+  font-weight: 350;
+}
+
+.player-content__heading p {
+  color: var(--player-muted);
+  font-size: 0.78rem;
+}
+
+.player-content__transport,
+.player-content__skip-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-content__timeline {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-content__skip-controls {
+  padding: 0 1rem 0.5rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-content section {
+  padding: 0 1rem 0.65rem;
+}
+
+.player-content__list,
+.player-content__chapters {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.player-content__list > li {
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-content__list > li:last-child {
+  border-bottom: 0;
+}
+
+.player-content__list > li[data-current="true"] {
+  background: var(--player-active-wash);
+}
+
+.player-content__list > li > button {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: var(--player-hit);
+  padding: 0.35rem 0.45rem;
+  border: 0;
+  background: transparent;
+  color: var(--player-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-content__list > li > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.player-content__list > li > button:hover:not(:disabled) {
+  background: var(--player-faint);
+}
+
+.player-content__entry-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+}
+
+.player-content__entry-copy strong,
+.player-content__entry-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-content__entry-copy strong {
+  font-size: 0.82rem;
+  font-weight: 500;
+}
+
+.player-content__entry-copy small,
+.player-content__list time,
+.player-content__chapters time {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.62rem;
+}
+
+.player-content__chapters {
+  padding: 0.1rem 0.45rem 0.55rem 2.7rem;
+}
+
+.player-content__chapters button {
+  display: grid;
+  grid-template-columns: 4rem minmax(0, 1fr);
+  width: 100%;
+  min-height: var(--player-hit);
+  align-items: center;
+  padding: 0 0.45rem;
+  border: 0;
+  background: transparent;
+  color: var(--player-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-content__chapters button[aria-current="true"] {
+  color: var(--player-brand);
+}
+
+.player-program__hero {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(1.5rem, 5cqi, 3.8rem);
+  padding: clamp(1.2rem, 4cqi, 2.8rem);
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-program__artwork {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  border-radius: 0.35rem;
+  box-shadow: 0 20px 48px rgb(0 0 0 / 0.3);
+}
+
+.player-program__detail {
+  display: grid;
+  min-width: 0;
+  gap: 0.85rem;
+}
+
+.player-program__detail h2 {
+  max-width: 13ch;
+  margin: 0;
+  font-family: var(--player-font-title);
+  font-size: clamp(2.4rem, 7.4cqi, 5rem);
+  font-stretch: semi-condensed;
+  font-weight: 340;
+  font-variation-settings: "wght" 340, "wdth" 88;
+  letter-spacing: -0.035em;
+  line-height: 0.92;
+}
+
+.player-program__description,
+.player-program__episode-heading > p {
+  max-width: 48rem;
+  margin: 0;
+  color: var(--player-muted);
+  font-size: 0.82rem;
+  line-height: 1.62;
+}
+
+.player-program__credits {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem 1.4rem;
+  margin: 0;
+}
+
+.player-program__credits > div,
+.player-program__episode-facts > div {
+  display: grid;
+  min-width: 0;
+  gap: 0.16rem;
+}
+
+.player-program__credits dt,
+.player-program__episode-facts dt {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.58rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.player-program__credits dd,
+.player-program__episode-facts dd {
+  margin: 0;
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+
+.player-program__episode {
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(320px, 1.25fr);
+  gap: clamp(1.2rem, 4cqi, 2.8rem);
+  padding: clamp(1.3rem, 4cqi, 2.5rem) !important;
+  border-bottom: 1px solid var(--player-rule);
+  background: var(--player-panel-soft);
+}
+
+.player-program__episode-heading {
+  display: grid;
+  align-content: start;
+  min-width: 0;
+  gap: 0.65rem;
+}
+
+.player-program__episode-heading h3 {
+  margin: 0;
+  font-family: var(--player-font-title);
+  font-size: clamp(1.65rem, 4.2cqi, 2.8rem);
+  font-weight: 380;
+  letter-spacing: -0.02em;
+  line-height: 1.02;
+}
+
+.player-program__episode-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem 1.5rem;
+  margin: 0;
+}
+
+.player-program__playback {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 0.7rem;
+}
+
+.player-program__signal {
+  display: grid;
+  min-width: 0;
+  grid-template-rows: auto auto auto;
+}
+
+.player-program__signal .player-waveform {
+  height: clamp(100px, 15cqi, 138px);
+}
+
+.player-program__signal .player-seek {
+  min-height: 36px;
+}
+
+.player-program__signal .player-time {
+  justify-self: end;
+}
+
+.player-program__transport-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: var(--player-hit);
+}
+
+.player-program__transport-row > .player-content__transport,
+.player-program__skip-controls {
+  display: flex;
+  align-items: center;
+}
+
+.player-program__chapters {
+  grid-column: 1 / -1;
+  padding-top: 0.35rem;
+  border-top: 1px solid var(--player-rule);
+}
+
+.player-program__chapters ol {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.player-program__chapters li {
+  min-width: 0;
+}
+
+.player-program__chapters li > button {
+  display: grid;
+  grid-template-columns: 3.5rem minmax(0, 1fr);
+  align-items: center;
+  width: 100%;
+  min-height: var(--player-hit);
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--player-faint);
+  background: transparent;
+  color: var(--player-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-program__chapters li > button:hover,
+.player-program__chapters li > button[aria-current="true"] {
+  border-color: var(--player-brand);
+  background: var(--player-active-wash);
+}
+
+.player-program__chapters time {
+  color: var(--player-brand);
+  font-family: var(--player-font-digital);
+  font-size: 0.64rem;
+}
+
+.player-program__chapters li span {
+  overflow: hidden;
+  font-size: 0.76rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-program__chapters-toggle {
+  min-height: var(--player-hit);
+  padding: 0 0.2rem;
+  border: 0;
+  background: transparent;
+  color: var(--player-brand);
+  font-family: var(--player-font-digital);
+  font-size: 0.62rem;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+
+.player-program__episode-list {
+  padding: 0 clamp(1rem, 4cqi, 2.5rem) 1.2rem !important;
+}
+
+.player-program__episode-list .player-section-heading {
+  min-height: 56px;
+}
+
+@container player-surface (max-width: 560px) {
+  .player-content__header {
+    grid-template-columns: 76px minmax(0, 1fr);
+    padding: 0.75rem;
+  }
+
+  .player-content__artwork {
+    width: 76px;
+    height: 76px;
+  }
+
+  .player-content__header > .player-content__transport {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--player-faint);
+  }
+
+  .player-content section {
+    padding-inline: 0.5rem;
+  }
+
+  .player-content__list > li > button {
+    grid-template-columns: 2rem minmax(0, 1fr) auto;
+  }
+
+  .player-content__chapters {
+    padding-left: 2rem;
+  }
+}
+
+@container player-surface (max-width: 760px) {
+  .player-release__hero {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.4rem;
+    padding: 1rem;
+  }
+
+  .player-release__artwork {
+    width: min(100%, 560px);
+    justify-self: center;
+  }
+
+  .player-release__identity h2 {
+    font-size: clamp(2.25rem, 12cqi, 4.5rem);
+  }
+
+  .player-release__artist {
+    font-size: 1.05rem;
+  }
+
+  .player-release__signal .player-waveform {
+    height: clamp(86px, 24cqi, 132px);
+  }
+
+  .player-release__tracklist {
+    padding-inline: 0.65rem !important;
+  }
+
+  .player-program__hero {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.4rem;
+    padding: 1rem;
+  }
+
+  .player-program__artwork {
+    width: min(78%, 420px);
+    height: auto;
+    justify-self: center;
+  }
+
+  .player-program__detail h2 {
+    max-width: none;
+    font-size: clamp(2.4rem, 13cqi, 4.4rem);
+  }
+
+  .player-program__episode {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+    padding: 1rem !important;
+  }
+
+  .player-program__signal .player-waveform {
+    height: clamp(106px, 27cqi, 142px);
+  }
+
+  .player-program__chapters {
+    grid-column: 1;
+  }
+
+  .player-program__chapters ol {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .player-program__episode-list {
+    padding-inline: 0.65rem !important;
+  }
+}
+
+.player-compact {
+  max-width: 480px;
+  overflow: visible;
+}
+
+.player-compact__main {
+  display: grid;
+  grid-template-areas:
+    "play artwork metadata volume"
+    "play artwork signal volume";
+  grid-template-columns: auto 48px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  column-gap: 0.65rem;
+  row-gap: 0.18rem;
+  padding: 0.55rem 0.65rem;
+}
+
+.player-compact__main > .player-play-button {
+  grid-area: play;
+  min-width: var(--player-hit);
+  min-height: var(--player-hit);
+}
+
+.player-compact__main[data-has-trailing-control="false"] {
+  grid-template-areas:
+    "play artwork metadata"
+    "play artwork signal";
+  grid-template-columns: auto 48px minmax(0, 1fr);
+}
+
+.player-compact__artwork {
+  grid-area: artwork;
+  width: 48px;
+  height: 48px;
+}
+
+.player-compact__main > .player-metadata {
+  grid-area: metadata;
+  gap: 0.05rem;
+}
+
+.player-compact .player-collection {
+  display: none;
+}
+
+.player-compact .player-title {
+  font-size: 0.82rem;
+}
+
+.player-compact .player-creator {
+  font-size: 0.63rem;
+}
+
+.player-compact__signal {
+  display: grid;
+  grid-area: signal;
+  grid-template-columns: auto minmax(48px, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: 0.4rem;
+}
+
+.player-compact__main[data-has-status="false"] .player-compact__signal {
+  grid-template-columns: minmax(48px, 1fr) auto;
+}
+
+.player-compact__scrubber {
+  position: relative;
+  display: grid;
+  min-width: 48px;
+  align-items: center;
+}
+
+.player-compact__scrubber > * {
+  grid-area: 1 / 1;
+}
+
+.player-compact__scrubber > .player-seek {
+  position: absolute;
+  inset: -8px 0;
+  min-height: 30px;
+}
+
+.player-compact__scrubber > .player-seek::before,
+.player-compact__scrubber > .player-seek > .player-seek__progress {
+  opacity: 0;
+}
+
+.player-compact__scrubber > .player-seek input {
+  height: 30px;
+}
+
+.player-compact__main > .player-volume-popover {
+  grid-area: volume;
+}
+
+.player-compact .player-waveform {
+  height: 14px;
+}
+
+.player-compact .player-status,
+.player-compact .player-time {
+  font-size: 0.52rem;
+  letter-spacing: 0.05em;
+}
+
+.player-compact .player-time {
+  gap: 0.18rem;
+}
+
+.player-wide {
+  max-width: 680px;
+}
+
+.player-wide__grid {
+  min-width: 0;
+}
+
+.player-wide__header {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  gap: clamp(0.9rem, 3vw, 1.2rem);
+  padding: 0.9rem 1.1rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-wide__artwork {
+  width: 96px;
+  height: 96px;
+}
+
+.player-wide__identity {
+  display: grid;
+  min-width: 0;
+  gap: 0.55rem;
+}
+
+.player-wide[data-appearance="light"] .player-wide__identity {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-wide__identity .player-title {
+  font-size: clamp(1.05rem, 4cqi, 1.42rem);
+  font-weight: 350;
+}
+
+.player-wide__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.35rem;
+  padding: 0.65rem 1.1rem 0.8rem;
+}
+
+.player-wide .player-transport {
+  padding-top: 0.4rem;
+  border-top: 1px solid var(--player-faint);
+}
+
+.player-timeline,
+.player-podcast__timeline {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  min-width: 0;
+}
+
+.player-timeline > .player-waveform,
+.player-podcast__timeline > .player-waveform {
+  grid-row: 1;
+}
+
+.player-timeline > .player-seek,
+.player-podcast__timeline > .player-seek {
+  grid-row: 2;
+}
+
+.player-timeline > .player-wide__timeline-footer,
+.player-podcast__timeline > .player-time {
+  grid-row: 3;
+}
+
+.player-wide .player-waveform {
+  height: 50px;
+  margin-block: 0;
+}
+
+.player-timeline .player-seek,
+.player-podcast__timeline .player-seek {
+  min-height: 30px;
+}
+
+.player-wide__timeline-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 1.5rem;
+}
+
+.player-wide__timeline-footer .player-time {
+  width: min(13rem, 42%);
+}
+
+.player-wide__timeline-footer .player-volume {
+  justify-content: flex-end;
+}
+
+.player-detailed {
+  max-width: 720px;
+}
+
+.player-detailed__display {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr) 126px;
+  min-width: 0;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-detailed__artwork {
+  width: 170px;
+  min-height: 170px;
+}
+
+.player-detailed__primary {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.25rem;
+  padding: 0.65rem 1.2rem 0.25rem;
+  border-right: 1px solid var(--player-faint);
+}
+
+.player-detailed[data-appearance="light"] .player-detailed__primary {
+  background: var(--player-lcd);
+}
+
+.player-detailed__primary .player-title {
+  font-size: clamp(1.02rem, 3.2cqi, 1.32rem);
+  font-weight: 350;
+}
+
+.player-detailed__primary .player-waveform {
+  height: 28px;
+}
+
+.player-detailed__primary .player-seek {
+  min-height: 30px;
+}
+
+.player-detailed__numbers {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.95rem;
+}
+
+.player-detailed__metric {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+  justify-items: end;
+}
+
+.player-detailed__metric-label {
+  color: var(--player-muted);
+  font-size: 0.5rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__metric-value {
+  color: var(--player-text);
+  font-family: var(--player-font-digital);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.09em;
+}
+
+.player-detailed__transport {
+  padding: 0.4rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  border-bottom: 1px solid var(--player-faint);
+  color: var(--player-muted);
+  font-size: 0.67rem;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.player-detailed__queue {
+  padding: 0 1rem 0.65rem;
+}
+
+.player-detailed__queue ol,
+.player-queue-panel ol {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.player-detailed__queue li,
+.player-queue-panel li {
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-detailed__queue li:last-child,
+.player-queue-panel li:last-child {
+  border-bottom: 0;
+}
+
+.player-detailed__queue li[data-current="true"],
+.player-queue-panel li[data-current="true"] {
+  background: var(--player-active-wash);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-number,
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-number {
+  color: var(--player-brand);
+}
+
+.player-detailed__queue li[data-current="true"] .player-queue-title,
+.player-queue-panel li[data-current="true"] .player-queue-copy strong {
+  font-weight: 650;
+}
+
+.player-detailed__queue li > button {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 38px;
+  padding: 0 0.55rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-detailed__queue li > button:hover,
+.player-queue-panel li > button:hover {
+  background: var(--player-faint);
+}
+
+.player-detailed__queue time,
+.player-queue-panel time {
+  color: var(--player-muted);
+  font-family: var(--player-font-digital);
+  font-size: 0.66rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.player-queue-title {
+  overflow: hidden;
+  font-size: 0.76rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-empty {
+  margin: 0;
+  padding: 1.4rem 0.6rem;
+  color: var(--player-muted);
+  font-size: 0.8rem;
+}
+
+.player-podcast {
+  max-width: 760px;
+}
+
+.player-podcast__header {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 0;
+  gap: clamp(1rem, 4vw, 1.6rem);
+  padding: 1.15rem;
+  border-bottom: 1px solid var(--player-faint);
+}
+
+.player-podcast__artwork {
+  width: 112px;
+  height: 112px;
+}
+
+.player-podcast__header .player-title {
+  font-size: clamp(1.05rem, 3.6cqi, 1.4rem);
+  font-weight: 350;
+}
+
+.player-podcast[data-appearance="light"]
+  .player-podcast__header
+  > .player-metadata {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--player-lcd-rule);
+  background: var(--player-lcd);
+}
+
+.player-podcast__transport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(0.15rem, 2vw, 1rem);
+  padding: 0.45rem 1rem;
+  border-top: 1px solid var(--player-rule);
+}
+
+.player-podcast__timeline {
+  padding: 0.75rem 1.15rem 1.1rem;
+}
+
+.player-podcast__timeline .player-waveform {
+  height: 60px;
+}
+
+.player-mini {
+  max-width: 100%;
+  overflow: visible;
+}
+
+.player-mini__main {
+  display: grid;
+  grid-template-columns: 48px minmax(120px, 1fr) auto auto minmax(130px, 0.65fr);
+  align-items: center;
+  min-width: 0;
+  gap: 0.55rem;
+  padding: 0.4rem 0.65rem;
+}
+
+.player-mini__artwork {
+  width: 48px;
+  height: 48px;
+}
+
+.player-mini__controls {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.player-mini__timeline {
+  display: grid;
+  min-width: 0;
+}
+
+.player-mini__timeline .player-seek {
+  min-height: 24px;
+}
+
+.player-queue-panel {
+  max-width: 460px;
+}
+
+.player-queue-panel > header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  min-height: 60px;
+  padding: 0.5rem 0.65rem 0.5rem 1rem;
+  border-bottom: 1px solid var(--player-rule);
+}
+
+.player-queue-panel h2 {
+  margin: 0.12rem 0 0;
+  overflow: hidden;
+  font-size: 0.92rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-panel li > button {
+  display: grid;
+  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.player-queue-copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.08rem;
+}
+
+.player-queue-copy strong,
+.player-queue-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.player-queue-copy strong {
+  font-size: 0.78rem;
+  font-weight: 540;
+}
+
+.player-queue-copy small {
+  color: var(--player-muted);
+  font-size: 0.66rem;
+}
+
+.player-transport .player-icon-button:not(.player-play-button),
+.player-podcast__transport .player-icon-button:not(.player-play-button) {
+  color: var(--player-muted);
+}
+
+.player-transport .player-icon-button[aria-pressed="true"],
+.player-transport .player-icon-button:hover:not(:disabled),
+.player-podcast__transport .player-icon-button:hover:not(:disabled) {
+  color: var(--player-brand);
+}
+
+@container player-surface (max-width: 680px) {
+  .player-detailed__display {
+    grid-template-columns: 104px minmax(0, 1fr);
+  }
+
+  .player-detailed__artwork {
+    width: 104px;
+    height: 104px;
+    min-height: 0;
+    align-self: start;
+  }
+
+  .player-detailed__primary {
+    padding: 0.75rem;
+    border-right: 0;
+  }
+
+  .player-detailed__primary .player-waveform {
+    height: 24px;
+  }
+
+  .player-detailed__numbers {
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid var(--player-faint);
+  }
+
+  .player-detailed__metric {
+    justify-items: start;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport .player-transport {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .player-podcast__header {
+    grid-template-columns: 86px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-podcast__artwork {
+    width: 86px;
+    height: 86px;
+  }
+
+  .player-podcast__header > .player-status {
+    grid-column: 2;
+  }
+
+  .player-podcast__transport {
+    gap: 0;
+    padding-inline: 0.3rem;
+  }
+
+  .player-mini__main {
+    grid-template-columns: 46px minmax(0, 1fr) auto;
+  }
+
+  .player-mini__controls > .player-volume-popover {
+    display: none;
+  }
+
+  .player-mini__artwork {
+    width: 46px;
+    height: 46px;
+  }
+
+  .player-mini__main > .player-status,
+  .player-mini__timeline {
+    display: none;
+  }
+}
+
+@container player-surface (max-width: 440px) {
+  .player-compact__main {
+    grid-template-areas:
+      "play artwork metadata"
+      "play artwork signal";
+    grid-template-columns: auto 48px minmax(0, 1fr);
+  }
+
+  .player-compact__main > .player-volume-popover {
+    display: none;
+  }
+
+  .player-compact__signal {
+    grid-template-columns: minmax(48px, 1fr) auto;
+  }
+
+  .player-compact .player-status {
+    display: none;
+  }
+
+  .player-wide__header {
+    grid-template-columns: 78px minmax(0, 1fr);
+    gap: 0.85rem;
+    padding: 0.85rem;
+  }
+
+  .player-wide__artwork {
+    width: 78px;
+    height: 78px;
+  }
+
+  .player-wide__identity {
+    gap: 0.55rem;
+  }
+
+  .player-wide__content {
+    padding: 0.7rem 0.85rem 1rem;
+  }
+
+  .player-wide__timeline-footer .player-volume {
+    display: none;
+  }
+
+  .player-wide__timeline-footer .player-time {
+    width: 100%;
+  }
+
+  .player-transport {
+    justify-content: space-between;
+  }
+
+  .player-detailed__queue {
+    padding-inline: 0.5rem;
+  }
+
+  .player-detailed__transport {
+    padding-inline: 0.25rem;
+  }
+
+  .player-queue-panel > header {
+    padding-left: 0.65rem;
+  }
+
+  .player-queue-panel li > button {
+    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
+    padding-inline: 0.45rem;
+  }
+}