/* V5.0.187 — Rail Hardware Console Splash + Volume Control Removal.
   Visual-only rail hardware polish. No rail authority, data mapping, public shell radius,
   mobile player, API, colour authority, or jacket/sleeve geometry change. */


.bhk-v5-playerRail__switchBay {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--v5-line-strong) 28%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 5%, transparent) 0%,
      color-mix(in srgb, var(--v5-surface-3) 56%, var(--v5-page)) 18%,
      color-mix(in srgb, var(--v5-page) 88%, var(--v5-surface)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 10%, transparent),
    inset 14px 0 24px rgba(0,0,0,.20),
    inset -14px 0 24px rgba(0,0,0,.20),
    0 14px 28px rgba(0,0,0,.28);
}

.bhk-v5-playerRail__switchBay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--v5-signal) 18%, transparent), transparent 38%),
    radial-gradient(circle at 86% 100%, color-mix(in srgb, var(--v5-accent) 16%, transparent), transparent 42%),
    repeating-linear-gradient(90deg,
      transparent 0 13px,
      color-mix(in srgb, var(--v5-proof) 2.4%, transparent) 13px 14px);
  mix-blend-mode: screen;
}

.bhk-v5-playerRail__switchBay::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--v5-signal) 52%, transparent),
    color-mix(in srgb, var(--v5-accent) 42%, transparent),
    transparent);
  opacity: .38;
  transform: scaleX(.74);
  transform-origin: center;
}

.bhk-v5-playerRail.is-rail-signal .bhk-v5-playerRail__switchBay::after {
  animation: bhk-v5-rail-signal-sweep .48s ease-out both;
}

.bhk-v5-playerRail__switchBay--primary {
  border-bottom-color: color-mix(in srgb, var(--v5-signal) 20%, transparent);
}

.bhk-v5-playerRail__switchBay--secondary {
  border-top: 0;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--v5-proof) 7%, transparent),
    inset 14px 0 24px rgba(0,0,0,.22),
    inset -14px 0 24px rgba(0,0,0,.22),
    0 16px 30px rgba(0,0,0,.30);
}

.bhk-v5-playerRail__bankPing,
.bhk-v5-playerRail__range {
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--v5-signal) 42%, transparent);
}

.bhk-v5-playerRail__range {
  color: color-mix(in srgb, var(--v5-proof) 86%, var(--v5-accent));
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.bhk-v5-playerRail__selectorNote {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: color-mix(in srgb, var(--v5-muted) 86%, var(--v5-proof));
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bhk-v5-playerRail__switches,
.bhk-v5-playerRail__banks {
  position: relative;
  z-index: 1;
}

.bhk-v5-playerRail__switch,
.bhk-v5-playerRail__bank {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--v5-line-strong) 44%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 8%, transparent),
      color-mix(in srgb, var(--v5-surface-2) 92%, var(--v5-page)) 44%,
      color-mix(in srgb, var(--v5-page) 84%, var(--v5-surface)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent),
    inset 0 -10px 18px rgba(0,0,0,.26),
    0 1px 0 rgba(0,0,0,.58),
    0 7px 15px rgba(0,0,0,.24);
  transform: translateY(0);
  transition:
    border-color var(--v5-fast) ease,
    background var(--v5-fast) ease,
    box-shadow var(--v5-fast) ease,
    transform var(--v5-fast) ease,
    filter var(--v5-fast) ease;
}

.bhk-v5-playerRail__switch::before,
.bhk-v5-playerRail__bank::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 4px;
  height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--v5-proof) 22%, transparent);
  opacity: .55;
}

.bhk-v5-playerRail__switch::after,
.bhk-v5-playerRail__bank::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--v5-muted) 36%, transparent);
  transform: translateX(-50%);
  opacity: .55;
}

.bhk-v5-playerRail__switch:hover,
.bhk-v5-playerRail__bank:hover,
.bhk-v5-playerRail__switch:focus-visible,
.bhk-v5-playerRail__bank:focus-visible {
  border-color: color-mix(in srgb, var(--v5-line-strong) 74%, var(--v5-accent));
  filter: brightness(1.08) saturate(1.04);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent),
    inset 0 -10px 18px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb, var(--v5-accent) 18%, transparent),
    0 9px 18px rgba(0,0,0,.28);
}

.bhk-v5-playerRail__switch:active,
.bhk-v5-playerRail__bank:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent),
    inset 0 8px 18px rgba(0,0,0,.34),
    0 3px 8px rgba(0,0,0,.24);
}

.bhk-v5-playerRail__switch.is-active,
.bhk-v5-playerRail__bank.is-active {
  border-color: color-mix(in srgb, var(--v5-line-strong) 80%, var(--v5-signal));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 14%, transparent),
      color-mix(in srgb, var(--v5-accent) 42%, var(--v5-surface)) 42%,
      color-mix(in srgb, var(--v5-signal) 24%, var(--v5-page)));
  color: var(--v5-proof);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 22%, transparent),
    0 0 20px color-mix(in srgb, var(--v5-accent) 34%, transparent),
    0 0 34px color-mix(in srgb, var(--v5-signal) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 18%, transparent),
    inset 0 -10px 20px rgba(0,0,0,.26);
}

.bhk-v5-playerRail__switch.is-active::after,
.bhk-v5-playerRail__bank.is-active::after {
  height: 2px;
  background: color-mix(in srgb, var(--v5-signal) 74%, var(--v5-proof));
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--v5-signal) 72%, transparent);
}

.bhk-v5-playerRail__switchBody,
.bhk-v5-playerRail__switchLabel,
.bhk-v5-playerRail__bank span,
.bhk-v5-playerRail__bank strong {
  position: relative;
  z-index: 1;
}

.bhk-v5-playerRail__switchLabel,
.bhk-v5-playerRail__bank {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

@keyframes bhk-v5-rail-signal-sweep {
  0% { opacity: 0; transform: scaleX(.18); }
  24% { opacity: .96; transform: scaleX(1); }
  100% { opacity: .32; transform: scaleX(.74); }
}

@media (prefers-reduced-motion: reduce) {
  .bhk-v5-playerRail__switch,
.bhk-v5-playerRail__bank {
    transition: none;
  }
  .bhk-v5-playerRail.is-rail-signal .bhk-v5-playerRail__switchBay::after {
    animation: none;
  }
}


/* V5.0.190 — Rail Main Control Panel Motion & Optics Polish 95a.
   LISTEN/BROWSE/MENU selector hardware remains owned by the existing rail authority.
   This pass treats the primary and secondary selector bays as the site main control
   panel: one restrained optics plane, richer machined edges, LED active states, and
   tactile press feedback. No rail routing, Spotify logic, API/OAuth/SDK/token flow,
   colour-authority value, public shell radius, mobile player, or jacket/sleeve geometry
   change is introduced. */
.bhk-v5-playerRail__switchBay {
  --bhk-v5-rail-optic-x: 50%;
  --bhk-v5-rail-optic-y: 42%;
  --bhk-v5-rail-optic-energy: .18;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--bhk-v5-rail-optic-x) var(--bhk-v5-rail-optic-y),
      color-mix(in srgb, var(--v5-proof) 9%, transparent) 0%,
      color-mix(in srgb, var(--v5-accent) 12%, transparent) 15%,
      transparent 38%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 6%, transparent) 0%,
      color-mix(in srgb, var(--v5-surface-3) 64%, var(--v5-page)) 17%,
      color-mix(in srgb, var(--v5-page) 84%, var(--v5-surface)) 58%,
      color-mix(in srgb, var(--v5-page) 94%, var(--v5-surface-2)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 18%, transparent),
    inset 0 2px 0 color-mix(in srgb, var(--v5-line-strong) 9%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 16%, transparent),
    inset 18px 0 30px rgba(0,0,0,.24),
    inset -18px 0 30px rgba(0,0,0,.24),
    0 16px 32px rgba(0,0,0,.32);
}

.bhk-v5-playerRail__switchBay--primary {
  border-bottom-color: color-mix(in srgb, var(--v5-signal) 28%, transparent);
}

.bhk-v5-playerRail__switchBay--secondary {
  border-top: 1px solid color-mix(in srgb, var(--v5-proof) 8%, transparent);
  background:
    radial-gradient(circle at var(--bhk-v5-rail-optic-x) var(--bhk-v5-rail-optic-y),
      color-mix(in srgb, var(--v5-accent) 10%, transparent) 0%,
      color-mix(in srgb, var(--v5-signal) 8%, transparent) 16%,
      transparent 42%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-surface-2) 72%, var(--v5-page)) 0%,
      color-mix(in srgb, var(--v5-page) 90%, var(--v5-surface)) 56%,
      color-mix(in srgb, var(--v5-page) 96%, var(--v5-surface-2)) 100%);
}

.bhk-v5-playerRail__switchBay::before {
  opacity: .82;
  background:
    radial-gradient(circle at var(--bhk-v5-rail-optic-x) var(--bhk-v5-rail-optic-y),
      color-mix(in srgb, var(--v5-proof) 10%, transparent),
      transparent 30%),
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--v5-signal) 20%, transparent), transparent 38%),
    radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--v5-accent) 18%, transparent), transparent 44%),
    repeating-linear-gradient(90deg,
      transparent 0 12px,
      color-mix(in srgb, var(--v5-proof) 2.8%, transparent) 12px 13px),
    repeating-linear-gradient(0deg,
      transparent 0 9px,
      color-mix(in srgb, var(--v5-proof) 1.8%, transparent) 9px 10px);
}

.bhk-v5-playerRail__switchBay::after {
  bottom: 6px;
  height: 2px;
  opacity: calc(.32 + (var(--bhk-v5-rail-optic-energy) * .28));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--v5-signal) 40%, transparent));
}

.bhk-v5-playerRail__controlOptics {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .48;
  mix-blend-mode: screen;
  filter: saturate(1.14) contrast(1.04);
  contain: strict;
}

.bhk-v5-playerRail__switchBay > :not(.bhk-v5-playerRail__controlOptics) {
  position: relative;
  z-index: 1;
}

.bhk-v5-playerRail__bankPing {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px 2px 7px;
  border: 1px solid color-mix(in srgb, var(--v5-line-strong) 20%, transparent);
  background: color-mix(in srgb, var(--v5-page) 74%, transparent);
  color: color-mix(in srgb, var(--v5-proof) 92%, var(--v5-accent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent),
    0 0 14px color-mix(in srgb, var(--v5-accent) 12%, transparent);
}

.bhk-v5-playerRail__range[data-bhk-v5-active-status] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--v5-signal) 24%, transparent);
  background: color-mix(in srgb, var(--v5-page) 70%, transparent);
  color: color-mix(in srgb, var(--v5-proof) 88%, var(--v5-signal));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--v5-signal) 16%, transparent);
}

.bhk-v5-playerRail__switches,
.bhk-v5-playerRail__banks {
  transform: translateZ(0);
}

.bhk-v5-playerRail__switch,
.bhk-v5-playerRail__bank {
  border-color: color-mix(in srgb, var(--v5-line-strong) 50%, transparent);
  background:
    radial-gradient(circle at var(--bhk-v5-rail-optic-x) 0%,
      color-mix(in srgb, var(--v5-proof) 10%, transparent),
      transparent 34%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 10%, transparent) 0%,
      color-mix(in srgb, var(--v5-surface-2) 84%, var(--v5-page)) 42%,
      color-mix(in srgb, var(--v5-page) 88%, var(--v5-surface)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--v5-line) 34%, transparent),
    inset 0 -11px 18px rgba(0,0,0,.30),
    0 1px 0 rgba(0,0,0,.62),
    0 8px 16px rgba(0,0,0,.26);
}

.bhk-v5-playerRail__switch::before,
.bhk-v5-playerRail__bank::before {
  left: 5px;
  right: 5px;
  top: 3px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--v5-proof) 38%, transparent),
    color-mix(in srgb, var(--v5-accent) 18%, transparent),
    transparent);
  opacity: .7;
}

.bhk-v5-playerRail__switch::after,
.bhk-v5-playerRail__bank::after {
  width: 20px;
  bottom: 5px;
  background: color-mix(in srgb, var(--v5-muted) 42%, transparent);
}

.bhk-v5-playerRail__switch:hover,
.bhk-v5-playerRail__bank:hover,
.bhk-v5-playerRail__switch:focus-visible,
.bhk-v5-playerRail__bank:focus-visible {
  border-color: color-mix(in srgb, var(--v5-line-strong) 78%, var(--v5-accent));
  filter: brightness(1.1) saturate(1.08);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 22%, transparent),
    inset 0 -12px 18px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--v5-accent) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--v5-accent) 16%, transparent),
    0 10px 20px rgba(0,0,0,.30);
}

.bhk-v5-playerRail__switch.is-hardware-press,
.bhk-v5-playerRail__bank.is-hardware-press,
.bhk-v5-playerRail__switch:active,
.bhk-v5-playerRail__bank:active {
  transform: translateY(1px) scale(.992);
  filter: brightness(.98) saturate(1.05);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent),
    inset 0 10px 18px rgba(0,0,0,.38),
    0 3px 8px rgba(0,0,0,.25);
}

.bhk-v5-playerRail__switchBay.is-control-press {
  --bhk-v5-rail-optic-energy: .72;
}

.bhk-v5-playerRail__switch.is-active,
.bhk-v5-playerRail__bank.is-active {
  border-color: color-mix(in srgb, var(--v5-line-strong) 84%, var(--v5-signal));
  background:
    radial-gradient(circle at 50% 0%,
      color-mix(in srgb, var(--v5-proof) 18%, transparent),
      transparent 32%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 16%, transparent) 0%,
      color-mix(in srgb, var(--v5-accent) 46%, var(--v5-surface)) 40%,
      color-mix(in srgb, var(--v5-signal) 26%, var(--v5-page)) 100%);
  text-shadow: 0 0 10px color-mix(in srgb, var(--v5-signal) 38%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--v5-accent) 36%, transparent),
    0 0 34px color-mix(in srgb, var(--v5-signal) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 22%, transparent),
    inset 0 -12px 20px rgba(0,0,0,.28);
}

.bhk-v5-playerRail__switch.is-active::after,
.bhk-v5-playerRail__bank.is-active::after {
  height: 2px;
  width: 24px;
  background: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof));
  box-shadow:
    0 0 8px color-mix(in srgb, var(--v5-signal) 78%, transparent),
    0 0 16px color-mix(in srgb, var(--v5-accent) 32%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .bhk-v5-playerRail__controlOptics {
    display: none;
  }
  .bhk-v5-playerRail__switch.is-hardware-press,
.bhk-v5-playerRail__bank.is-hardware-press {
    transform: none;
  }
}

/* V5.0.191 — Rail Status Row Alignment Cleanup.
   Follow-up to V5.0.190: the primary rail switch bay keeps the active BNK/S
   readout as a left-aligned status pill, moves the bank ping to the right edge,
   and hides the redundant selector note. Rail authority, selector routing,
   Spotify logic, Browse/Menu behaviour, mobile player, colour authority, public
   shell radius, and jacket/sleeve geometry remain unchanged. */
.bhk-v5-playerRail__switchBay--primary {
  padding-top: 38px;
}

.bhk-v5-playerRail__switchBay--primary > .bhk-v5-playerRail__range[data-bhk-v5-active-status] {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 2;
  justify-content: flex-start;
  margin: 0;
}

.bhk-v5-playerRail__switchBay--primary > .bhk-v5-playerRail__bankPing {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
  justify-content: flex-end;
  margin: 0;
}

.bhk-v5-playerRail__switchBay--primary > .bhk-v5-playerRail__selectorNote {
  display: none !important;
}

/* V5.0.192 — Rail Track List Selector Parity Polish.
   Follow-up to V5.0.190/V5.0.191: the Listen track list rows now share
   the same machined selector language as the S1-S16 / BNK control bays while
   staying readable as song-title rows. Visual-only: no rail authority, bank
   routing, Spotify logic, Browse/Menu behaviour, mobile player, colour-authority
   value, public shell radius, or jacket/sleeve geometry change. */
html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__contentSlot {
  position: relative;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__tracks {
  gap: 6px;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  gap: 8px;
  min-height: 38px;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--v5-line-strong) 34%, transparent);
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 0%,
      color-mix(in srgb, var(--v5-proof) 8%, transparent),
      transparent 34%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 5%, transparent) 0%,
      color-mix(in srgb, var(--v5-surface-2) 62%, var(--v5-page)) 38%,
      color-mix(in srgb, var(--v5-page) 88%, var(--v5-surface)) 100%);
  color: color-mix(in srgb, var(--v5-proof) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--v5-line) 28%, transparent),
    inset 10px 0 18px rgba(0,0,0,.18),
    inset -10px 0 18px rgba(0,0,0,.14),
    0 1px 0 rgba(0,0,0,.56),
    0 8px 16px rgba(0,0,0,.18);
  transform: translateY(0);
  transition:
    border-color var(--v5-fast) ease,
    background var(--v5-fast) ease,
    box-shadow var(--v5-fast) ease,
    color var(--v5-fast) ease,
    filter var(--v5-fast) ease,
    transform var(--v5-fast) ease;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 4px;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--v5-proof) 30%, transparent),
    color-mix(in srgb, var(--v5-accent) 14%, transparent),
    transparent);
  opacity: .58;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  z-index: 0;
  width: 2px;
  pointer-events: none;
  background: color-mix(in srgb, var(--v5-muted) 28%, transparent);
  opacity: .42;
  box-shadow: none;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track > * {
  position: relative;
  z-index: 1;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__trackNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--v5-line-strong) 46%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 9%, transparent),
      color-mix(in srgb, var(--v5-surface-2) 74%, var(--v5-page)) 48%,
      color-mix(in srgb, var(--v5-page) 84%, var(--v5-surface)) 100%);
  color: color-mix(in srgb, var(--v5-proof) 88%, var(--v5-accent));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent),
    inset 0 -8px 14px rgba(0,0,0,.26),
    0 0 0 1px rgba(0,0,0,.18);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__trackTitle {
  color: color-mix(in srgb, var(--v5-proof) 92%, transparent);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-shadow: 0 1px 0 rgba(0,0,0,.38);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__trackPlay {
  width: 22px;
  min-width: 22px;
  height: 24px;
  border-color: color-mix(in srgb, var(--v5-line-strong) 40%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 8%, transparent),
      color-mix(in srgb, var(--v5-surface-3) 78%, var(--v5-page)) 100%);
  color: color-mix(in srgb, var(--v5-proof) 82%, var(--v5-accent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent),
    inset 0 -8px 14px rgba(0,0,0,.28);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track:hover,
html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track:focus-visible {
  border-color: color-mix(in srgb, var(--v5-line-strong) 62%, var(--v5-accent));
  filter: brightness(1.06) saturate(1.04);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 16%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--v5-accent) 18%, transparent),
    inset 10px 0 18px rgba(0,0,0,.16),
    inset -10px 0 18px rgba(0,0,0,.13),
    0 0 0 1px color-mix(in srgb, var(--v5-accent) 16%, transparent),
    0 10px 18px rgba(0,0,0,.22);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track:active {
  transform: translateY(1px);
  filter: brightness(.98) saturate(1.02);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent),
    inset 0 9px 18px rgba(0,0,0,.34),
    0 4px 10px rgba(0,0,0,.20);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-active {
  border-color: color-mix(in srgb, var(--v5-line-strong) 78%, var(--v5-signal));
  background:
    radial-gradient(circle at 14% 0%,
      color-mix(in srgb, var(--v5-proof) 14%, transparent),
      transparent 32%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 10%, transparent) 0%,
      color-mix(in srgb, var(--v5-accent) 38%, var(--v5-surface)) 42%,
      color-mix(in srgb, var(--v5-signal) 17%, var(--v5-page)) 100%);
  color: var(--v5-proof);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 20%, transparent),
    0 0 17px color-mix(in srgb, var(--v5-accent) 25%, transparent),
    0 0 28px color-mix(in srgb, var(--v5-signal) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 18%, transparent),
    inset 0 -10px 18px rgba(0,0,0,.27);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-active::after {
  top: 5px;
  bottom: 5px;
  width: 3px;
  background: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof));
  opacity: 1;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--v5-signal) 72%, transparent),
    0 0 16px color-mix(in srgb, var(--v5-accent) 28%, transparent);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-active .bhk-v5-playerRail__trackNo,
html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-active .bhk-v5-playerRail__trackPlay {
  border-color: color-mix(in srgb, var(--v5-line-strong) 78%, var(--v5-signal));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--v5-proof) 14%, transparent),
      color-mix(in srgb, var(--v5-accent) 42%, var(--v5-surface)) 44%,
      color-mix(in srgb, var(--v5-signal) 20%, var(--v5-page)) 100%);
  color: var(--v5-proof);
  text-shadow: 0 0 9px color-mix(in srgb, var(--v5-signal) 38%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 20%, transparent),
    inset 0 -8px 14px rgba(0,0,0,.25),
    0 0 12px color-mix(in srgb, var(--v5-accent) 24%, transparent);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-active .bhk-v5-playerRail__trackTitle {
  color: color-mix(in srgb, var(--v5-proof) 98%, var(--v5-signal));
  text-shadow: 0 0 10px color-mix(in srgb, var(--v5-signal) 16%, transparent), 0 1px 0 rgba(0,0,0,.42);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-empty {
  opacity: .56;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-empty .bhk-v5-playerRail__trackNo {
  opacity: .58;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track.is-empty .bhk-v5-playerRail__trackTitle::before {
  width: 42%;
  background: color-mix(in srgb, var(--v5-line-strong) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__track {
    transition: none;
  }
}