/* V10: the selected track becomes one continuous state, not a new visual system. */

:root{
  --v10-player-line:rgba(233,202,206,.42);
  --v10-player-muted:#bda9a7;
  --v10-player-ease:cubic-bezier(.16,1,.3,1);
}

.listening-guide{
  width:min(1500px,100%);
  margin:58px auto 86px;
  padding:23px 0 24px;
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(520px,1.45fr) minmax(250px,.62fr);
  align-items:center;
  gap:42px;
  border-top:1px solid rgba(239,224,215,.24);
  border-bottom:1px solid rgba(239,224,215,.16);
}

.listening-guide-intro{
  display:grid;
  gap:9px;
}

.listening-guide-intro span,
.listening-guide ol b{
  color:#d9abb1;
  font:600 11px/1.2 "DM Sans",sans-serif;
  letter-spacing:.14em;
}

.listening-guide-intro strong{
  max-width:230px;
  color:#f2e6df;
  font:500 18px/1.45 "Noto Sans SC","DM Sans",sans-serif;
}

.listening-guide ol{
  position:relative;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  list-style:none;
}

.listening-guide li{
  min-height:54px;
  padding:3px 24px;
  display:grid;
  align-content:center;
  gap:8px;
  border-left:1px solid rgba(239,224,215,.2);
}

.listening-guide li:last-child{border-right:1px solid rgba(239,224,215,.2)}
.listening-guide li span{color:#f0e1dc;font-size:13px;line-height:1.35}
.listening-guide>p{margin:0;color:#aa9996;font-size:12px;line-height:1.75}

body.has-audio-dock{padding-bottom:148px}

.audio-dock{
  min-height:116px;
  grid-template-columns:minmax(270px,.85fr) 370px minmax(205px,.62fr) minmax(104px,auto);
  gap:20px;
  padding:11px 18px 11px 14px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .56s var(--v10-player-ease),opacity .28s ease,border-color .22s ease;
}

.audio-dock::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(157,65,80,.12),transparent 36%);
  opacity:.8;
}

.audio-dock-overview{
  min-width:0;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:16px;
}

.audio-dock-art{
  width:76px;
  aspect-ratio:1;
  margin:0;
  overflow:hidden;
  background:#1b0b0e;
  border:1px solid rgba(239,224,215,.2);
}

.audio-dock-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:1;
  transform:scale(1);
  transition:opacity .25s ease,transform .5s var(--v10-player-ease);
}

.audio-dock-art img.is-receiving{opacity:.18;transform:scale(.96)}
.audio-dock-copy{min-width:0}
.audio-dock-copy strong{font-size:27px}

.audio-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  white-space:nowrap;
}

.audio-kicker::after{
  content:"";
  width:38px;
  height:1px;
  background:linear-gradient(90deg,#e2b4ba,rgba(226,180,186,.08));
  transform-origin:left center;
}

.audio-dock[data-player-state="connecting"] .audio-kicker::after{
  animation:v10-player-connect 1.15s var(--v10-player-ease) infinite;
}

.audio-player-note{
  display:block;
  margin-top:5px;
  color:#8f7d7c;
  font:10px/1.35 "DM Sans",sans-serif;
  letter-spacing:.02em;
}

.spotify-host,
.spotify-host iframe{
  width:370px;
  height:80px;
}

.audio-dock-next{
  min-width:0;
  align-self:stretch;
  display:grid;
  align-content:center;
  gap:9px;
  padding-left:20px;
  border-left:1px solid rgba(239,224,215,.2);
}

.audio-dock-next>span{
  color:#c7939b;
  font:600 10px/1.2 "DM Sans",sans-serif;
  letter-spacing:.14em;
}

#audio-continue{
  min-width:0;
  padding:0;
  display:grid;
  gap:5px;
  border:0;
  background:none;
  color:#f3e7e1;
  text-align:left;
  cursor:pointer;
}

#audio-continue strong{
  font:500 13px/1.45 "Noto Sans SC","DM Sans",sans-serif;
  transition:color .2s ease,transform .2s ease;
}

#audio-continue small{
  color:#9e8987;
  font:600 9px/1.3 "DM Sans",sans-serif;
  letter-spacing:.12em;
}

#audio-continue:is(:hover,:focus-visible) strong{color:#fff;transform:translateX(3px)}
#audio-continue:focus-visible{outline:1px solid #efd8d7;outline-offset:6px}

.audio-dock-actions{min-width:104px;padding-right:32px}
.audio-dock-actions a{font-size:9px}

.listen-cover.is-playing{box-shadow:0 0 0 2px #d9a7ae}
.listen-cover.is-playing>span::before{content:"SELECTED · "}
.play-track.is-playing::after{content:" · SELECTED"}
#sound .sound-listen.is-playing{color:var(--v9-accent-bright)}

.v10-cover-flight{
  position:fixed;
  z-index:940;
  margin:0;
  pointer-events:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform-origin:left top;
  box-shadow:0 18px 60px rgba(0,0,0,.42);
}

@keyframes v10-player-connect{
  0%{transform:scaleX(.14);opacity:.45}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

@media(max-width:1350px){
  .listening-guide{grid-template-columns:200px minmax(470px,1.35fr) 230px;gap:28px}
  .listening-guide li{padding-inline:17px}
  .audio-dock{grid-template-columns:minmax(232px,.75fr) 350px minmax(170px,.5fr) 96px;gap:15px}
  .audio-dock-overview{grid-template-columns:64px minmax(0,1fr);gap:13px}
  .audio-dock-art{width:64px}
  .audio-dock-copy strong{font-size:24px}
  .spotify-host,.spotify-host iframe{width:350px}
  .audio-dock-next{padding-left:15px}
  #audio-continue strong{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .audio-dock,
  .audio-dock-art img,
  #audio-continue strong{transition-duration:.01ms!important}
  .audio-dock[data-player-state="connecting"] .audio-kicker::after{animation:none}
  .v10-cover-flight{display:none!important}
}