#podcasts { container: podcast-section / inline-size; display:grid; grid-template-columns:minmax(0,1fr) min(252px, 40%); column-gap:var(--spacing-podcastGap, 24px); grid-template-rows:auto 1fr; align-items:start; }
#podcasts > .section-heading { grid-column:1 / -1; grid-row:1; margin:0 0 var(--section-heading-content-gap, 24px); }
#podcast-list { display:contents; }
#podcast-list .podcast-main { grid-column:1; grid-row:2; transform:none; min-height:0; }
#podcast-list .podcast-main .appstar-visual { position:relative; aspect-ratio:16/9; }
.podcast-toggle { position:absolute; inset:0; z-index:10; width:100%; background:none; border-radius:0; }
.podcast-toggle:focus-visible { outline-offset:-4px; }
.podcast-queue { position:relative; isolation:isolate; display:grid; gap:var(--spacing-playlistRowGap, 0px); width:100%; grid-column:2; grid-row:2; max-width:100%; justify-self:start; list-style:none; margin:0; padding:0; min-width:0; }
.podcast-choice { position:relative; display:flex; align-items:center; gap:12px; width:100%; background:none; padding:14px 16px; text-align:left; border-radius:0; }
.podcast-choice .title { overflow-wrap:anywhere; text-decoration:none; }
.podcast-queue::before { content:''; position:absolute; z-index:-1; inset:0 0 auto; height:var(--active-height,69px); transform:translateY(var(--active-top,0px)); background:#f2f2f2; pointer-events:none; transition:transform 240ms cubic-bezier(.2,.8,.2,1),height 240ms ease; }
.podcast-number { width:12px; flex:none; font-size:12px; line-height:21px; font-variant-numeric:tabular-nums; color:#737373; }
.podcast-details { min-width:0; }
.podcast-details time { display:block; margin-top:4px; color:#737373; font-size:11px; line-height:16px; }
#podcast-list :is(.podcast-main,.appstar-visual,.appstar-timeline,.appstar-track,.appstar-fill,.appstar-audio) { border-radius:0; }
@media (prefers-reduced-motion:reduce) { .podcast-queue::before { transition:none; } }
#podcast-list .podcast-main:is(:hover,:focus-within) .appstar-timeline { opacity:1; pointer-events:auto; }
@container podcast-section (max-width:650px) {
  #podcasts > .section-heading { grid-column:1 / -1; grid-row:1; margin:0 0 var(--section-heading-content-gap, 24px); }
  #podcast-list .podcast-main { grid-column:1 / -1; grid-row:2; }
  .podcast-queue { grid-column:1 / -1; grid-row:3; width:min(252px, 100%); margin-top:var(--spacing-podcastMobileGap, 0px); }
  #podcast-list .podcast-main .appstar-visual { position:relative; height:auto; aspect-ratio:16/9; }
}
@media (hover:none) {
  #podcast-list .appstar-timeline { opacity:1; pointer-events:auto; }
}

.podcast-leading { position:relative; display:grid; place-items:center; width:12px; height:21px; flex:none; }
.podcast-number { text-align:center; }
.podcast-equalizer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px; visibility:hidden; }
.podcast-equalizer i { width:2px; height:10px; background:currentColor; transform:scaleY(.4); }
.podcast-equalizer i:nth-child(2) { height:14px; }
.podcast-choice.is-playing .podcast-number { visibility:hidden; }
.podcast-choice.is-playing .podcast-equalizer { visibility:visible; }
.podcast-choice.is-playing .podcast-equalizer i { animation:podcast-level .65s ease-in-out infinite alternate; }
.podcast-choice.is-playing .podcast-equalizer i:nth-child(2) { animation-delay:-.3s; }
.podcast-choice.is-playing .podcast-equalizer i:nth-child(3) { animation-delay:-.5s; }
@keyframes podcast-level { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) {
  .podcast-choice.is-playing .podcast-equalizer i { animation:none; transform:none; }
}