.bkm-music{--bkm-bg:#010101;--bkm-panel:#151515;--bkm-text:#f4f3ef;--bkm-muted:#a6a5a3;color:var(--bkm-text);font-family:Roboto,Arial,Helvetica,sans-serif;max-width:100%;min-width:0;overflow:visible;width:100%}.bkm-music *{box-sizing:border-box}.bkm-track{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 12px;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none}.bkm-track::-webkit-scrollbar{display:none}.bkm-card{background:transparent;flex:0 0 min(82%,920px);min-width:0;scroll-snap-align:start}.bkm-card__media{aspect-ratio:16/9;background:var(--bkm-panel);overflow:hidden}.bkm-style-rounded .bkm-card__media{border-radius:28px}.bkm-style-square .bkm-card__media{border-radius:0}.bkm-card__media img{display:block;height:100%;object-fit:cover;width:100%}.bkm-card__placeholder{height:100%;width:100%;background:linear-gradient(135deg,#151515,#242424)}.bkm-card__body{background:var(--bkm-panel);margin:-18px clamp(7px,1.1vw,14px) 0;padding:28px clamp(18px,2.2vw,30px) 16px;position:relative;z-index:2}.bkm-style-rounded .bkm-card__body{border-radius:0 0 24px 24px}.bkm-card__title{color:var(--bkm-text);font-size:clamp(20px,1.8vw,28px);font-weight:400;letter-spacing:.045em;line-height:1.2;margin:0}.bkm-card__subtitle{color:var(--bkm-muted);font-size:14px;line-height:1.45;margin-top:7px}.bkm-card__description{color:var(--bkm-muted);font-size:15px;line-height:1.55;margin-top:10px;max-width:64ch}.bkm-card__description p{margin:0}.bkm-listen{align-items:center;background:transparent!important;border:0!important;border-top:1px solid rgba(244,243,239,.12)!important;border-radius:0!important;box-shadow:none!important;color:var(--bkm-text)!important;cursor:pointer;display:flex;font:inherit;font-size:13px;justify-content:space-between;letter-spacing:.06em;margin-top:18px;padding:12px 0 2px!important;text-transform:none;width:100%}.bkm-listen__chevron{font-size:18px;transition:transform .28s ease}.bkm-listen.is-open .bkm-listen__chevron{transform:rotate(180deg)}.bkm-nav{align-items:center;display:flex;gap:12px;justify-content:center;margin-top:15px}.bkm-nav__dots{align-items:center;display:flex;gap:7px}.bkm-nav__dot{background:#6f6f6f!important;border:0!important;border-radius:50%!important;box-shadow:none!important;height:7px!important;min-height:7px!important;min-width:7px!important;padding:0!important;width:7px!important}.bkm-nav__dot.is-active{background:var(--bkm-text)!important}.bkm-nav__arrow{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--bkm-muted)!important;font-size:22px!important;line-height:1!important;padding:0 4px!important}.bkm-nav__arrow:hover{color:var(--bkm-text)!important}.bkm-panels{margin-top:12px;min-width:0;width:100%}.bkm-panel{background:transparent;opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .34s ease}.bkm-panel.is-open{opacity:1;transform:translateY(0)}.bkm-panel__inner{display:flex;flex-direction:column;gap:18px;padding:8px 0 20px}.bkm-media{background:var(--bkm-panel);padding:clamp(14px,2vw,22px);position:relative}.bkm-style-rounded .bkm-media{border-radius:24px}.bkm-media__title{font-size:15px;font-weight:400;letter-spacing:.035em;margin:0 0 12px}.bkm-media__row{align-items:stretch;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto}.bkm-media__embed{background:#0b0b0b;min-width:0;overflow:hidden}.bkm-style-rounded .bkm-media__embed{border-radius:15px}.bkm-media__embed iframe{border:0;display:block;width:100%}.bkm-media--soundcloud .bkm-media__embed iframe{height:166px}.bkm-media--spotify .bkm-media__embed iframe{height:152px}.bkm-media--youtube .bkm-media__embed{aspect-ratio:16/9}.bkm-media--youtube .bkm-media__embed iframe{height:100%}.bkm-performers-button{align-items:center;align-self:stretch;background:transparent!important;border:1px solid rgba(244,243,239,.16)!important;border-radius:14px!important;box-shadow:none!important;color:var(--bkm-text)!important;display:flex!important;flex-direction:column;font:inherit!important;font-size:11px!important;gap:6px!important;justify-content:center;letter-spacing:.05em;min-width:84px;padding:10px!important}.bkm-performers-button>span:first-child{align-items:center;border:1px solid rgba(244,243,239,.42);border-radius:50%;display:flex;height:22px;justify-content:center;width:22px}.bkm-performers{background:#1d1d1d;border:1px solid rgba(244,243,239,.10);box-shadow:0 18px 60px rgba(0,0,0,.38);position:absolute;right:18px;top:18px;width:min(330px,calc(100% - 36px));z-index:10}.bkm-style-rounded .bkm-performers{border-radius:18px}.bkm-performers__head{align-items:center;border-bottom:1px solid rgba(244,243,239,.10);display:flex;justify-content:space-between;padding:14px 16px}.bkm-performers__head button{background:transparent!important;border:0!important;color:var(--bkm-muted)!important;font-size:20px!important;padding:0!important}.bkm-performers dl{margin:0;padding:8px 16px 14px}.bkm-performers dl>div{display:grid;gap:12px;grid-template-columns:1fr 1fr;padding:7px 0}.bkm-performers dt{color:var(--bkm-text)}.bkm-performers dd{color:var(--bkm-muted);margin:0;text-align:right}@media(min-width:1200px){.bkm-card{flex-basis:min(72%,1040px)}}@media(max-width:767px){.bkm-card{flex-basis:92%}.bkm-card__media{aspect-ratio:4/3}.bkm-card__body{margin-top:-12px;padding:22px 16px 14px}.bkm-style-rounded .bkm-card__media{border-radius:20px}.bkm-style-rounded .bkm-card__body{border-radius:0 0 18px 18px}.bkm-media__row{grid-template-columns:1fr}.bkm-performers-button{align-self:auto;flex-direction:row;justify-content:flex-end;min-width:0}.bkm-performers{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;z-index:999999}.bkm-media--soundcloud .bkm-media__embed iframe{height:166px}.bkm-media--spotify .bkm-media__embed iframe{height:152px}}

.bkm-card__actions{align-items:flex-end;border-top:1px solid rgba(244,243,239,.12);display:flex;gap:12px;margin-top:18px}.bkm-card__actions .bkm-listen{border-top:0!important;flex:1;margin-top:0;min-width:0;padding-top:12px!important}.bkm-booklet{align-items:center;align-self:stretch;color:var(--bkm-muted)!important;display:flex;justify-content:center;min-width:34px;padding:10px 2px 0;text-decoration:none!important;transition:color .2s ease,transform .2s ease}.bkm-booklet svg{fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.35;width:20px}.bkm-booklet:hover,.bkm-booklet:focus-visible{color:var(--bkm-text)!important;transform:translateY(-1px)}.bkm-visually-hidden{clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.bkm-card__actions>.bkm-booklet:only-child{border-top:0;margin-left:auto;padding-top:12px}


/* BK Music 0.3.0 */
.bkm-music,.bkm-music button,.bkm-music a,.bkm-music input,.bkm-music select,.bkm-music textarea{font-family:Roboto,Arial,Helvetica,sans-serif!important}.bkm-card__heading{align-items:center;display:flex;gap:14px;justify-content:space-between;min-width:0}.bkm-card__title{min-width:0}.bkm-card__next{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--bkm-muted)!important;cursor:pointer;font:inherit!important;font-size:25px!important;font-weight:300!important;line-height:1!important;margin-left:auto!important;min-height:30px!important;min-width:30px!important;padding:0!important;transition:color .2s ease,transform .2s ease}.bkm-card__next:hover,.bkm-card__next:focus-visible{color:var(--bkm-text)!important;transform:translateX(2px)}.bkm-panels{display:flex;justify-content:center}.bkm-panel{width:100%}.bkm-panel__inner{margin-inline:auto;max-width:980px;width:min(100%,980px)}.bkm-media{width:100%}@media(max-width:767px){.bkm-panel__inner{max-width:none;width:100%}.bkm-card__next{font-size:23px!important}}
\n\n/* ================================================================\n   BK Music 0.4.0 — compact SoundCloud stack + clearer Listen toggle\n   ================================================================ */\n/* Force the established site typography on headings too; some WordPress\n   themes assign a separate heading family with high specificity. */\n.bkm-music .bkm-card__title,\n.bkm-music .bkm-card__title *,\n.bkm-music .bkm-media__title,\n.bkm-music .bkm-media__title * {\n  font-family: Roboto, Arial, Helvetica, sans-serif !important;\n  font-style: normal !important;\n}\n\n/* Listen is a true accordion control. The right-facing chevron sits before\n   the label and rotates downward while the panel is open. Clicking the same\n   control closes it again. */\n.bkm-listen {\n  justify-content: flex-start !important;\n  gap: 8px;\n}\n.bkm-listen__chevron {\n  display: inline-block;\n  flex: 0 0 auto;\n  font-size: 19px !important;\n  line-height: 1;\n  transform: rotate(0deg);\n  transform-origin: 50% 50%;\n  transition: transform .24s ease;\n}\n.bkm-listen.is-open .bkm-listen__chevron { transform: rotate(90deg); }\n.bkm-listen__text { line-height: 1.2; }\n\n/* Listening items are a compact vertical flow. SoundCloud embeds no longer\n   sit inside separate padded cards, so multiple tracks read as one family. */\n.bkm-panel__inner { gap: 8px !important; }\n.bkm-media--soundcloud {\n  background: transparent !important;\n  padding: 0 !important;\n}\n.bkm-media--soundcloud .bkm-media__title { display: none !important; }\n.bkm-media--soundcloud .bkm-media__row {\n  gap: 0 !important;\n  overflow: visible;\n}\n.bkm-media--soundcloud .bkm-media__embed {\n  border-radius: 15px 0 0 15px !important;\n}\n.bkm-media--soundcloud .bkm-media__row:not(:has(.bkm-performers-button)) .bkm-media__embed {\n  border-radius: 15px !important;\n}\n\n/* Attach Performers directly to the SoundCloud player. The classic\n   SoundCloud widget is a light surface, so the attached information control\n   uses the same neutral light field instead of a separate dark card. */\n.bkm-media--soundcloud .bkm-performers-button {\n  align-self: stretch !important;\n  background: #f5f5f5 !important;\n  border: 0 !important;\n  border-left: 1px solid #e3e3e3 !important;\n  border-radius: 0 15px 15px 0 !important;\n  color: #242424 !important;\n  min-width: 92px;\n  padding: 10px 12px !important;\n}\n.bkm-media--soundcloud .bkm-performers-button > span:first-child {\n  border-color: rgba(36,36,36,.32) !important;\n}\n.bkm-media--soundcloud .bkm-performers-button:hover,\n.bkm-media--soundcloud .bkm-performers-button:focus-visible {\n  background: #ececec !important;\n  color: #111 !important;\n}\n.bkm-media--soundcloud .bkm-performers {\n  background: #f5f5f5 !important;\n  border-color: #e3e3e3 !important;\n  color: #242424 !important;\n}\n.bkm-media--soundcloud .bkm-performers__head { border-bottom-color: #dedede !important; }\n.bkm-media--soundcloud .bkm-performers__head strong,\n.bkm-media--soundcloud .bkm-performers dt { color: #222 !important; }\n.bkm-media--soundcloud .bkm-performers dd { color: #666 !important; }\n.bkm-media--soundcloud .bkm-performers__head button { color: #666 !important; }\n\n.bkm-style-square .bkm-media--soundcloud .bkm-media__embed,\n.bkm-style-square .bkm-media--soundcloud .bkm-performers-button { border-radius: 0 !important; }\n\n@media(max-width:767px){\n  .bkm-panel__inner { gap: 6px !important; }\n  .bkm-media--soundcloud .bkm-media__row { grid-template-columns: 1fr !important; }\n  .bkm-media--soundcloud .bkm-media__embed { border-radius: 15px 15px 0 0 !important; }\n  .bkm-media--soundcloud .bkm-media__row:not(:has(.bkm-performers-button)) .bkm-media__embed { border-radius: 15px !important; }\n  .bkm-media--soundcloud .bkm-performers-button {\n    border-left: 0 !important;\n    border-top: 1px solid #e3e3e3 !important;\n    border-radius: 0 0 15px 15px !important;\n    justify-content: center !important;\n    min-height: 42px;\n  }\n}\n

/* ================================================================
   BK Music 0.5.0 — centred recording card + attached accordion
   ================================================================ */
/* Keep the complete component centred in its WordPress/Elementor container. */
.bkm-music {
  margin-inline: auto !important;
  width: 100% !important;
}
.bkm-track {
  width: 100%;
}

/* Stronger Roboto override for theme heading rules. */
html body .bkm-music h3.bkm-card__title,
html body .bkm-music h4.bkm-media__title {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* Chevron immediately followed by Listen. */
.bkm-listen {
  gap: 4px !important;
  justify-content: flex-start !important;
}
.bkm-listen__chevron {
  margin: 0 !important;
}
.bkm-listen__text {
  margin: 0 !important;
}

/* The expanded area aligns to the selected card itself. It no longer floats as
   a separate centred content box. */
.bkm-panels {
  display: block !important;
  margin: 0 !important;
  min-width: 0;
  padding: 0 !important;
  width: 100% !important;
}
.bkm-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-left: var(--bkm-panel-left, 0px);
  opacity: 0;
  overflow: hidden;
  transform: none !important;
  transition: grid-template-rows .42s cubic-bezier(.2,.78,.24,1), opacity .26s ease !important;
  width: var(--bkm-panel-width, 100%);
}
.bkm-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.bkm-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 5px !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 18px !important;
  width: 100% !important;
}

/* Media items flow directly from the card without additional card surfaces. */
.bkm-media,
.bkm-style-rounded .bkm-media,
.bkm-style-square .bkm-media {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.bkm-media__row {
  width: 100%;
}

/* SoundCloud player + Performers are one continuous light widget. */
.bkm-media--soundcloud .bkm-media__row {
  background: #f5f5f5 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.bkm-style-rounded .bkm-media--soundcloud:first-child .bkm-media__row {
  border-radius: 0 0 15px 15px !important;
}
.bkm-media--soundcloud .bkm-media__embed,
.bkm-style-rounded .bkm-media--soundcloud .bkm-media__embed {
  background: #f5f5f5 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.bkm-media--soundcloud .bkm-performers-button {
  background: #f5f5f5 !important;
  border: 0 !important;
  border-left: 1px solid #e3e3e3 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #242424 !important;
  margin: 0 !important;
}
.bkm-media--soundcloud .bkm-performers-button:hover,
.bkm-media--soundcloud .bkm-performers-button:focus-visible {
  background: #ececec !important;
}

/* Navigation belongs below the opened player stack. */
.bkm-nav {
  margin-top: 12px;
}

@media (max-width: 767px) {
  .bkm-media--soundcloud .bkm-media__row {
    grid-template-columns: 1fr !important;
  }
  .bkm-media--soundcloud .bkm-performers-button {
    border-left: 0 !important;
    border-top: 1px solid #e3e3e3 !important;
    border-radius: 0 !important;
  }
  .bkm-style-rounded .bkm-media--soundcloud:first-child .bkm-media__row {
    border-radius: 0 0 14px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bkm-panel { transition-duration: .01ms !important; }
}


/* ================================================================
   BK Music 0.6.0 — square album cards + icon-only performers
   ================================================================ */
/* Recordings are album/CD objects: use a square cover at every breakpoint and
   keep the card compact enough that the artwork does not dominate the page. */
.bkm-card {
  flex: 0 0 min(72vw, 680px) !important;
  max-width: 680px;
}
.bkm-card__media {
  aspect-ratio: 1 / 1 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .bkm-card {
    flex-basis: min(76vw, 620px) !important;
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .bkm-card {
    flex-basis: min(88vw, 430px) !important;
    max-width: 430px;
  }
  .bkm-card__media {
    aspect-ratio: 1 / 1 !important;
  }
}

/* The SoundCloud performer control is information, not a second call-to-action.
   Keep it attached to the player, but reduce it to a restrained ensemble icon. */
.bkm-media--soundcloud .bkm-performers-button {
  align-items: center !important;
  justify-content: center !important;
  min-width: 54px !important;
  width: 54px !important;
  padding: 0 12px !important;
}
.bkm-performers-button__icon {
  display: block;
  fill: none;
  height: 23px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  width: 23px;
}
.bkm-media--soundcloud .bkm-performers-button:hover .bkm-performers-button__icon,
.bkm-media--soundcloud .bkm-performers-button:focus-visible .bkm-performers-button__icon {
  transform: translateY(-1px);
}
.bkm-performers-button__icon { transition: transform .18s ease; }

@media (max-width: 767px) {
  .bkm-media--soundcloud .bkm-performers-button {
    min-height: 40px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .bkm-performers-button__icon { height: 21px; width: 21px; }
}


/* ================================================================
   BK Music 0.7.0 — seamless album accordion + true centring
   ================================================================ */
/* The component is centred as a composition, not merely as a 100%-wide root.
   A single recording is centred in the horizontal track; multiple recordings
   keep the carousel behaviour. */
.bkm-music {
  margin-inline: auto !important;
  max-width: 1180px !important;
  width: 100% !important;
}
.bkm-music--single .bkm-track {
  justify-content: center !important;
  overflow-x: visible !important;
}
.bkm-music--single .bkm-card {
  margin-inline: auto !important;
}

/* A slightly more restrained album title. Theme heading weights/sizes are
   explicitly neutralised so the recording title stays editorial rather than
   looking like a page heading. */
html body .bkm-music h3.bkm-card__title {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: clamp(22px, 2.1vw, 29px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
  line-height: 1.18 !important;
  text-transform: none !important;
}

/* Listen is one compact label: the chevron is immediately followed by text.
   Closed = down, open = up. */
.bkm-listen {
  align-items: center !important;
  column-gap: 5px !important;
  justify-content: flex-start !important;
}
.bkm-listen__chevron {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: rotate(0deg) !important;
  transition: transform .24s ease !important;
  width: 12px;
}
.bkm-listen.is-open .bkm-listen__chevron {
  transform: rotate(180deg) !important;
}

/* Open state: the text card stops at a straight lower edge and the listening
   surface continues directly from it. This removes the visual gap between
   metadata and embedded music. */
.bkm-track {
  transition: padding-bottom .28s ease;
}
.bkm-music.has-open-panel .bkm-track {
  padding-bottom: 0 !important;
}
.bkm-style-rounded .bkm-card.is-listening .bkm-card__body {
  border-radius: 0 !important;
}
.bkm-card.is-listening .bkm-card__body {
  padding-bottom: 12px;
}

.bkm-panel {
  background: var(--bkm-panel) !important;
}
.bkm-panel.is-open {
  background: var(--bkm-panel) !important;
}
.bkm-style-rounded .bkm-panel.is-open {
  border-radius: 0 0 24px 24px !important;
}
.bkm-panel__inner {
  background: var(--bkm-panel) !important;
  gap: 0 !important;
  padding: 0 0 0 !important;
}

/* The SoundCloud widget starts exactly at the continuation's left edge. The
   performer icon occupies the far-right edge of the same continuous row. */
.bkm-media--soundcloud .bkm-media__row {
  width: 100% !important;
  background: var(--bkm-panel) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.bkm-media--soundcloud .bkm-media__embed {
  min-width: 0 !important;
  border-radius: 0 !important;
}
.bkm-media--soundcloud .bkm-performers-button {
  align-self: stretch !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.bkm-media--soundcloud + .bkm-media--soundcloud {
  border-top: 1px solid rgba(244,243,239,.08) !important;
}

/* Keep the last row clipped by the continuation's bottom corners rather than
   rounding every individual player. */
.bkm-style-rounded .bkm-panel.is-open .bkm-panel__inner {
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .bkm-music {
    max-width: 100% !important;
  }
  html body .bkm-music h3.bkm-card__title {
    font-size: 24px !important;
    letter-spacing: .025em !important;
  }
  .bkm-style-rounded .bkm-panel.is-open,
  .bkm-style-rounded .bkm-panel.is-open .bkm-panel__inner {
    border-radius: 0 0 18px 18px !important;
  }
  /* On phones the performer icon remains attached on the right, not as a
     detached second row. */
  .bkm-media--soundcloud .bkm-media__row {
    grid-template-columns: minmax(0,1fr) 48px !important;
  }
  .bkm-media--soundcloud .bkm-performers-button {
    border-top: 0 !important;
    border-left: 1px solid #e3e3e3 !important;
    min-height: 0 !important;
    min-width: 48px !important;
    width: 48px !important;
  }
}


/* ================================================================
   BK Music 0.8.0 — body-aligned listening stack + restrained SoundCloud
   ================================================================ */
/* The expanded listening stack follows the metadata/text card rather than the
   outer album artwork. JS supplies the left/width values from .bkm-card__body. */
.bkm-panels {
  width: 100% !important;
}
.bkm-panel__inner {
  width: 100% !important;
  max-width: none !important;
}

/* Restore the earlier, quieter Listen control. The right chevron turns down
   when open; clicking the same control still closes the accordion. */
.bkm-listen {
  column-gap: 4px !important;
  justify-content: flex-start !important;
}
.bkm-listen__chevron {
  display: inline-block !important;
  flex: 0 0 auto !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  transition: transform .24s ease !important;
  width: auto !important;
}
.bkm-listen.is-open .bkm-listen__chevron {
  transform: rotate(90deg) !important;
}

/* SoundCloud owns the inside of its cross-origin iframe, so its white widget
   cannot be recoloured to #151515 reliably. Keep our continuation dark and
   seamless, while letting the actual player remain native and readable. */
.bkm-media--soundcloud,
.bkm-media--soundcloud .bkm-media__row {
  background: var(--bkm-panel) !important;
}
.bkm-media--soundcloud .bkm-media__embed {
  background: transparent !important;
}

/* Multiple SoundCloud widgets form one compact stack. Intermediate rows are
   perfectly square; only the final media row receives the lower rounding. */
.bkm-style-rounded .bkm-media--soundcloud:not(.bkm-media--last) .bkm-media__row,
.bkm-style-rounded .bkm-media--soundcloud:not(.bkm-media--last) .bkm-media__embed,
.bkm-style-rounded .bkm-media--soundcloud:not(.bkm-media--last) .bkm-performers-button {
  border-radius: 0 !important;
}
.bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-media__row {
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
}
.bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-media__embed {
  border-radius: 0 0 0 24px !important;
}
.bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-performers-button {
  border-radius: 0 0 24px 0 !important;
}

@media (max-width: 767px) {
  .bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-media__row {
    border-radius: 0 0 18px 18px !important;
  }
  .bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-media__embed {
    border-radius: 0 0 0 18px !important;
  }
  .bkm-style-rounded .bkm-media--soundcloud.bkm-media--last .bkm-performers-button {
    border-radius: 0 0 18px 0 !important;
  }
}
\n\n/* ================================================================\n   BK Music 0.9.0 — elegant performer popover\n   ================================================================ */\n/* Let the performer popover rise outside the listening stack. The final\n   SoundCloud row itself still owns the lower clipping/radius. */\n.bkm-panel__inner,\n.bkm-media,\n.bkm-media__row {\n  overflow: visible;\n}\n.bkm-style-rounded .bkm-panel.is-open .bkm-panel__inner {\n  overflow: visible !important;\n}\n.bkm-media--soundcloud .bkm-media__row {\n  position: relative;\n}\n\n/* Right-anchored popover: it opens immediately above the SoundCloud embed and\n   grows leftwards. The width is content-led, but clamped to the available\n   viewport so performer cells can wrap into multiple columns when needed. */\n.bkm-music .bkm-performers {\n  background: #f2f2f2 !important;\n  border: 1px solid #dddddd !important;\n  border-radius: 14px 14px 0 14px !important;\n  bottom: calc(100% - 1px) !important;\n  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;\n  color: #202020 !important;\n  font-family: Roboto, Arial, Helvetica, sans-serif !important;\n  left: auto !important;\n  max-width: min(820px, calc(100vw - 28px)) !important;\n  min-width: min(280px, calc(100vw - 28px));\n  padding: 14px 40px 14px 16px !important;\n  position: absolute !important;\n  right: 0 !important;\n  top: auto !important;\n  width: max-content !important;\n  z-index: 40 !important;\n}\n\n.bkm-music .bkm-performers__grid {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 9px 22px;\n  justify-content: flex-end;\n  max-width: 100%;\n}\n\n.bkm-music .bkm-performers__item {\n  align-items: baseline;\n  color: #202020;\n  display: inline-flex;\n  flex: 0 0 auto;\n  font-family: Roboto, Arial, Helvetica, sans-serif !important;\n  font-size: 13px;\n  font-weight: 400;\n  gap: 6px;\n  letter-spacing: .01em;\n  line-height: 1.35;\n  white-space: nowrap;\n}\n.bkm-music .bkm-performers__name {\n  color: #202020;\n  font-weight: 500;\n}\n.bkm-music .bkm-performers__separator,\n.bkm-music .bkm-performers__instrument {\n  color: #666;\n  font-weight: 400;\n}\n\n.bkm-music .bkm-performers__close {\n  align-items: center;\n  background: transparent !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  color: #777 !important;\n  cursor: pointer;\n  display: flex;\n  font-family: Roboto, Arial, Helvetica, sans-serif !important;\n  font-size: 18px !important;\n  font-weight: 300 !important;\n  height: 28px;\n  justify-content: center;\n  line-height: 1 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  position: absolute;\n  right: 8px;\n  top: 7px;\n  width: 28px;\n}\n.bkm-music .bkm-performers__close:hover,\n.bkm-music .bkm-performers__close:focus-visible {\n  color: #111 !important;\n}\n\n/* Keep the popover visually connected to the performer icon/player edge. */\n.bkm-media--soundcloud .bkm-performers-button[aria-expanded="true"] {\n  background: #f2f2f2 !important;\n}\n\n@media (max-width: 767px) {\n  .bkm-music .bkm-performers {\n    border-radius: 12px 12px 0 12px !important;\n    bottom: calc(100% - 1px) !important;\n    left: auto !important;\n    max-width: calc(100vw - 24px) !important;\n    min-width: min(250px, calc(100vw - 24px));\n    padding: 12px 36px 12px 14px !important;\n    position: absolute !important;\n    right: 0 !important;\n    width: max-content !important;\n  }\n  .bkm-music .bkm-performers__grid {\n    gap: 8px 16px;\n  }\n  .bkm-music .bkm-performers__item {\n    font-size: 12px;\n  }\n}\n

/* ================================================================
   BK Music 0.9.1 — quieter performer popover controls
   ================================================================ */
/* Right-align the performer information while keeping each performer +
   instrument pair on one unbroken line. Multiple pairs may still wrap as
   separate columns/rows when the available width is exhausted. */
.bkm-music .bkm-performers {
  text-align: right !important;
}
.bkm-music .bkm-performers__grid {
  justify-content: flex-end !important;
  justify-items: end;
  text-align: right !important;
}
.bkm-music .bkm-performers__item {
  justify-content: flex-end;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Minimal close affordance: no coloured chip, border or hover fill. */
.bkm-music .bkm-performers__close,
.bkm-music .bkm-performers__close:hover,
.bkm-music .bkm-performers__close:focus,
.bkm-music .bkm-performers__close:active {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: currentColor !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  height: 24px !important;
  line-height: 1 !important;
  opacity: .58;
  outline-offset: 2px;
  padding: 0 !important;
  right: 8px !important;
  top: 7px !important;
  width: 24px !important;
}
.bkm-music .bkm-performers__close:hover,
.bkm-music .bkm-performers__close:focus-visible {
  opacity: 1;
}


/* ================================================================
   BK Music 0.9.2 — performer overlay reveals from SoundCloud right edge
   ================================================================ */
/* The performer information now lives *inside* the SoundCloud row and overlays
   the player instead of opening above it. The icon stays visible at the far
   right; the information surface grows left from the player's right edge only
   as far as its content needs. */
.bkm-media--soundcloud .bkm-media__row {
  position: relative !important;
}

.bkm-music .bkm-media--soundcloud .bkm-performers {
  align-content: center;
  align-items: center;
  background: #f2f2f2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: -10px 0 28px rgba(0,0,0,.10) !important;
  clip-path: inset(0 0 0 100%);
  color: #202020 !important;
  display: flex;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  height: 100% !important;
  justify-content: flex-end;
  left: auto !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: calc(100% - 54px) !important;
  min-height: 100% !important;
  min-width: min(280px, calc(100% - 54px)) !important;
  opacity: .98;
  overflow: hidden;
  padding: 30px 38px 18px 18px !important;
  position: absolute !important;
  right: 54px !important;
  top: 0 !important;
  transform: translateX(12px);
  transform-origin: 100% 50%;
  transition: clip-path .30s cubic-bezier(.2,.78,.24,1), transform .30s cubic-bezier(.2,.78,.24,1), opacity .22s ease;
  width: max-content !important;
  z-index: 30 !important;
}

.bkm-music .bkm-media--soundcloud .bkm-performers.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateX(0);
}

.bkm-music .bkm-media--soundcloud .bkm-performers__grid {
  align-content: center;
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: flex-end !important;
  max-height: 100%;
  max-width: 100%;
  text-align: right !important;
}

.bkm-music .bkm-media--soundcloud .bkm-performers__item {
  flex: 0 0 auto;
  white-space: nowrap !important;
}

.bkm-music .bkm-media--soundcloud .bkm-performers__close {
  right: 8px !important;
  top: 7px !important;
}

/* Keep the trigger as the fixed right-hand rail while the panel covers only
   the SoundCloud iframe area to its left. */
.bkm-media--soundcloud .bkm-performers-button {
  position: relative;
  z-index: 35;
}

@media (max-width: 767px) {
  .bkm-music .bkm-media--soundcloud .bkm-performers {
    bottom: 0 !important;
    height: 100% !important;
    left: auto !important;
    max-width: calc(100% - 48px) !important;
    min-height: 100% !important;
    min-width: min(230px, calc(100% - 48px)) !important;
    padding: 26px 34px 14px 14px !important;
    position: absolute !important;
    right: 48px !important;
    top: 0 !important;
    width: max-content !important;
  }
  .bkm-music .bkm-media--soundcloud .bkm-performers__grid {
    gap: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bkm-music .bkm-media--soundcloud .bkm-performers {
    transition-duration: .01ms !important;
  }
}


/* ================================================================
   BK Music 0.9.3 — row-first performer layout
   ================================================================ */
/* Performer information prefers a simple single vertical list. Up to six
   people stay in one column on every device. From seven to twelve, the panel
   switches to two balanced columns with at most six rows per column. */
.bkm-music .bkm-media--soundcloud .bkm-performers__grid {
  --bkm-performer-font-size: 13px;
  align-content: center !important;
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: max-content;
  justify-content: end !important;
  justify-items: stretch;
  column-gap: 26px;
  row-gap: 6px;
  width: max-content;
  max-width: 100%;
}

.bkm-music .bkm-media--soundcloud .bkm-performers--two-columns .bkm-performers__grid {
  grid-auto-flow: column;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(6, auto);
}

.bkm-music .bkm-media--soundcloud .bkm-performers__item {
  display: inline-flex !important;
  font-size: var(--bkm-performer-font-size, 13px) !important;
  justify-content: flex-end !important;
  justify-self: stretch;
  line-height: 1.25 !important;
  min-width: 0;
  text-align: right !important;
  white-space: nowrap !important;
}

/* More than twelve entries is an exceptional fallback: keep two columns and
   let the list scroll inside the fixed player-height overlay rather than
   creating an uncontrolled third column. */
.bkm-music .bkm-media--soundcloud .bkm-performers--overflow .bkm-performers__grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: none;
  max-height: calc(100% - 4px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 767px) {
  .bkm-music .bkm-media--soundcloud .bkm-performers__grid {
    --bkm-performer-font-size: 12px;
    column-gap: 16px;
    row-gap: 5px;
  }
}


/* ================================================================
   BK Music 0.9.4 — full SoundCloud performer cover + right-first columns
   ================================================================ */
/* When opened, performer information fully covers the SoundCloud embed area.
   The icon rail on the far right stays available as the control. */
.bkm-music .bkm-media--soundcloud .bkm-performers {
  left: 0 !important;
  right: 54px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #f2f2f2 !important;
}

/* In two-column mode the reading order starts in the right-hand column, then
   continues in the left column. Individual name/instrument pairs stay LTR. */
.bkm-music .bkm-media--soundcloud .bkm-performers--two-columns .bkm-performers__grid {
  direction: rtl;
}

.bkm-music .bkm-media--soundcloud .bkm-performers--two-columns .bkm-performers__item {
  direction: ltr;
}

.bkm-music .bkm-media--soundcloud .bkm-performers--overflow .bkm-performers__grid {
  direction: rtl;
}

.bkm-music .bkm-media--soundcloud .bkm-performers--overflow .bkm-performers__item {
  direction: ltr;
}

@media (max-width: 767px) {
  .bkm-music .bkm-media--soundcloud .bkm-performers {
    left: 0 !important;
    right: 48px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ================================================================
   BK Music 0.11.0 — active centred recording family
   ================================================================ */
.bkm-music {
  --bkm-active-card-width: min(88vw, 430px);
}
.bkm-track {
  align-items: flex-start !important;
  padding-inline: max(0px, calc((100% - var(--bkm-active-card-width)) / 2)) !important;
  scroll-padding-inline: max(0px, calc((100% - var(--bkm-active-card-width)) / 2));
}
.bkm-card {
  flex: 0 0 var(--bkm-active-card-width) !important;
  max-width: var(--bkm-active-card-width) !important;
  width: var(--bkm-active-card-width) !important;
}

/* All media providers may omit their redundant title. When supplied, the title
   stays inside the same continuation surface. */
.bkm-media__title {
  background: var(--bkm-panel) !important;
  margin: 0 !important;
  padding: 12px 16px 10px !important;
}

/* YouTube and Spotify follow directly from the recording text card just like
   SoundCloud. There is no detached media-card gap. */
.bkm-media--youtube,
.bkm-media--spotify,
.bkm-media--youtube .bkm-media__row,
.bkm-media--spotify .bkm-media__row {
  background: var(--bkm-panel) !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bkm-media--youtube .bkm-media__embed,
.bkm-media--spotify .bkm-media__embed {
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  width: 100% !important;
}
.bkm-style-rounded .bkm-media--youtube.bkm-media--last .bkm-media__embed,
.bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__embed {
  border-radius: 0 0 24px 24px !important;
}

@media (min-width: 768px) {
  .bkm-music { --bkm-active-card-width: min(68vw, 560px); }
}

@media (min-width: 1024px) and (hover:hover) and (pointer:fine) {
  .bkm-music { --bkm-active-card-width: min(42vw, 520px); }
  .bkm-track {
    gap: clamp(18px, 2vw, 28px) !important;
    overflow-x: auto !important;
  }
  .bkm-card {
    cursor: pointer;
    transition: opacity .34s ease, transform .46s cubic-bezier(.2,.78,.24,1);
  }
  .bkm-card .bkm-card__media {
    transform: scale(.82);
    opacity: .58;
    transition: transform .46s cubic-bezier(.2,.78,.24,1), opacity .32s ease, filter .32s ease;
    transform-origin: 50% 50%;
  }
  .bkm-card:not(.is-active) .bkm-card__media {
    filter: saturate(.78) brightness(.82);
  }
  .bkm-card.is-active .bkm-card__media {
    filter: none;
    opacity: 1;
    transform: scale(1);
  }
  /* Only the centred active family exposes metadata and Listen. Neighbours are
     intentionally cover-only selectors. */
  .bkm-card:not(.is-active) .bkm-card__body {
    border: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px);
  }
  .bkm-card.is-active .bkm-card__body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .30s ease .10s, transform .38s ease .06s;
  }
  .bkm-card:not(.is-active):hover .bkm-card__media {
    filter: saturate(.9) brightness(.92);
    opacity: .78;
    transform: scale(.85);
  }
  .bkm-card:not(.is-active):focus-visible {
    outline: 1px solid rgba(244,243,239,.55);
    outline-offset: 5px;
  }
  /* Listen is deliberately click-driven on desktop. This avoids the hover
     re-open loop caused by menu/header hover states while retaining a visual
     hover affordance. */
  .bkm-listen:hover { color: var(--bkm-text) !important; }
}

@media (max-width: 767px) {
  .bkm-style-rounded .bkm-media--youtube.bkm-media--last .bkm-media__embed,
  .bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__embed {
    border-radius: 0 0 18px 18px !important;
  }
}

/* ================================================================
   BK Music 0.11.1 — seamless video continuation + quieter neighbours
   ================================================================ */
/* When Listen is open, the listening surface starts immediately at the
   metadata card's lower edge. This removes the last visible dark spacer that
   was most noticeable above the black YouTube player. */
.bkm-card.is-listening .bkm-card__body {
  padding-bottom: 0 !important;
}
.bkm-card.is-listening .bkm-card__actions {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.bkm-card.is-listening .bkm-listen,
.bkm-card.is-listening .bkm-booklet {
  margin-bottom: 0 !important;
}
.bkm-panel,
.bkm-panel.is-open,
.bkm-panel__inner,
.bkm-panel__inner > .bkm-media:first-child,
.bkm-panel__inner > .bkm-media:first-child .bkm-media__row,
.bkm-panel__inner > .bkm-media:first-child .bkm-media__embed,
.bkm-panel__inner > .bkm-media:first-child iframe {
  margin-top: 0 !important;
}
.bkm-panel__inner {
  padding-top: 0 !important;
}

/* YouTube must behave like a literal continuation of the card rather than a
   separate media card. Explicit resets protect this from theme iframe/video
   rules that commonly add margins or inline spacing. */
html body .bkm-music .bkm-media--youtube,
html body .bkm-music .bkm-media--youtube .bkm-media__row,
html body .bkm-music .bkm-media--youtube .bkm-media__embed {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .bkm-music .bkm-media--youtube .bkm-media__embed {
  display: block !important;
  line-height: 0 !important;
}
html body .bkm-music .bkm-media--youtube iframe {
  border: 0 !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  vertical-align: top !important;
  width: 100% !important;
}

/* Desktop neighbours are deliberately smaller than the active family. Their
   card slots keep a stable width so carousel centring does not jump, while the
   visible covers recede more clearly. */
@media (min-width: 1024px) and (hover:hover) and (pointer:fine) {
  .bkm-card:not(.is-active) .bkm-card__media {
    opacity: .50 !important;
    transform: scale(.72) !important;
  }
  .bkm-card:not(.is-active):hover .bkm-card__media,
  .bkm-card:not(.is-active):focus-visible .bkm-card__media {
    opacity: .72 !important;
    transform: scale(.76) !important;
  }
}

/* ================================================================
   BK Music 0.12.0 — touch-first closing, directional card navigation,
   mobile neighbours, iPad continuity and recording overview
   ================================================================ */

/* Overview sits on the active card's upper-right edge rather than on the
   outer page container, so it reads as part of the recording interface. */
.bkm-overview-bar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto 10px !important;
  max-width: var(--bkm-active-card-width);
  min-height: 26px;
  width: var(--bkm-active-card-width);
}
.bkm-overview-toggle {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bkm-muted) !important;
  cursor: pointer;
  display: inline-flex;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  gap: 7px;
  letter-spacing: .065em;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  text-transform: none !important;
  transition: color .18s ease, opacity .18s ease;
}
.bkm-overview-toggle:hover,
.bkm-overview-toggle:focus-visible,
.bkm-overview-toggle[aria-expanded="true"] {
  color: var(--bkm-text) !important;
}
.bkm-overview-toggle__icon {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(2, 3px);
  height: 8px;
  width: 8px;
}
.bkm-overview-toggle__icon i {
  background: currentColor;
  border-radius: 50%;
  display: block;
  height: 3px;
  transition: transform .24s ease, border-radius .24s ease;
  width: 3px;
}
.bkm-overview-toggle[aria-expanded="true"] .bkm-overview-toggle__icon i:nth-child(1) { transform: translate(1px,1px); }
.bkm-overview-toggle[aria-expanded="true"] .bkm-overview-toggle__icon i:nth-child(2) { transform: translate(-1px,1px); }
.bkm-overview-toggle[aria-expanded="true"] .bkm-overview-toggle__icon i:nth-child(3) { transform: translate(1px,-1px); }
.bkm-overview-toggle[aria-expanded="true"] .bkm-overview-toggle__icon i:nth-child(4) { transform: translate(-1px,-1px); }

/* The dot navigation is intentionally dot-only. Direction is expressed inside
   the active text card, where only actually available directions are shown. */
.bkm-nav__arrow { display: none !important; }
.bkm-card__directions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-left: auto;
}
.bkm-card__direction {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--bkm-muted) !important;
  cursor: pointer;
  display: inline-flex;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  height: 30px;
  justify-content: center;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 30px !important;
  min-width: 24px !important;
  padding: 0 !important;
  transition: color .18s ease, transform .18s ease;
  width: 24px;
}
.bkm-card__direction:hover,
.bkm-card__direction:focus-visible { color: var(--bkm-text) !important; }
.bkm-card__direction--prev:hover,
.bkm-card__direction--prev:focus-visible { transform: translateX(-2px); }
.bkm-card__direction--next:hover,
.bkm-card__direction--next:focus-visible { transform: translateX(2px); }

/* Overview is a deliberately distant, cover-only view. It is a navigation
   layer, not a second set of content cards. */
.bkm-music.is-overview .bkm-overview-bar {
  max-width: min(100%, 980px);
  width: min(100%, 980px);
}
.bkm-music.is-overview .bkm-track {
  display: grid !important;
  gap: clamp(10px, 1.7vw, 18px) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto !important;
  max-width: 980px;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
  width: 100%;
}
.bkm-music.is-overview .bkm-card {
  cursor: pointer;
  flex: none !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  scroll-snap-align: none !important;
  width: auto !important;
}
.bkm-music.is-overview .bkm-card__media,
.bkm-music.is-overview .bkm-card.is-active .bkm-card__media,
.bkm-music.is-overview .bkm-card:not(.is-active) .bkm-card__media {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  transition: opacity .2s ease, transform .24s ease !important;
}
.bkm-music.is-overview .bkm-card:hover .bkm-card__media,
.bkm-music.is-overview .bkm-card:focus-visible .bkm-card__media {
  opacity: .84 !important;
  transform: scale(.975) !important;
}
.bkm-music.is-overview .bkm-card.is-active .bkm-card__media {
  outline: 1px solid rgba(244,243,239,.48);
  outline-offset: 4px;
}
.bkm-music.is-overview .bkm-card__body,
.bkm-music.is-overview .bkm-panels,
.bkm-music.is-overview .bkm-nav {
  display: none !important;
}

/* Tablet overview remains comfortably scannable. */
@media (min-width: 768px) and (max-width: 1023px) {
  .bkm-music.is-overview .bkm-track {
    grid-template-columns: repeat(3, minmax(0,1fr));
    max-width: 760px;
  }
  .bkm-music.is-overview .bkm-overview-bar {
    max-width: min(100%,760px);
    width: min(100%,760px);
  }
}

/* Phone carousel: the active card stays precisely centred while a smaller
   previous/next cover peeks in from the corresponding screen edge. Scaling is
   anchored to that edge, so the neighbour does not disappear as it shrinks. */
@media (max-width: 767px) {
  .bkm-music:not(.is-overview) {
    --bkm-active-card-width: min(82vw, 390px);
  }
  .bkm-music:not(.is-overview) .bkm-track {
    gap: 8px !important;
  }
  .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__media {
    filter: saturate(.82) brightness(.86);
    opacity: .58;
    transform: scale(.82) !important;
    transition: transform .34s cubic-bezier(.2,.78,.24,1), opacity .26s ease, filter .26s ease;
  }
  .bkm-music:not(.is-overview) .bkm-card.is-prev .bkm-card__media {
    transform-origin: 100% 50% !important;
  }
  .bkm-music:not(.is-overview) .bkm-card.is-next .bkm-card__media {
    transform-origin: 0 50% !important;
  }
  .bkm-music:not(.is-overview) .bkm-card:not(.is-active):not(.is-prev):not(.is-next) .bkm-card__media {
    opacity: .34;
    transform: scale(.76) !important;
  }
  /* Only the active phone card contributes text height. This both keeps the
     edge previews cover-only and lets an open Listen panel collapse before the
     incoming card reaches centre. */
  .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body {
    border: 0 !important;
    margin-top: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    pointer-events: none !important;
  }
  .bkm-music.is-overview .bkm-track {
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-width: 100%;
  }
  .bkm-music.is-overview .bkm-overview-bar {
    max-width: 100%;
    width: 100%;
  }
  .bkm-music.is-overview .bkm-card__media {
    border-radius: 14px !important;
  }
}

/* iPad/iOS Safari can calculate the horizontal track's block height from an
   off-screen card before the active one, leaving apparent empty space before
   the first video. On iOS tablets, inactive metadata therefore does not
   participate in track height; a one-pixel overlap also neutralises Safari's
   occasional sub-pixel seam between the card and the first YouTube iframe. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 768px) and (max-width: 1366px) {
    .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body {
      display: none !important;
    }
    .bkm-music.has-open-panel .bkm-track {
      padding-bottom: 0 !important;
    }
    .bkm-music .bkm-panel.is-open {
      margin-top: -1px !important;
    }
    .bkm-music .bkm-panel.is-open .bkm-panel__inner > .bkm-media--youtube:first-child,
    .bkm-music .bkm-panel.is-open .bkm-panel__inner > .bkm-media--youtube:first-child .bkm-media__row,
    .bkm-music .bkm-panel.is-open .bkm-panel__inner > .bkm-media--youtube:first-child .bkm-media__embed,
    .bkm-music .bkm-panel.is-open .bkm-panel__inner > .bkm-media--youtube:first-child iframe {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
    .bkm-music .bkm-panel.is-open .bkm-panel__inner > .bkm-media--youtube:first-child .bkm-media__embed {
      position: relative;
      top: -1px;
      margin-bottom: -1px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bkm-music.is-overview .bkm-card__media,
  .bkm-card__direction,
  .bkm-overview-toggle__icon i { transition-duration: .01ms !important; }
}

/* ================================================================
   BK Music 0.13.0 — card-owned Listen panels + native responsive input
   ================================================================ */
/* Let touch/iPad use the browser's native momentum scrolling. Programmatic
   card changes still request smooth behaviour explicitly in JS. Removing CSS
   smooth-scroll avoids interpolating every scrollLeft update and fixes the
   lag introduced by the previous custom drag implementation. */
.bkm-music:not(.is-overview) .bkm-track {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
  touch-action: pan-x pan-y;
  position: relative;
}

/* Explicit interactive layers protect controls from theme overlays and make
   desktop hit-testing deterministic. */
.bkm-music .bkm-card.is-active .bkm-card__body {
  pointer-events: auto !important;
  position: relative;
  z-index: 6;
}
.bkm-music .bkm-card.is-active .bkm-listen,
.bkm-music .bkm-card.is-active .bkm-booklet,
.bkm-music .bkm-card.is-active .bkm-card__direction {
  pointer-events: auto !important;
  position: relative;
  z-index: 8;
}
.bkm-music .bkm-card:not(.is-active) .bkm-card__media,
.bkm-music.is-overview .bkm-card__media {
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 4;
}

/* The open player is physically appended to its owning card by JS. It uses the
   same inset as the metadata body, so it is a literal visual continuation and
   moves horizontally together with that recording family. */
.bkm-card {
  --bkm-body-inset: clamp(7px,1.1vw,14px);
}
.bkm-card > .bkm-panel.is-card-attached {
  margin: 0 var(--bkm-body-inset) !important;
  position: relative !important;
  width: calc(100% - var(--bkm-body-inset) - var(--bkm-body-inset)) !important;
  z-index: 5;
}
.bkm-card > .bkm-panel.is-card-attached .bkm-panel__inner {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* While a recording with an open Listen stack is sliding out, do not apply the
   normal inactive-card collapse to its text/body. The panel and metadata leave
   as one unit; once scrolling settles JS stops playback and removes this state. */
@media (min-width: 1024px) and (hover:hover) and (pointer:fine) {
  .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting:not(.is-active) .bkm-card__body {
    border: inherit !important;
    display: block !important;
    margin: -18px var(--bkm-body-inset) 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 28px clamp(18px,2.2vw,30px) 0 !important;
    pointer-events: none !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 1023px) {
  .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting:not(.is-active) .bkm-card__body {
    display: block !important;
    margin: -12px var(--bkm-body-inset) 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 22px 16px 0 !important;
    pointer-events: none !important;
  }
}

/* The neutral storage wrapper now only holds closed panels. It must never sit
   above the carousel or steal pointer input. */
.bkm-music .bkm-panels {
  pointer-events: none !important;
  position: relative;
  z-index: 0;
}
.bkm-music .bkm-panels .bkm-panel {
  pointer-events: none !important;
}
.bkm-music .bkm-card > .bkm-panel.is-card-attached {
  pointer-events: auto !important;
}

/* Closed panel storage remains normal flow so the dot navigation inside the
   wrapper stays clickable; only the parked panel nodes themselves ignore hits. */
.bkm-music .bkm-panels {
  pointer-events: auto !important;
}
.bkm-music .bkm-panels > .bkm-panel {
  pointer-events: none !important;
}
.bkm-music .bkm-panels .bkm-nav {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

/* ================================================================
   BK Music 0.13.1 — immediate incoming metadata during carousel motion
   ================================================================ */
/* The incoming recording must read as a complete card from the first movement
   frame. Do not delay its text fade until after the old card has left. */
.bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__body,
.bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__body {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity .14s ease, transform .18s ease !important;
}

/* Click/dot navigation commits the new active card immediately. Keep the old
   body visible only while it physically slides away, then JS removes this
   transient state at scroll settle. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) {
  .bkm-music:not(.is-overview) .bkm-card.is-incoming:not(.is-active) .bkm-card__body,
  .bkm-music:not(.is-overview) .bkm-card.is-transition-out:not(.is-active) .bkm-card__body {
    border: inherit !important;
    display: block !important;
    margin: -18px var(--bkm-body-inset) 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 28px clamp(18px,2.2vw,30px) 16px !important;
    pointer-events: none !important;
    transform: translateY(0) !important;
  }
  .bkm-music:not(.is-overview) .bkm-card.is-transition-out:not(.is-active) .bkm-card__body {
    opacity: .72 !important;
  }
}

@media (max-width:767px) {
  .bkm-music:not(.is-overview) .bkm-card.is-incoming:not(.is-active) .bkm-card__body,
  .bkm-music:not(.is-overview) .bkm-card.is-transition-out:not(.is-active) .bkm-card__body {
    border: inherit !important;
    display: block !important;
    margin: -12px var(--bkm-body-inset) 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 22px 16px 14px !important;
    pointer-events: none !important;
    transform: translateY(0) !important;
  }
  .bkm-music:not(.is-overview) .bkm-card.is-transition-out:not(.is-active) .bkm-card__body {
    opacity: .72 !important;
  }
}

/* iPad/Safari's earlier inactive-body display:none optimization must not hide
   the incoming recording while the gesture is still in progress. */
@supports (-webkit-touch-callout:none) {
  @media (min-width:768px) and (max-width:1366px) {
    .bkm-music:not(.is-overview) .bkm-card.is-incoming:not(.is-active) .bkm-card__body,
    .bkm-music:not(.is-overview) .bkm-card.is-transition-out:not(.is-active) .bkm-card__body {
      display: block !important;
      opacity: 1 !important;
      pointer-events: none !important;
    }
  }
}

/* ================================================================
   BK Music 0.13.2 — distance-driven cover scale + stable carousel height
   ================================================================ */
/* Cover emphasis follows physical position continuously. JS updates these
   variables from the distance to the horizontal viewport centre on every
   scroll frame, so neither native swipes nor smooth desktop navigation wait
   for activeIndex / scroll-snap before changing the artwork size. */
.bkm-music:not(.is-overview) .bkm-card .bkm-card__media {
  filter: saturate(var(--bkm-media-saturation, .84)) brightness(var(--bkm-media-brightness, .88)) !important;
  opacity: var(--bkm-media-opacity, .62) !important;
  transform: scale(var(--bkm-media-scale, .82)) !important;
  transition: filter .12s linear !important;
  will-change: transform, opacity;
}

/* Pointer hover may brighten a neighbour but must never override the
   distance-driven scale; otherwise a clicked cover would visibly jump before
   the carousel starts moving. */
.bkm-music:not(.is-overview) .bkm-card:not(.is-active):hover .bkm-card__media,
.bkm-music:not(.is-overview) .bkm-card:not(.is-active):focus-visible .bkm-card__media {
  transform: scale(var(--bkm-media-scale, .82)) !important;
}

/* Phone/tablet navigation is gesture/card-selection driven. Keep the inline
   directional arrows only for a fine-pointer desktop interface. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .bkm-music .bkm-card__directions {
    display: none !important;
  }
}

/* The tallest closed metadata card establishes the carousel's baseline block
   height. This keeps the footer stationary when recordings have different
   amounts of text. An opened Listen stack can still grow past this minimum. */
.bkm-music:not(.is-overview) .bkm-track {
  min-height: var(--bkm-stable-track-height, auto);
}

/* Measurement clones are inserted only for a frame by JS and never painted. */
.bkm-music .bkm-measure-card {
  contain: layout style !important;
  z-index: -1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .bkm-music:not(.is-overview) .bkm-card .bkm-card__media {
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   BK Music 0.14.0 — unified zero-reflow carousel motion
   ================================================================ */
/* The carousel now has one visual state model for desktop, tablet and phone.
   Card bodies stay in layout at all times and only fade/translate visually.
   This removes the max-height/display toggles that previously forced layout
   recalculation in the middle of a swipe. */
.bkm-music:not(.is-overview) .bkm-track {
  align-items: flex-start !important;
  min-height: 0 !important;
  scroll-behavior: auto !important;
  scroll-snap-type: x mandatory !important;
}
.bkm-music:not(.is-overview).is-programmatic .bkm-track {
  scroll-snap-type: none !important;
}
.bkm-music:not(.is-overview) .bkm-card {
  --bkm-smooth-scale: .82;
  --bkm-smooth-media-opacity: .64;
  --bkm-smooth-detail-opacity: 0;
  --bkm-smooth-detail-y: -6px;
  scroll-snap-align: center !important;
  scroll-snap-stop: normal;
}
.bkm-music:not(.is-overview) .bkm-card.is-active {
  --bkm-smooth-scale: 1;
  --bkm-smooth-media-opacity: 1;
  --bkm-smooth-detail-opacity: 1;
  --bkm-smooth-detail-y: 0px;
}

/* Artwork resizing is compositor-only. No filter animation, no class-based
   scale jump and no transition layered on top of the per-frame position data. */
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active):hover .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active):focus-visible .bkm-card__media {
  backface-visibility: hidden;
  contain: paint;
  filter: none !important;
  opacity: var(--bkm-smooth-media-opacity) !important;
  transform: translate3d(0,0,0) scale(var(--bkm-smooth-scale)) !important;
  transform-origin: 50% 100% !important;
  transition: none !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0) scale(var(--bkm-smooth-scale)) !important;
}
.bkm-music.is-moving:not(.is-overview) .bkm-card__media {
  will-change: transform, opacity;
}

/* Metadata is never collapsed during horizontal motion. It therefore appears
   on the incoming card from the first frame and fades naturally with position,
   while every recording keeps contributing to a stable section height. */
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-transition-out .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting .bkm-card__body {
  background: var(--bkm-panel) !important;
  border: 0 !important;
  display: block !important;
  margin: -18px var(--bkm-body-inset, clamp(7px,1.1vw,14px)) 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  opacity: var(--bkm-smooth-detail-opacity) !important;
  overflow: visible !important;
  padding: 28px clamp(18px,2.2vw,30px) 16px !important;
  pointer-events: none !important;
  transform: translate3d(0,var(--bkm-smooth-detail-y),0) !important;
  transition: none !important;
  visibility: visible !important;
}
.bkm-style-rounded:not(.is-overview) .bkm-card .bkm-card__body {
  border-radius: 0 0 24px 24px !important;
}
.bkm-style-rounded:not(.is-overview) .bkm-card.is-listening .bkm-card__body {
  border-radius: 0 !important;
}
.bkm-music:not(.is-overview):not(.is-moving) .bkm-card.is-active .bkm-card__body,
.bkm-music:not(.is-overview):not(.is-moving) .bkm-card.is-active .bkm-card__body button,
.bkm-music:not(.is-overview):not(.is-moving) .bkm-card.is-active .bkm-card__body a {
  pointer-events: auto !important;
}
.bkm-music.is-moving:not(.is-overview) .bkm-card__body,
.bkm-music.is-moving:not(.is-overview) .bkm-card__body *,
.bkm-music.is-moving:not(.is-overview) iframe {
  pointer-events: none !important;
}
.bkm-music.is-moving:not(.is-overview) .bkm-card__body {
  will-change: opacity, transform;
}

/* An open Listen stack is visually part of its owner card. While that card
   leaves centre, the whole stack fades with the same positional signal. Its
   accordion height is only collapsed after horizontal movement has finished. */
.bkm-music:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached.is-open {
  opacity: var(--bkm-smooth-detail-opacity) !important;
  transform: translate3d(0,0,0) !important;
}
.bkm-music.is-moving:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached.is-open {
  will-change: opacity;
}

/* Fine-pointer desktop keeps the stronger side-card hierarchy, but uses the
   same continuous interpolation as touch devices. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) {
  .bkm-music:not(.is-overview) .bkm-card {
    --bkm-smooth-scale: .72;
    --bkm-smooth-media-opacity: .52;
  }
}

@media (max-width:767px) {
  html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card.is-transition-out .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting .bkm-card__body {
    margin: -12px var(--bkm-body-inset, 7px) 0 !important;
    padding: 22px 16px 14px !important;
  }
  .bkm-style-rounded:not(.is-overview) .bkm-card .bkm-card__body {
    border-radius: 0 0 18px 18px !important;
  }
  .bkm-style-rounded:not(.is-overview) .bkm-card.is-listening .bkm-card__body {
    border-radius: 0 !important;
  }
}

/* Safari/iPad must obey the same non-collapsing body model; this overrides the
   earlier iOS display:none optimisation that made the next text arrive late. */
@supports (-webkit-touch-callout:none) {
  @media (min-width:768px) and (max-width:1366px) {
    html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body {
      display: block !important;
      max-height: none !important;
      opacity: var(--bkm-smooth-detail-opacity) !important;
      overflow: visible !important;
      visibility: visible !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__media,
  html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body {
    transition: none !important;
  }
}

/* Keep the listening continuation seamless after the non-collapsing body reset. */
html body .bkm-music:not(.is-overview) .bkm-card.is-listening .bkm-card__body {
  padding-bottom: 0 !important;
}
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__media {
  will-change: auto !important;
}
html body .bkm-music.is-moving:not(.is-overview) .bkm-card .bkm-card__media {
  will-change: transform, opacity !important;
}

/* ================================================================
   BK Music 0.14.1 — fully coupled card surface motion + Spotify stack
   ================================================================ */
/* The metadata surface now uses the exact same centre-distance scale as the
   cover. Scaling is compositor-only, so the text card grows continuously while
   approaching centre instead of snapping to full size on arrival. Its top edge
   stays fixed to the cover's bottom edge, preserving the seamless overlap. */
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-transition-out .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting .bkm-card__body {
  backface-visibility: hidden !important;
  transform: translate3d(0,var(--bkm-smooth-detail-y),0) scale(var(--bkm-smooth-scale)) !important;
  transform-origin: 50% 0% !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-transform: translate3d(0,var(--bkm-smooth-detail-y),0) scale(var(--bkm-smooth-scale)) !important;
  -webkit-transform-origin: 50% 0% !important;
}

/* The open Listen continuation follows that same scale. JS supplies only the
   vertical compensation required because transforms do not alter document
   flow; no accordion/layout measurement is performed during carousel motion. */
html body .bkm-music:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached.is-open {
  backface-visibility: hidden !important;
  opacity: var(--bkm-smooth-detail-opacity) !important;
  transform: translate3d(0,calc(var(--bkm-smooth-panel-lift, 0px) + var(--bkm-smooth-detail-y)),0) scale(var(--bkm-smooth-scale)) !important;
  transform-origin: 50% 0% !important;
  transition: grid-template-rows .42s cubic-bezier(.2,.78,.24,1) !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-transform: translate3d(0,calc(var(--bkm-smooth-panel-lift, 0px) + var(--bkm-smooth-detail-y)),0) scale(var(--bkm-smooth-scale)) !important;
  -webkit-transform-origin: 50% 0% !important;
}

.bkm-music.is-moving:not(.is-overview) .bkm-card__body,
.bkm-music.is-moving:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached.is-open {
  will-change: transform, opacity !important;
}

/* Inline left/right arrows are no longer part of the interface on any viewport.
   Recording cards themselves, swipe, dots and Overview provide navigation. */
.bkm-music .bkm-card__directions,
.bkm-music .bkm-card__direction {
  display: none !important;
}

/* Spotify behaves as one uninterrupted listening stack, like SoundCloud. Theme
   iframe/card rules are neutralised for every intermediate row; only the final
   media item owns the lower corners of the continuation. */
html body .bkm-music .bkm-media--spotify,
html body .bkm-music .bkm-media--spotify .bkm-media__row,
html body .bkm-music .bkm-media--spotify .bkm-media__embed,
html body .bkm-music .bkm-media--spotify iframe {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .bkm-music .bkm-media--spotify .bkm-media__row,
html body .bkm-music .bkm-media--spotify .bkm-media__embed {
  background: var(--bkm-panel) !important;
  display: block !important;
  line-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
html body .bkm-music .bkm-media--spotify iframe {
  display: block !important;
  max-width: none !important;
  vertical-align: top !important;
  width: 100% !important;
}
.bkm-style-rounded .bkm-media--spotify:not(.bkm-media--last),
.bkm-style-rounded .bkm-media--spotify:not(.bkm-media--last) .bkm-media__row,
.bkm-style-rounded .bkm-media--spotify:not(.bkm-media--last) .bkm-media__embed {
  border-radius: 0 !important;
}
.bkm-style-rounded .bkm-media--spotify.bkm-media--last,
.bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__row,
.bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__embed {
  border-radius: 0 0 24px 24px !important;
}
.bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__row,
.bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__embed {
  overflow: hidden !important;
}

@media (max-width:767px) {
  .bkm-style-rounded .bkm-media--spotify.bkm-media--last,
  .bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__row,
  .bkm-style-rounded .bkm-media--spotify.bkm-media--last .bkm-media__embed {
    border-radius: 0 0 18px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body,
  html body .bkm-music:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached.is-open {
    transition: none !important;
  }
}

/* ================================================================
   BK Music 0.14.2 — deterministic card surface stacking during motion
   ================================================================ */
/* Cover and metadata are both compositor layers while the carousel moves.
   Older neighbour-card rules gave inactive artwork its own positive z-index,
   which could place the scaled cover above the incoming text surface. Keep a
   local stacking context per recording and make the layer order explicit in
   every active/incoming/outgoing state. */
html body .bkm-music:not(.is-overview) .bkm-card {
  isolation: isolate !important;
  position: relative !important;
}
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__media,
html body .bkm-music:not(.is-overview) .bkm-card.is-transition-out .bkm-card__media {
  position: relative !important;
  z-index: 1 !important;
}
html body .bkm-music:not(.is-overview) .bkm-card .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-active .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card:not(.is-active) .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-incoming .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-transition-out .bkm-card__body,
html body .bkm-music:not(.is-overview) .bkm-card.is-panel-exiting .bkm-card__body {
  position: relative !important;
  z-index: 3 !important;
}
html body .bkm-music:not(.is-overview) .bkm-card > .bkm-panel.is-card-attached {
  position: relative !important;
  z-index: 2 !important;
}

/* ================================================================
   BK Music 0.15.0 — native audio files, Spotify-like custom player
   ================================================================ */
html body .bkm-music .bkm-media--audio,
html body .bkm-music .bkm-media--audio .bkm-media__row {
  background: var(--bkm-panel) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .bkm-music .bkm-media--audio .bkm-media__row {
  align-items: stretch !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
}
.bkm-media--audio + .bkm-media,
.bkm-media + .bkm-media--audio {
  border-top: 1px solid rgba(244,243,239,.07) !important;
}

.bkm-audio-player {
  align-items: center;
  background: var(--bkm-panel);
  color: var(--bkm-text);
  display: grid;
  gap: 14px;
  grid-template-columns: 44px minmax(0,1fr);
  min-height: 88px;
  min-width: 0;
  padding: 14px 18px;
  position: relative;
  width: 100%;
}
.bkm-audio-player audio { display: none !important; }
.bkm-audio-player__toggle,
.bkm-audio-player__toggle:hover,
.bkm-audio-player__toggle:focus,
.bkm-audio-player__toggle:active {
  align-items: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--bkm-text) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #151515 !important;
  cursor: pointer;
  display: inline-flex !important;
  height: 42px !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  transition: transform .16s ease, opacity .16s ease;
  width: 42px !important;
}
.bkm-audio-player__toggle:hover,
.bkm-audio-player__toggle:focus-visible { transform: scale(1.045); }
.bkm-audio-player__toggle svg {
  display: block;
  fill: currentColor;
  height: 21px;
  width: 21px;
}
.bkm-audio-player__play { margin-left: 1px; }
.bkm-audio-player__pause { display: none !important; }
.bkm-audio-player.is-playing .bkm-audio-player__play { display: none !important; }
.bkm-audio-player.is-playing .bkm-audio-player__pause { display: block !important; }

.bkm-audio-player__main { min-width: 0; }
.bkm-audio-player__title {
  color: var(--bkm-text) !important;
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  line-height: 1.25 !important;
  margin: 0 0 9px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bkm-audio-player__timeline {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(70px,1fr) 34px;
  min-width: 0;
}
.bkm-audio-player__time {
  color: var(--bkm-muted);
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.bkm-audio-player__seek {
  --bkm-audio-progress: 0%;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(to right,var(--bkm-text) 0,var(--bkm-text) var(--bkm-audio-progress),rgba(244,243,239,.22) var(--bkm-audio-progress),rgba(244,243,239,.22) 100%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  height: 3px !important;
  margin: 0 !important;
  min-height: 3px !important;
  outline: none;
  padding: 0 !important;
  width: 100% !important;
}
.bkm-audio-player__seek::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 3px;
}
.bkm-audio-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--bkm-text);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  height: 10px;
  margin-top: -3.5px;
  opacity: 0;
  transition: opacity .15s ease;
  width: 10px;
}
.bkm-audio-player__seek::-moz-range-track {
  background: transparent;
  border: 0;
  height: 3px;
}
.bkm-audio-player__seek::-moz-range-progress {
  background: var(--bkm-text);
  border-radius: 999px;
  height: 3px;
}
.bkm-audio-player__seek::-moz-range-thumb {
  background: var(--bkm-text);
  border: 0;
  border-radius: 50%;
  height: 10px;
  opacity: 0;
  transition: opacity .15s ease;
  width: 10px;
}
.bkm-audio-player:hover .bkm-audio-player__seek::-webkit-slider-thumb,
.bkm-audio-player__seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.bkm-audio-player:hover .bkm-audio-player__seek::-moz-range-thumb,
.bkm-audio-player__seek:focus-visible::-moz-range-thumb { opacity: 1; }

/* Performer control forms the same compact right rail as the SoundCloud row. */
.bkm-media--audio .bkm-performers-button {
  align-self: stretch !important;
  background: var(--bkm-panel) !important;
  border: 0 !important;
  border-left: 1px solid rgba(244,243,239,.09) !important;
  border-radius: 0 !important;
  color: var(--bkm-muted) !important;
  margin: 0 !important;
  min-height: 88px !important;
  min-width: 54px !important;
  padding: 0 12px !important;
  width: 54px !important;
  z-index: 35;
}
.bkm-media--audio .bkm-performers-button:hover,
.bkm-media--audio .bkm-performers-button:focus-visible {
  background: rgba(244,243,239,.035) !important;
  color: var(--bkm-text) !important;
}

/* Audio performer information overlays the player itself and opens from the
   same right edge as the performer rail, preserving the established gesture. */
.bkm-music .bkm-media--audio .bkm-performers {
  align-content: center;
  align-items: center;
  background: #1d1d1d !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: -10px 0 28px rgba(0,0,0,.18) !important;
  clip-path: inset(0 0 0 100%);
  color: var(--bkm-text) !important;
  display: flex;
  height: 100% !important;
  justify-content: flex-end;
  left: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  min-width: 0 !important;
  opacity: .98;
  overflow: hidden;
  padding: 18px 38px 16px 18px !important;
  position: absolute !important;
  right: 54px !important;
  top: 0 !important;
  transform: translateX(12px);
  transform-origin: 100% 50%;
  transition: clip-path .30s cubic-bezier(.2,.78,.24,1),transform .30s cubic-bezier(.2,.78,.24,1),opacity .22s ease;
  width: auto !important;
  z-index: 30 !important;
}
.bkm-music .bkm-media--audio .bkm-performers.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateX(0);
}
.bkm-music .bkm-media--audio .bkm-performers__grid {
  --bkm-performer-font-size: 13px;
  --bkm-performer-rows: 6;
  align-content: center !important;
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: max-content;
  justify-content: end !important;
  justify-items: stretch;
  column-gap: 26px;
  row-gap: 6px;
  max-height: 100%;
  max-width: 100%;
  width: max-content;
}
/* Audio recordings may use the whole player width for performer information.
   With 7–12 names, use two equal columns and balance the row count (7 = 4+3).
   RTL grid direction preserves the established behaviour: the first names fill
   the right-hand column before continuing on the left. */
.bkm-music .bkm-media--audio .bkm-performers--two-columns .bkm-performers__grid {
  direction: rtl;
  grid-auto-flow: column;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-template-rows: repeat(var(--bkm-performer-rows,6),auto);
  justify-content: stretch !important;
  width: 100% !important;
}
.bkm-music .bkm-media--audio .bkm-performers__item {
  color: var(--bkm-text) !important;
  direction: ltr;
  display: inline-flex !important;
  font-size: var(--bkm-performer-font-size,13px) !important;
  justify-content: flex-end !important;
  justify-self: stretch;
  line-height: 1.25 !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.bkm-music .bkm-media--audio .bkm-performers__name { color: var(--bkm-text) !important; }
.bkm-music .bkm-media--audio .bkm-performers__separator,
.bkm-music .bkm-media--audio .bkm-performers__instrument { color: var(--bkm-muted) !important; }
.bkm-music .bkm-media--audio .bkm-performers__close { color: var(--bkm-text) !important; }
.bkm-music .bkm-media--audio .bkm-performers--overflow .bkm-performers__grid {
  direction: rtl;
  grid-auto-flow: row;
  grid-template-columns: repeat(2,max-content);
  grid-template-rows: none;
  max-height: calc(100% - 4px);
  overflow-y: auto;
}

/* Only the final media item owns the lower corners of the Listen continuation. */
.bkm-style-rounded .bkm-media--audio:not(.bkm-media--last),
.bkm-style-rounded .bkm-media--audio:not(.bkm-media--last) .bkm-media__row,
.bkm-style-rounded .bkm-media--audio:not(.bkm-media--last) .bkm-audio-player,
.bkm-style-rounded .bkm-media--audio:not(.bkm-media--last) .bkm-performers-button {
  border-radius: 0 !important;
}
.bkm-style-rounded .bkm-media--audio.bkm-media--last,
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row,
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-audio-player {
  border-radius: 0 0 24px 24px !important;
}
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row {
  overflow: hidden !important;
}
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-performers-button {
  border-radius: 0 0 24px 0 !important;
}
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row:has(.bkm-performers-button) .bkm-audio-player {
  border-radius: 0 0 0 24px !important;
}

@media (max-width:767px) {
  .bkm-audio-player {
    gap: 12px;
    grid-template-columns: 38px minmax(0,1fr);
    min-height: 78px;
    padding: 12px 12px 12px 14px;
  }
  .bkm-audio-player__toggle,
  .bkm-audio-player__toggle:hover,
  .bkm-audio-player__toggle:focus,
  .bkm-audio-player__toggle:active {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 38px !important;
    width: 38px !important;
  }
  .bkm-audio-player__toggle svg { height: 19px; width: 19px; }
  .bkm-audio-player__title { font-size: 12px !important; margin-bottom: 8px !important; }
  .bkm-audio-player__timeline { gap: 6px; grid-template-columns: 30px minmax(48px,1fr) 30px; }
  .bkm-audio-player__time { font-size: 9px; }
  .bkm-media--audio .bkm-performers-button {
    min-height: 78px !important;
    min-width: 48px !important;
    padding: 0 10px !important;
    width: 48px !important;
  }
  .bkm-music .bkm-media--audio .bkm-performers {
    padding: 14px 34px 12px 14px !important;
    right: 48px !important;
  }
  .bkm-music .bkm-media--audio .bkm-performers__grid {
    --bkm-performer-font-size: 12px;
    column-gap: 16px;
    row-gap: 5px;
  }
  .bkm-style-rounded .bkm-media--audio.bkm-media--last,
  .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row,
  .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-audio-player {
    border-radius: 0 0 18px 18px !important;
  }
  .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-performers-button {
    border-radius: 0 0 18px 0 !important;
  }
  .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row:has(.bkm-performers-button) .bkm-audio-player {
    border-radius: 0 0 0 18px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .bkm-audio-player__toggle,
  .bkm-music .bkm-media--audio .bkm-performers { transition:none !important; }
}

/* ================================================================
   BK Music 0.15.2 — full-width audio performer overlay
   ================================================================ */
/* Native-audio performer information is a true overlay: it covers the whole
   current player from edge to edge and, when the list needs more room, grows
   downward instead of squeezing or clipping performer names. */
html body .bkm-music .bkm-media--audio .bkm-media__row,
html body .bkm-music .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-media__row {
  overflow: visible !important;
}

html body .bkm-music .bkm-media--audio .bkm-performers {
  align-content: center !important;
  align-items: center !important;
  background: #1b1b1b !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: auto !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  clip-path: inset(0 0 0 100%);
  color: var(--bkm-text) !important;
  display: flex !important;
  height: var(--bkm-audio-row-height,88px) !important;
  justify-content: stretch !important;
  left: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: var(--bkm-audio-row-height,88px) !important;
  min-width: 100% !important;
  opacity: .99;
  overflow: hidden !important;
  padding: 13px 38px 13px 18px !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  transform: translateX(8px);
  transform-origin: 100% 0;
  transition:
    clip-path .30s cubic-bezier(.2,.78,.24,1),
    transform .30s cubic-bezier(.2,.78,.24,1),
    height .30s cubic-bezier(.2,.78,.24,1),
    opacity .20s ease !important;
  width: 100% !important;
  z-index: 70 !important;
}

html body .bkm-music .bkm-media--audio .bkm-performers.is-open {
  clip-path: inset(0 0 0 0);
  height: var(--bkm-performer-expanded-height,var(--bkm-audio-row-height,88px)) !important;
  opacity: 1;
  transform: translateX(0);
}

html body .bkm-music .bkm-media--audio .bkm-performers__grid {
  align-content: center !important;
  align-items: center !important;
  column-gap: clamp(18px,3vw,38px) !important;
  max-height: none !important;
  max-width: none !important;
  min-width: 0 !important;
  row-gap: 5px !important;
  width: 100% !important;
}

/* 7–12 performers: two equal columns, balanced vertically. Direction RTL
   means the first names occupy the right-hand column before the left one. */
html body .bkm-music .bkm-media--audio .bkm-performers--two-columns .bkm-performers__grid {
  direction: rtl !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(var(--bkm-performer-rows,6),auto) !important;
  justify-content: stretch !important;
}

html body .bkm-music .bkm-media--audio .bkm-performers__item {
  min-width: 0;
  white-space: nowrap !important;
}

html body .bkm-music .bkm-media--audio .bkm-performers__close,
html body .bkm-music .bkm-media--audio .bkm-performers__close:hover,
html body .bkm-music .bkm-media--audio .bkm-performers__close:focus,
html body .bkm-music .bkm-media--audio .bkm-performers__close:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bkm-muted) !important;
  right: 7px !important;
  top: 6px !important;
  z-index: 2 !important;
}
html body .bkm-music .bkm-media--audio .bkm-performers__close:hover,
html body .bkm-music .bkm-media--audio .bkm-performers__close:focus-visible {
  color: var(--bkm-text) !important;
}

/* The overlay owns the visual bottom edge while it is open, including when it
   grows below the original player height. */
.bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-performers.is-open {
  border-radius: 0 0 24px 24px !important;
}

@media (max-width:767px) {
  html body .bkm-music .bkm-media--audio .bkm-performers {
    min-height: var(--bkm-audio-row-height,78px) !important;
    padding: 12px 34px 12px 14px !important;
    right: 0 !important;
  }
  html body .bkm-music .bkm-media--audio .bkm-performers.is-open {
    height: var(--bkm-performer-expanded-height,var(--bkm-audio-row-height,78px)) !important;
  }
  html body .bkm-music .bkm-media--audio .bkm-performers__grid {
    column-gap: 14px !important;
    row-gap: 4px !important;
  }
  .bkm-style-rounded .bkm-media--audio.bkm-media--last .bkm-performers.is-open {
    border-radius: 0 0 18px 18px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .bkm-music .bkm-media--audio .bkm-performers { transition:none !important; }
}

/* ================================================================
   BK Music 0.15.3 — stack-aware performer overlay expansion
   ================================================================ */
/* One positioning model for every media provider. The performer surface sits
   above the player stack instead of reflowing it, covers the full current row,
   and uses the available vertical direction according to stack position. */
html body .bkm-music .bkm-media {
  overflow: visible !important;
}
html body .bkm-music .bkm-media.has-open-performers {
  z-index: 90 !important;
}
html body .bkm-music .bkm-media .bkm-media__row {
  overflow: visible !important;
  position: relative !important;
}
html body .bkm-music .bkm-media .bkm-performers {
  bottom: auto !important;
  clip-path: inset(0 0 0 100%);
  display: flex !important;
  height: var(--bkm-performer-row-height, 100%) !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: var(--bkm-performer-row-height, 100%) !important;
  min-width: 100% !important;
  overflow: hidden !important;
  position: absolute !important;
  right: 0 !important;
  transform: translateX(8px);
  transform-origin: 100% 50%;
  transition:
    clip-path .30s cubic-bezier(.2,.78,.24,1),
    transform .30s cubic-bezier(.2,.78,.24,1),
    height .30s cubic-bezier(.2,.78,.24,1),
    opacity .20s ease !important;
  width: 100% !important;
  z-index: 100 !important;
}
html body .bkm-music .bkm-media .bkm-performers.is-open {
  clip-path: inset(0 0 0 0);
  height: var(--bkm-performer-expanded-height, var(--bkm-performer-row-height,100%)) !important;
  opacity: 1;
}

/* First item: lock its top edge to the player and consume room below. */
html body .bkm-music .bkm-media .bkm-performers--position-first {
  bottom: auto !important;
  top: 0 !important;
  transform: translateX(8px);
  transform-origin: 100% 0;
}
html body .bkm-music .bkm-media .bkm-performers--position-first.is-open {
  transform: translateX(0);
}

/* Middle items: the current player remains at the centre of the growing
   performer surface, so additional height is split evenly above and below. */
html body .bkm-music .bkm-media .bkm-performers--position-middle,
html body .bkm-music .bkm-media .bkm-performers--position-only {
  bottom: auto !important;
  top: 50% !important;
  transform: translate(8px,-50%);
  transform-origin: 100% 50%;
}
html body .bkm-music .bkm-media .bkm-performers--position-middle.is-open,
html body .bkm-music .bkm-media .bkm-performers--position-only.is-open {
  transform: translate(0,-50%);
}

/* Last item: lock its bottom edge to the player and consume room above. */
html body .bkm-music .bkm-media .bkm-performers--position-last {
  bottom: 0 !important;
  top: auto !important;
  transform: translateX(8px);
  transform-origin: 100% 100%;
}
html body .bkm-music .bkm-media .bkm-performers--position-last.is-open {
  transform: translateX(0);
}

/* Keep all provider lists on the same row-first scheme. Up to six names form
   one right-aligned column; seven to twelve balance into two equal columns,
   filled from the right-hand column first. */
html body .bkm-music .bkm-media .bkm-performers__grid {
  --bkm-performer-font-size: 13px;
  align-content: center !important;
  align-items: center !important;
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: max-content;
  justify-content: end !important;
  justify-items: stretch !important;
  max-height: none !important;
  max-width: 100% !important;
  min-width: 0 !important;
  row-gap: 5px !important;
}
html body .bkm-music .bkm-media .bkm-performers--two-columns .bkm-performers__grid {
  direction: rtl !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(var(--bkm-performer-rows,6),auto) !important;
  width: 100% !important;
}
html body .bkm-music .bkm-media .bkm-performers__item {
  direction: ltr;
  font-size: var(--bkm-performer-font-size,13px) !important;
  justify-content: flex-end !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* 13+ is an exceptional fallback: retain the six-row design and scroll inside
   the two-column surface rather than creating a third column. */
html body .bkm-music .bkm-media .bkm-performers--overflow .bkm-performers__grid {
  max-height: calc(var(--bkm-performer-expanded-height,100%) - 22px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

@media (max-width:767px) {
  html body .bkm-music .bkm-media .bkm-performers__grid {
    --bkm-performer-font-size: 12px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .bkm-music .bkm-media .bkm-performers { transition:none !important; }
}


/* ================================================================
   BK Music 0.15.4 — deterministic upward expansion for final player
   ================================================================ */
/* Animate the final performer's top edge explicitly. This is more robust than
   depending on bottom:0 + changing height, especially in Safari/iOS and in
   transformed card stacks. The panel starts exactly on its own player and its
   extra height travels upward while the bottom edge remains stationary. */
html body .bkm-music .bkm-media .bkm-performers {
  transition:
    clip-path .30s cubic-bezier(.2,.78,.24,1),
    transform .30s cubic-bezier(.2,.78,.24,1),
    height .30s cubic-bezier(.2,.78,.24,1),
    top .30s cubic-bezier(.2,.78,.24,1),
    opacity .20s ease !important;
}

html body .bkm-music .bkm-media .bkm-performers--position-last {
  bottom: auto !important;
  top: 0 !important;
  transform: translateX(8px) !important;
  transform-origin: 100% 100% !important;
}
html body .bkm-music .bkm-media .bkm-performers--position-last.is-open {
  bottom: auto !important;
  top: calc(0px - var(--bkm-performer-extra-height, 0px)) !important;
  transform: translateX(0) !important;
}

@media (prefers-reduced-motion:reduce) {
  html body .bkm-music .bkm-media .bkm-performers { transition:none !important; }
}

/* ================================================================
   BK Music 0.15.5 — true directional performer growth
   ================================================================ */
/* The performer surface now consists of the complete current player height
   PLUS an explicit performer-content growth area. This makes the direction
   visible and deterministic even when the names could technically fit inside
   the player's original height. */
html body .bkm-music .bkm-media .bkm-performers {
  height: var(--bkm-performer-row-height,100%) !important;
  min-height: var(--bkm-performer-row-height,100%) !important;
  overflow: hidden !important;
}
html body .bkm-music .bkm-media .bkm-performers.is-open {
  height: var(--bkm-performer-expanded-height,var(--bkm-performer-row-height,100%)) !important;
}

/* First: player remains at the top of the surface, all added area grows down. */
html body .bkm-music .bkm-media .bkm-performers--position-first,
html body .bkm-music .bkm-media .bkm-performers--position-first.is-open {
  bottom: auto !important;
  top: 0 !important;
}

/* Middle / single: split added surface equally around the player's row. */
html body .bkm-music .bkm-media .bkm-performers--position-middle,
html body .bkm-music .bkm-media .bkm-performers--position-only {
  bottom: auto !important;
  top: 50% !important;
  transform: translate(8px,-50%) !important;
  transform-origin: 100% 50% !important;
}
html body .bkm-music .bkm-media .bkm-performers--position-middle.is-open,
html body .bkm-music .bkm-media .bkm-performers--position-only.is-open {
  transform: translate(0,-50%) !important;
}

/* Last: current player's bottom edge is stationary. Every extra pixel is
   placed above it; no part of the growth is allowed to travel below the row. */
html body .bkm-music .bkm-media .bkm-performers--position-last {
  bottom: auto !important;
  top: 0 !important;
  transform: translateX(8px) !important;
  transform-origin: 100% 100% !important;
}
html body .bkm-music .bkm-media .bkm-performers--position-last.is-open {
  bottom: auto !important;
  top: calc(-1 * var(--bkm-performer-extra-height,0px)) !important;
  transform: translateX(0) !important;
}

/* Keep the information readable as a deliberately ordered two-column list.
   Long no-wrap names shrink before they are allowed to collide across the
   centre line. */
html body .bkm-music .bkm-media .bkm-performers__grid {
  column-gap: clamp(10px,2.2vw,20px) !important;
  padding-inline: 2px !important;
}
html body .bkm-music .bkm-media .bkm-performers--two-columns .bkm-performers__item {
  max-width: 100% !important;
  min-width: 0 !important;
}
html body .bkm-music .bkm-media .bkm-performers__name,
html body .bkm-music .bkm-media .bkm-performers__separator,
html body .bkm-music .bkm-media .bkm-performers__instrument {
  white-space: nowrap !important;
}

/* The close affordance must never inherit theme/button positioning or RTL grid
   behaviour: it always lives in the minimal top-right corner of the overlay. */
html body .bkm-music .bkm-media .bkm-performers__close,
html body .bkm-music .bkm-media .bkm-performers__close:hover,
html body .bkm-music .bkm-media .bkm-performers__close:focus,
html body .bkm-music .bkm-media .bkm-performers__close:active {
  bottom: auto !important;
  left: auto !important;
  position: absolute !important;
  right: 8px !important;
  top: 7px !important;
  transform: none !important;
  z-index: 8 !important;
}

@media (max-width:767px) {
  html body .bkm-music .bkm-media .bkm-performers__grid {
    column-gap: 10px !important;
  }
}

/* ================================================================
   BK Music 0.15.6 — performer overlay always above the whole media stack
   ================================================================ */
/*
 * A performer surface must never compete with neighbouring players for paint
 * order.  Each media item is an isolated stacking context; the item whose
 * performer panel is open is elevated above every sibling in the Listen stack.
 * This also prevents iframe/composited player layers from painting over an
 * upward- or downward-expanding performer surface on mobile Safari/Chrome.
 */
html body .bkm-music .bkm-panel,
html body .bkm-music .bkm-panel__inner {
  overflow: visible !important;
}

html body .bkm-music .bkm-panel__inner {
  isolation: isolate !important;
  position: relative !important;
}

html body .bkm-music .bkm-panel__inner > .bkm-media {
  isolation: isolate !important;
  position: relative !important;
  z-index: 1 !important;
}

html body .bkm-music .bkm-panel__inner > .bkm-media.has-open-performers {
  z-index: 10000 !important;
}

/* Keep the player's own controls in their local layer, then put the performer
   surface above that complete row and above every neighbouring media row. */
html body .bkm-music .bkm-panel__inner > .bkm-media.has-open-performers .bkm-media__row {
  isolation: isolate !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

html body .bkm-music .bkm-panel__inner > .bkm-media.has-open-performers .bkm-performers {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 1 !important;
  position: absolute !important;
  z-index: 10001 !important;
}

/* Native audio is deliberately opaque: the performer bubble is a foreground
   surface, not a translucent layer through which adjacent players can show. */
html body .bkm-music .bkm-panel__inner > .bkm-media--audio.has-open-performers .bkm-performers {
  background: #1b1b1b !important;
  opacity: 1 !important;
}

/* Explicitly keep every non-selected player below the selected performer
   layer.  This matters on touch browsers where iframes/audio controls are often
   promoted to compositor layers independently. */
html body .bkm-music .bkm-panel__inner > .bkm-media:not(.has-open-performers),
html body .bkm-music .bkm-panel__inner > .bkm-media:not(.has-open-performers) .bkm-media__row,
html body .bkm-music .bkm-panel__inner > .bkm-media:not(.has-open-performers) .bkm-media__embed,
html body .bkm-music .bkm-panel__inner > .bkm-media:not(.has-open-performers) .bkm-audio-player,
html body .bkm-music .bkm-panel__inner > .bkm-media:not(.has-open-performers) .bkm-performers-button {
  z-index: 1 !important;
}

@media (max-width: 767px) {
  html body .bkm-music .bkm-panel__inner > .bkm-media.has-open-performers {
    z-index: 10000 !important;
  }
  html body .bkm-music .bkm-panel__inner > .bkm-media.has-open-performers .bkm-performers {
    z-index: 10001 !important;
  }
}

/* ================================================================
   BK Music 0.15.7 — stable large-screen flow + fully rounded text surface
   ================================================================ */
/* Keep a measured closed-carousel floor in normal document flow. This prevents
   large desktop layouts from letting the footer creep upward when transformed
   card surfaces are visually smaller than their natural carousel envelope. */
html body .bkm-music:not(.is-overview) .bkm-track {
  min-height: var(--bkm-closed-track-height, 0px) !important;
}

/* Very large displays benefit from a small amount of real flow-space below the
   interface. This is padding (not absolute positioning), so the footer remains
   naturally after the plugin and an opened Listen stack can still grow freely. */
@media (min-width: 1440px) and (min-height: 850px) {
  html body .bkm-music:not(.is-overview) {
    padding-bottom: clamp(42px, 6vh, 96px) !important;
  }
}

/* The metadata surface is a rounded card in its own right. When Listen opens,
   only its lower corners flatten so the media stack can continue seamlessly. */
html body .bkm-style-rounded:not(.is-overview) .bkm-card .bkm-card__body {
  border-radius: 24px !important;
}
html body .bkm-style-rounded:not(.is-overview) .bkm-card.is-listening .bkm-card__body {
  border-radius: 24px 24px 0 0 !important;
}

@media (max-width: 767px) {
  html body .bkm-style-rounded:not(.is-overview) .bkm-card .bkm-card__body {
    border-radius: 18px !important;
  }
  html body .bkm-style-rounded:not(.is-overview) .bkm-card.is-listening .bkm-card__body {
    border-radius: 18px 18px 0 0 !important;
  }
}

/* ================================================================
   BK Music 0.15.9 — local SoundCloud performers + reliable dark page floor
   ================================================================ */

/* SoundCloud returns to the compact 0.9.x interaction: performer information
   lives only over the SoundCloud player that opened it.  The trigger rail stays
   visible at the right and the information surface reveals from that edge
   towards the left only as far as the content requires. */
html body .bkm-music .bkm-media--soundcloud .bkm-media__row {
  isolation: isolate !important;
  overflow: hidden !important;
  position: relative !important;
}

html body .bkm-music .bkm-panel__inner > .bkm-media--soundcloud.has-open-performers {
  z-index: 2 !important;
}

html body .bkm-music .bkm-media--soundcloud .bkm-performers,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-first,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-middle,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-last,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-only {
  align-content: center !important;
  align-items: center !important;
  background: #f2f2f2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: -10px 0 28px rgba(0,0,0,.10) !important;
  clip-path: inset(0 0 0 100%) !important;
  color: #202020 !important;
  display: flex !important;
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  height: 100% !important;
  justify-content: flex-end !important;
  left: auto !important;
  margin: 0 !important;
  max-height: 100% !important;
  max-width: calc(100% - 54px) !important;
  min-height: 100% !important;
  min-width: min(280px,calc(100% - 54px)) !important;
  opacity: .98 !important;
  overflow: hidden !important;
  padding: 28px 38px 16px 18px !important;
  position: absolute !important;
  right: 54px !important;
  top: 0 !important;
  transform: translateX(12px) !important;
  transform-origin: 100% 50% !important;
  transition: clip-path .30s cubic-bezier(.2,.78,.24,1),transform .30s cubic-bezier(.2,.78,.24,1),opacity .22s ease !important;
  width: max-content !important;
  z-index: 30 !important;
}

html body .bkm-music .bkm-media--soundcloud .bkm-performers.is-open,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-first.is-open,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-middle.is-open,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-last.is-open,
html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-only.is-open {
  bottom: 0 !important;
  clip-path: inset(0 0 0 0) !important;
  height: 100% !important;
  opacity: 1 !important;
  top: 0 !important;
  transform: translateX(0) !important;
}

html body .bkm-music .bkm-media--soundcloud .bkm-performers__grid {
  align-content: center !important;
  align-items: center !important;
  max-height: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body .bkm-music .bkm-media--soundcloud .bkm-performers__close {
  right: 8px !important;
  top: 7px !important;
}

html body .bkm-music .bkm-media--soundcloud .bkm-performers-button {
  position: relative !important;
  z-index: 35 !important;
}

@media (max-width:767px) {
  html body .bkm-music .bkm-media--soundcloud .bkm-performers,
  html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-first,
  html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-middle,
  html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-last,
  html body .bkm-music .bkm-media--soundcloud .bkm-performers--position-only {
    bottom: 0 !important;
    height: 100% !important;
    left: auto !important;
    max-height: 100% !important;
    max-width: calc(100% - 48px) !important;
    min-height: 100% !important;
    min-width: min(230px,calc(100% - 48px)) !important;
    padding: 24px 34px 13px 14px !important;
    right: 48px !important;
    top: 0 !important;
    width: max-content !important;
  }
}

/* 0.15.7's large-monitor spacer must not create document length. */
@media (min-width:1440px) and (min-height:850px) {
  html body .bkm-music:not(.is-overview) {
    padding-bottom: 0 !important;
  }
}

/* The live Music page ends with the site footer; the pale area visible on tall
   monitors is the theme/root canvas underneath the site wrapper, not Music DOM
   after the footer.  Paint both the canvas and every ancestor shell containing
   the shortcode so the page can never reveal the theme's white default. */
html.bkm-music-page,
body.bkm-music-page,
body.bkm-music-page .bkm-music-page-shell {
  background-color: #010101 !important;
}

@media (prefers-reduced-motion:reduce) {
  html body .bkm-music .bkm-media--soundcloud .bkm-performers {
    transition:none !important;
  }
}

/* ================================================================
   BK Music 0.16.1 — audio performer portal + clean footer geometry
   ================================================================ */
/* Explicitly honour the semantic hidden state regardless of theme rules or
   historical display overrides accumulated by older plugin versions. */
html body .bkm-music .bkm-panel[hidden],
html body .bkm-music .bkm-performers[hidden],
html body > .bkm-performers.bkm-performers--audio-portal[hidden] {
  display: none !important;
}

/* Uploaded-audio performer panels no longer live inside the scrollable Listen
   geometry while open. JS temporarily portals them to <body> and positions
   them fixed over the source player. Fixed portals cannot enlarge the document
   scroll overflow, so they cannot create space underneath the site footer. */
html body > .bkm-performers.bkm-performers--audio-portal {
  --bkm-performer-font-size: 13px;
  align-content: center !important;
  align-items: center !important;
  background: #1b1b1b !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: auto !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  clip-path: inset(0 0 0 100%) !important;
  color: #f4f3ef !important;
  display: flex !important;
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  height: var(--bkm-portal-row-height,88px) !important;
  justify-content: stretch !important;
  left: var(--bkm-portal-left,0px) !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: .99 !important;
  overflow: hidden !important;
  padding: 13px 38px 13px 18px !important;
  position: fixed !important;
  right: auto !important;
  top: var(--bkm-portal-row-top,0px) !important;
  transform: translateX(8px) !important;
  transform-origin: 100% 50% !important;
  transition:
    clip-path .30s cubic-bezier(.2,.78,.24,1),
    transform .30s cubic-bezier(.2,.78,.24,1),
    height .30s cubic-bezier(.2,.78,.24,1),
    top .30s cubic-bezier(.2,.78,.24,1),
    opacity .20s ease !important;
  width: var(--bkm-portal-width,100px) !important;
  z-index: 2147483000 !important;
}

html body > .bkm-performers.bkm-performers--audio-portal.is-open {
  clip-path: inset(0 0 0 0) !important;
  height: var(--bkm-portal-open-height,var(--bkm-portal-row-height,88px)) !important;
  opacity: 1 !important;
  top: var(--bkm-portal-open-top,var(--bkm-portal-row-top,0px)) !important;
  transform: translateX(0) !important;
}

html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__grid {
  align-content: center !important;
  align-items: center !important;
  column-gap: clamp(10px,2.2vw,20px) !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: max-content !important;
  justify-content: end !important;
  justify-items: stretch !important;
  max-height: none !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: 2px !important;
  row-gap: 5px !important;
  width: 100% !important;
}

html body > .bkm-performers.bkm-performers--audio-portal.bkm-performers--two-columns .bkm-performers__grid {
  direction: rtl !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(var(--bkm-performer-rows,6),auto) !important;
}

html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__item {
  align-items: baseline !important;
  color: #f4f3ef !important;
  direction: ltr !important;
  display: inline-flex !important;
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  font-size: var(--bkm-performer-font-size,13px) !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__name { color:#f4f3ef !important; font-weight:500 !important; }
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__separator,
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__instrument { color:#a6a5a3 !important; }

html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close,
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close:hover,
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close:focus,
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close:active {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #a6a5a3 !important;
  display: flex !important;
  font-family: Roboto,Arial,Helvetica,sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  height: 28px !important;
  justify-content: center !important;
  left: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  right: 8px !important;
  top: 7px !important;
  transform: none !important;
  width: 28px !important;
  z-index: 8 !important;
}
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close:hover,
html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__close:focus-visible { color:#f4f3ef !important; }

/* Once audio performers are portalled, the source row itself can be clipped.
   This removes the old always-visible audio overflow path that was able to
   leak into the page's scrollable overflow rectangle. */
html body .bkm-music .bkm-media--audio .bkm-media__row {
  overflow: hidden !important;
}
html body .bkm-music .bkm-media--audio.has-open-performers .bkm-media__row {
  overflow: hidden !important;
}

@media (max-width:767px) {
  html body > .bkm-performers.bkm-performers--audio-portal {
    --bkm-performer-font-size: 12px;
    padding: 12px 34px 12px 14px !important;
  }
  html body > .bkm-performers.bkm-performers--audio-portal .bkm-performers__grid {
    column-gap: 10px !important;
    row-gap: 4px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body > .bkm-performers.bkm-performers--audio-portal { transition:none !important; }
}