:root {
  --bg: #020416;
  --surface: #080a23;
  --text: #f4f2f5;
  --muted: #aaa7b2;
  --line: rgba(255, 255, 255, 0.075);
  --cyan: #0a9cff;
  --blue: #2769ff;
  --violet: #7c38ff;
  --magenta: #ff168d;
  --header-width: 1468px;
  --content-width: 1292px;
  --player-height: 119px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(580px 420px at 27% 26%, rgba(42, 44, 206, 0.105), transparent 68%),
    radial-gradient(620px 440px at 73% 27%, rgba(26, 46, 171, 0.055), transparent 72%),
    radial-gradient(540px 310px at 53% 88%, rgba(57, 18, 118, 0.075), transparent 72%),
    linear-gradient(180deg, #020414 0%, #020417 55%, #03051a 100%);
  font-family: Inter, "Inter Display", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; color: inherit; background: none; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid rgba(44,159,255,.92); outline-offset: 3px; }
svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg .fill, .fill { fill: currentColor; stroke: none; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.site-header { height: 78px; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(2,3,17,.78); }
.header-inner { width: min(var(--header-width), calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand img { width: 48px; height: 45px; object-fit: contain; }
.brand-copy { margin-top: -1px; font-size: 24px; letter-spacing: -.72px; }
.brand-copy strong { font-weight: 700; }
.brand-copy em { font-style: normal; font-weight: 500; background: linear-gradient(90deg,#9b45ff,#f129a4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.desktop-nav { height: 100%; margin-right: 25px; display: flex; align-items: center; gap: 56px; }
.desktop-nav > a { color: #e8e5e8; font-size: 18.5px; font-weight: 400; letter-spacing: -.25px; text-decoration: none; transition: color 160ms ease; }
.desktop-nav > a:hover { color: #fff; }
.icon-button { display: grid; place-items: center; }
.search-button { width: 34px; height: 44px; margin-left: 14px; color: #f5f4f5; }
.search-button svg { width: 28px; height: 28px; stroke-width: 1.8; }
.gradient-outline { position: relative; isolation: isolate; }
.gradient-outline::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(100deg,#079cfa,#6c3bff 56%,#ff168d); }
.gradient-outline::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 10px; background: #05061a; }
.login-button { width: 156px; height: 45px; margin-left: -14px; display: grid; place-items: center; border-radius: 11px; color: #f0eef1; font-size: 17px; text-decoration: none; transition: transform 160ms ease, filter 160ms ease; }
.login-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mobile-menu { display: none; width: 44px; height: 44px; place-items: center; }
.mobile-menu svg { width: 28px; height: 28px; }

main { width: min(var(--content-width), calc(100% - 48px)); margin: 21px auto 0; padding-bottom: calc(var(--player-height) + 20px); }
.hero { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 36px; align-items: start; }
.cover-wrap { position: relative; width: 400px; height: 400px; filter: drop-shadow(-12px 5px 24px rgba(111,28,201,.15)); }
.cover-wrap::before { content: ""; position: absolute; inset: 18px -8px 4px -14px; z-index: -1; border-radius: 28px; background: radial-gradient(circle at 12% 55%,rgba(214,27,255,.23),transparent 44%); filter: blur(18px); }
.cover-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1.5px solid transparent; border-radius: 19px; background: linear-gradient(125deg,#8f27ff 0%,#315dff 46%,#079cfa 74%,#e727c8 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; box-shadow: inset 0 0 8px rgba(45,96,255,.18),0 0 16px rgba(132,37,255,.28); }
.podcast-cover { display: block; width: 400px; height: 400px; border-radius: 19px; object-fit: cover; }
.hero-copy { min-width: 0; padding-top: 7px; }
.category-badge { display: inline-flex; align-items: center; justify-content: center; height: 35px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; color: #f4f2f4; background: linear-gradient(#06071a,#06071a) padding-box, linear-gradient(90deg,#05a7ff,#7439ff 58%,#ff188f) border-box; font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; }
.category-badge strong { color: #dc51d4; font-weight: 600; }
.hero h1 { margin: 16px 0 10px; color: #f5f3f4; font-size: clamp(70px,5.27vw,88px); line-height: 1.04; font-weight: 730; letter-spacing: -3.2px; }
.author { margin: 0; color: #a7a4ad; font-size: 23px; line-height: 1.35; letter-spacing: -.35px; }
.author strong { color: #7d3eff; font-weight: 700; }
.description { max-width: 690px; margin: 12px 0 0; color: #aaa7b1; font-size: 21px; line-height: 1.75; letter-spacing: -.38px; }
.hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 18px; }
.primary-button, .secondary-button { height: 63px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; white-space: nowrap; transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }
.primary-button { width: 318px; gap: 15px; padding: 0 24px; color: #fff; background: linear-gradient(102deg,#127bff 0%,#5950ff 37%,#bf23df 69%,#ff1c84 100%); box-shadow: 0 7px 20px rgba(64,45,255,.11), inset 0 1px 0 rgba(255,255,255,.2); font-size: 18.5px; letter-spacing: -.2px; }
.primary-button:hover { filter: brightness(1.08); }
.primary-button svg { width: 26px; height: 26px; flex: 0 0 auto; }
.secondary-button { gap: 16px; padding: 0 27px; color: #f1eff1; border: 1px solid rgba(255,255,255,.22); background: rgba(4,5,18,.34); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); font-size: 18px; letter-spacing: -.2px; }
.secondary-button:first-of-type { width: 161px; }
.secondary-button:last-of-type { width: 183px; }
.secondary-button:hover { border-color: rgba(255,255,255,.38); background: rgba(12,13,34,.62); }
.secondary-button svg { width: 28px; height: 28px; stroke-width: 1.8; }
.follow-check { display: none; }
.js-follow[aria-pressed="true"] .follow-plus { display: none; }
.js-follow[aria-pressed="true"] .follow-check { display: block; }
.js-follow[aria-pressed="true"] { border-color: rgba(199,65,255,.55); }

.episodes { margin-top: 24px; }
.episodes h2 { margin: 0 0 4px; font-size: 23px; line-height: 1.3; font-weight: 600; letter-spacing: -.4px; }
.episode-list { border-top: 1px solid var(--line); }
.episode-row { min-height: 84px; display: grid; grid-template-columns: 89px 48px minmax(0,1fr) 126px 72px 25px; align-items: center; column-gap: 28px; border-bottom: 1px solid rgba(255,255,255,.055); }
.episode-thumb { width: 87px; height: 68px; display: block; object-fit: cover; border-radius: 8px; transform: translateY(1px); }
.episode-play { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 50%; color: #8067ff; background: linear-gradient(#06071a,#06071a) padding-box, linear-gradient(140deg,#9d2dff,#ff168d 62%,#236fff) border-box; transition: transform 160ms ease, filter 160ms ease; }
.episode-play:hover { transform: scale(1.045); filter: brightness(1.22); }
.episode-play svg { width: 26px; height: 26px; }
.episode-row.active .episode-play { box-shadow: 0 0 16px rgba(153,48,255,.22); }
.episode-copy { min-width: 0; }
.episode-title-line { display: flex; min-width: 0; align-items: baseline; gap: 15px; white-space: nowrap; }
.episode-number { flex: 0 0 auto; color: #f2f0f2; font-size: 20px; line-height: 1.25; font-weight: 500; }
.episode-title { overflow: hidden; color: #f2f0f1; font-size: 19px; line-height: 1.32; font-weight: 500; letter-spacing: -.3px; text-overflow: ellipsis; }
.episode-description { overflow: hidden; margin: 4px 0 0; color: #9e9ba6; font-size: 15.5px; line-height: 1.35; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.episode-date, .episode-duration { color: #9d9aa5; font-size: 15.5px; line-height: 1; text-align: right; white-space: nowrap; }
.episode-menu { width: 25px; height: 48px; display: grid; place-items: center; color: #f3f1f3; }
.episode-menu svg { width: 20px; height: 20px; }
.all-episodes { height: 44px; margin: 1px auto 0; display: flex; align-items: center; justify-content: center; gap: 16px; color: #ca5af0; font-size: 18px; letter-spacing: -.25px; transform: translateX(-30px); }
.all-episodes svg { width: 22px; height: 22px; stroke-width: 1.8; }

.audio-player { position: fixed; z-index: 20; right: 24px; bottom: 0; left: 24px; height: var(--player-height); border: 1px solid transparent; border-radius: 14px 14px 0 0; background: linear-gradient(105deg,rgba(8,10,39,.97),rgba(5,7,29,.98)) padding-box, linear-gradient(103deg,rgba(255,31,148,.72),rgba(72,41,255,.25) 40%,rgba(94,52,255,.27) 100%) border-box; box-shadow: 0 -10px 35px rgba(8,8,39,.35), inset 0 1px 0 rgba(255,255,255,.02); backdrop-filter: blur(15px); }
.audio-player::before { content: ""; position: absolute; top: 2px; bottom: 0; left: 0; width: 210px; pointer-events: none; background: radial-gradient(circle at 38% 48%,rgba(55,44,169,.17),transparent 64%); }
.player-inner { position: relative; width: calc(100% - 128px); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 497px 360px minmax(0,1fr); align-items: center; }
.now-playing { min-width: 0; display: flex; align-items: center; gap: 28px; }
.player-cover { width: 84px; height: 80px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; transform: translate(1px,-5px); }
.track-copy { min-width: 0; }
.track-line { min-width: 0; display: flex; align-items: baseline; gap: 13px; color: #f3f1f3; white-space: nowrap; }
.player-number { flex: 0 0 auto; font-size: 17px; font-weight: 500; }
.player-title { overflow: hidden; font-size: 16px; font-weight: 500; letter-spacing: -.15px; text-overflow: ellipsis; }
.player-subline { display: flex; align-items: center; gap: 126px; margin-top: 9px; color: #a9a6b1; font-size: 16px; }
.heart-button { width: 28px; height: 28px; display: grid; place-items: center; color: #a8a5b1; }
.heart-button svg { width: 21px; height: 21px; stroke-width: 1.7; }
.heart-button[aria-pressed="true"] { color: #f12c9b; }
.heart-button[aria-pressed="true"] svg { fill: currentColor; }
.transport-controls { display: flex; align-items: center; justify-content: center; gap: 31px; }
.transport-small { width: 34px; height: 42px; display: grid; place-items: center; color: #f3f1f3; transition: color 160ms ease, transform 160ms ease; }
.transport-small:hover { color: #fff; transform: scale(1.06); }
.transport-small[aria-pressed="true"], .heart-button[aria-pressed="true"] { color: #ff35a2; }
.transport-small svg { width: 25px; height: 25px; stroke-width: 1.7; }
.js-prev svg, .js-next svg { width: 29px; height: 29px; }
.main-transport { position: relative; width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: linear-gradient(148deg,#4775ff 0%,#9c36f7 49%,#ff258e 100%); box-shadow: 0 0 11px rgba(134,61,255,.95), 0 0 28px rgba(178,31,239,.55), 0 0 46px rgba(72,66,255,.23), inset 0 1px 4px rgba(255,255,255,.35); transition: transform 160ms ease, filter 160ms ease; }
.main-transport::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: inherit; }
.main-transport:hover { transform: scale(1.035); filter: brightness(1.08); }
.main-transport svg { width: 34px; height: 34px; stroke-width: 0; }
.main-transport .play-state { margin-left: 3px; }
body:not(.is-playing) .main-transport .pause-state, body.is-playing .main-transport .play-state { display: none; }
body.is-playing .main-transport .pause-state, body:not(.is-playing) .main-transport .play-state { display: block; }
.player-progress { min-width: 0; padding-left: 45px; display: grid; grid-template-columns: auto 205px auto 31px 124px 32px; align-items: center; justify-content: start; gap: 20.5px; color: #eeecef; }
.current-time, .duration { font-size: 15.5px; line-height: 1; white-space: nowrap; }
.duration { color: #aaa7b2; }
.range-wrap { position: relative; height: 22px; display: flex; align-items: center; }
.range-wrap input { --progress: 50%; width: 100%; height: 4px; margin: 0; appearance: none; border: 0; border-radius: 999px; outline: 0; background: linear-gradient(90deg,#fb1994 0 var(--progress),#2d315c var(--progress) 100%); cursor: pointer; }
.range-wrap input::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; border: 0; border-radius: 50%; background: #f5f4f6; box-shadow: 0 0 2px rgba(0,0,0,.55); }
.range-wrap input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #f5f4f6; box-shadow: 0 0 2px rgba(0,0,0,.55); }
.volume-button, .collapse-player { width: 31px; height: 36px; display: grid; place-items: center; color: #f3f1f3; }
.volume-button svg { width: 27px; height: 27px; stroke-width: 1.7; }
.collapse-player svg { width: 24px; height: 24px; }
.toast { position: fixed; z-index: 50; right: 28px; bottom: calc(var(--player-height) + 22px); max-width: min(360px,calc(100vw - 36px)); padding: 11px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #f5f3f5; background: rgba(10,11,35,.96); box-shadow: 0 12px 35px rgba(0,0,0,.32); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
body.player-collapsed { --player-height: 54px; }
body.player-collapsed .audio-player { height: 46px; }
body.player-collapsed .player-inner > :not(.player-progress), body.player-collapsed .player-progress > :not(.collapse-player) { display: none; }
body.player-collapsed .player-inner { display: block; width: 100%; }
body.player-collapsed .player-progress { display: block; padding: 0; }
body.player-collapsed .collapse-player { position: absolute; top: 5px; right: 18px; display: grid; }
body.player-collapsed .collapse-player svg { transform: rotate(180deg); }

@media (max-width:1450px) {
  .desktop-nav { margin-right: 0; gap: 34px; }
  .search-button { margin-left: 3px; }
  .login-button { margin-left: -5px; }
  main { width: min(var(--content-width),calc(100% - 64px)); }
  .hero-actions { gap: 15px; }
  .primary-button { width: 300px; }
  .secondary-button:first-of-type { width: 150px; }
  .secondary-button:last-of-type { width: 171px; }
  .episode-row { grid-template-columns: 89px 48px minmax(0,1fr) 116px 68px 24px; column-gap: 22px; }
  .player-inner { width: calc(100% - 80px); grid-template-columns: minmax(390px,472px) 340px minmax(0,1fr); }
  .player-progress { padding-left: 0; grid-template-columns: auto minmax(105px,1fr) auto 30px minmax(80px,110px) 30px; justify-content: end; gap: 13px; }
}
@media (max-width:1120px) {
  :root { --player-height: 128px; }
  .desktop-nav { gap: 24px; }
  .hero { grid-template-columns: minmax(340px,40%) minmax(0,1fr); gap: 30px; }
  .cover-wrap, .podcast-cover { width: 100%; height: auto; aspect-ratio: 1/1; }
  .hero h1 { font-size: clamp(58px,7vw,76px); }
  .description { font-size: 19px; line-height: 1.55; }
  .hero-actions { flex-wrap: wrap; }
  .primary-button { flex: 1 1 100%; width: auto; }
  .episode-row { grid-template-columns: 78px 48px minmax(0,1fr) 106px 64px 22px; column-gap: 16px; }
  .episode-thumb { width: 76px; height: 61px; }
  .player-inner { width: calc(100% - 48px); grid-template-columns: minmax(330px,1fr) 325px minmax(300px,1fr); }
  .now-playing { gap: 18px; }
  .player-subline { gap: 80px; }
  .transport-controls { gap: 22px; }
}
@media (max-width:900px) {
  :root { --player-height: 156px; }
  .site-header { height: 70px; }
  .header-inner { width: calc(100% - 32px); }
  .brand img { width: 41px; height: 39px; }
  .brand-copy { font-size: 21px; }
  .desktop-nav { display: none; }
  body.menu-open .desktop-nav { position: absolute; z-index: 30; top: 70px; right: 12px; width: min(330px,calc(100vw - 24px)); height: auto; margin: 0; padding: 18px; display: grid; gap: 8px; border: 1px solid rgba(130,74,255,.45); border-radius: 15px; background: rgba(5,6,26,.98); box-shadow: 0 20px 55px rgba(0,0,0,.5); }
  body.menu-open .desktop-nav > a { min-height: 44px; display: flex; align-items: center; }
  body.menu-open .search-button { width: 100%; margin: 0; justify-content: flex-start; }
  body.menu-open .login-button { width: 100%; margin: 5px 0 0; }
  .mobile-menu { display: grid; }
  main { width: min(680px,calc(100% - 32px)); margin-top: 24px; }
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .cover-wrap { max-width: 520px; margin: 0 auto; }
  .hero-copy { padding-top: 0; }
  .desktop-break { display: none; }
  .hero h1 { margin-top: 12px; font-size: clamp(56px,14vw,80px); }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .primary-button { grid-column: 1/-1; }
  .secondary-button:first-of-type, .secondary-button:last-of-type { width: 100%; }
  .episodes { margin-top: 35px; }
  .episode-row { grid-template-columns: 70px 48px minmax(0,1fr) 22px; column-gap: 14px; min-height: 86px; }
  .episode-thumb { width: 68px; height: 55px; }
  .episode-date, .episode-duration { display: none; }
  .episode-title-line { gap: 10px; }
  .episode-title { font-size: 17px; }
  .episode-description { font-size: 14px; }
  .all-episodes { transform: none; }
  .audio-player { right: 10px; left: 10px; }
  .player-inner { width: calc(100% - 24px); grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 82px 54px; align-content: center; }
  .player-cover { width: 64px; height: 62px; transform: none; }
  .transport-controls { grid-column: 2; grid-row: 1; gap: 13px; }
  .transport-controls .transport-small:first-child, .transport-controls .transport-small:last-child { display: none; }
  .main-transport { width: 58px; height: 58px; }
  .player-progress { grid-column: 1/-1; grid-row: 2; padding-left: 0; grid-template-columns: auto minmax(100px,1fr) auto 30px minmax(74px,110px); justify-content: stretch; gap: 17px; }
  .collapse-player { display: none; }
}
@media (max-width:560px) {
  :root { --player-height: 148px; }
  .brand-copy { font-size: 19px; }
  main { width: calc(100% - 24px); }
  .category-badge { height: 32px; padding: 0 15px; font-size: 13px; }
  .hero h1 { font-size: 58px; letter-spacing: -2.4px; }
  .author { font-size: 20px; }
  .description { font-size: 17px; }
  .hero-actions { grid-template-columns: minmax(0,1fr); }
  .primary-button, .secondary-button { min-width: 0; grid-column: auto; width: 100% !important; height: 57px; padding-inline: 14px; white-space: normal; text-align: center; }
  .episode-row { grid-template-columns: 58px 44px minmax(0,1fr) 18px; column-gap: 10px; }
  .episode-thumb { width: 56px; height: 48px; }
  .episode-play { width: 42px; height: 42px; }
  .episode-title-line { display: block; }
  .episode-number { display: none; }
  .episode-title { display: block; font-size: 15.5px; }
  .episode-description { font-size: 13px; }
  .player-inner { width: calc(100% - 18px); grid-template-rows: 76px 52px; }
  .player-cover { width: 54px; height: 54px; }
  .now-playing { gap: 12px; }
  .track-line { display: block; }
  .player-number { display: none; }
  .player-title { display: block; max-width: 190px; font-size: 14px; }
  .player-subline { margin-top: 5px; gap: 8px; font-size: 13px; }
  .transport-controls { gap: 3px; }
  .transport-controls .js-prev, .transport-controls .js-next { display: none; }
  .main-transport { width: 54px; height: 54px; }
  .player-progress { grid-template-columns: auto minmax(70px,1fr) auto 28px; gap: 9px; }
  .volume-wrap { display: none; }
  .current-time, .duration { font-size: 13px; }
}

/* Sur mobile, le bouton à droite ouvre le lecteur immersif.
   Sur ordinateur, il conserve sa fonction compacte de réduction. */
@media (max-width:900px) {
  .collapse-player {
    position: absolute;
    z-index: 4;
    top: -38px;
    right: 0;
    width: 44px;
    height: 38px;
    display: grid;
    border: 1px solid rgba(153,83,255,.42);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(8,10,39,.97);
    box-shadow: 0 -8px 24px rgba(0,0,0,.22);
  }
  .audio-player,
  .player-inner,
  .player-cover,
  .now-playing,
  .transport-controls,
  .player-progress {
    transition: height .28s ease, width .28s ease, transform .28s ease, gap .28s ease;
  }
  body.player-expanded {
    --player-height: 100vh;
    --player-height: 100dvh;
    overflow: hidden;
  }
  body.player-expanded .audio-player {
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: 0 -24px 80px rgba(0,0,0,.72),0 0 80px rgba(92,43,255,.2);
  }
  body.player-expanded .audio-player::before {
    width: 100%;
    background: radial-gradient(circle at 50% 26%,rgba(101,54,255,.22),transparent 48%);
  }
  body.player-expanded .player-inner {
    width: min(520px,calc(100% - 38px));
    min-height: 100%;
    padding: max(48px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
  body.player-expanded .now-playing {
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    text-align: center;
  }
  body.player-expanded .player-cover {
    width: min(54vw,270px);
    height: auto;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#080a27,#080a27) padding-box,linear-gradient(135deg,#087cff,#7738ff,#ff168c) border-box;
    box-shadow: 0 22px 55px rgba(0,0,0,.38),0 0 35px rgba(116,58,255,.22);
  }
  body.player-expanded .track-line {
    display: flex;
    justify-content: center;
    white-space: normal;
  }
  body.player-expanded .player-number {
    display: inline;
  }
  body.player-expanded .player-title {
    max-width: min(430px,80vw);
    font-size: 20px;
    line-height: 1.3;
    white-space: normal;
  }
  body.player-expanded .player-subline {
    justify-content: center;
    gap: 18px;
    font-size: 15px;
  }
  body.player-expanded .transport-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(13px,5vw,30px);
  }
  body.player-expanded .transport-controls .transport-small:first-child,
  body.player-expanded .transport-controls .transport-small:last-child,
  body.player-expanded .transport-controls .js-prev,
  body.player-expanded .transport-controls .js-next {
    display: grid;
  }
  body.player-expanded .main-transport {
    width: 68px;
    height: 68px;
  }
  body.player-expanded .player-progress {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(90px,1fr) auto 30px minmax(70px,105px);
    gap: 12px;
  }
  body.player-expanded .volume-wrap {
    display: flex;
  }
  body.player-expanded .collapse-player {
    top: max(14px,env(safe-area-inset-top));
    right: max(14px,env(safe-area-inset-right));
    border: 1px solid rgba(69,154,255,.7);
    border-radius: 50%;
    background: rgba(9,10,38,.88);
  }
  body.player-expanded .collapse-player svg {
    transform: rotate(180deg);
  }
}

@media (max-width:430px) {
  body.player-expanded .player-inner { padding-bottom: 20px; }
  body.player-expanded .player-cover { width: min(58vw,235px); }
  body.player-expanded .player-title { font-size: 18px; }
  body.player-expanded .player-progress { grid-template-columns: auto minmax(80px,1fr) auto 30px; }
  body.player-expanded .volume-wrap { display: none; }
}

@media (max-width:360px) {
  .header-inner,
  main {
    width: calc(100% - 24px);
  }

  .brand-copy {
    font-size: 17px;
  }

  .brand img {
    width: 36px;
    height: 34px;
  }

  .hero h1 {
    font-size: 51px;
    letter-spacing: -2px;
  }

  .description {
    font-size: 16px;
  }

  .episode-row {
    grid-template-columns: 50px 40px minmax(0,1fr) 18px;
    column-gap: 8px;
  }

  .episode-thumb {
    width: 48px;
    height: 44px;
  }

  .episode-play {
    width: 40px;
    height: 40px;
  }

  .player-title {
    max-width: 135px;
  }
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape) {
  body.player-expanded .player-inner {
    width: min(760px,calc(100% - 40px));
    padding: max(14px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(180px,.82fr) minmax(300px,1.18fr);
    grid-template-rows: minmax(0,1fr) 48px;
    column-gap: clamp(22px,5vw,42px);
    row-gap: 8px;
  }

  body.player-expanded .now-playing {
    grid-column: 1;
    grid-row: 1 / 3;
    flex: none;
    justify-content: center;
    gap: 10px;
  }

  body.player-expanded .player-cover {
    width: min(43vh,170px);
    max-height: 170px;
  }

  body.player-expanded .track-line {
    align-items: center;
    gap: 8px;
  }

  body.player-expanded .player-number,
  body.player-expanded .player-title {
    font-size: 15px;
  }

  body.player-expanded .player-title {
    max-width: min(260px,36vw);
  }

  body.player-expanded .player-subline {
    margin-top: 4px;
    font-size: 13px;
  }

  body.player-expanded .transport-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: clamp(12px,3vw,25px);
  }

  body.player-expanded .player-progress {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  body.player-expanded .collapse-player {
    top: max(10px,env(safe-area-inset-top));
    right: max(12px,env(safe-area-inset-right));
  }
}

@media (max-width:650px) and (max-height:440px) and (orientation:landscape) {
  body.player-expanded .player-inner {
    width: calc(100% - 26px);
    grid-template-columns: minmax(150px,.72fr) minmax(270px,1.28fr);
    column-gap: 18px;
  }

  body.player-expanded .player-cover {
    width: min(39vh,145px);
  }

  body.player-expanded .player-title {
    max-width: 210px;
    font-size: 14px;
  }

  body.player-expanded .transport-controls {
    gap: 8px;
  }

  body.player-expanded .main-transport {
    width: 60px;
    height: 60px;
  }

  body.player-expanded .player-progress {
    grid-template-columns: auto minmax(80px,1fr) auto 30px;
    gap: 8px;
  }

  body.player-expanded .volume-wrap {
    display: none;
  }
}

.episode-play:disabled,
.js-main-play:disabled,
.js-player-toggle:disabled {
  cursor: not-allowed;
  opacity: .38;
  filter: saturate(.35);
}