/* V3.19 — an unobtrusive header sound field, true SoundCloud icon on the
   left, and the same FXCHS ident as a short in-place logo accent. */
body.fxv2 .fxv2-header{isolation:isolate}
body.fxv2 .fxv319-header-eq{
  position:absolute;inset:5px clamp(12px,3vw,48px) 8px;z-index:0;
  pointer-events:none;display:grid;grid-template-columns:repeat(64,minmax(0,1fr));
  align-items:center;justify-items:center;overflow:hidden;
  opacity:.17;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9% 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9% 91%,transparent);
}
body.fxv2 .fxv319-header-eq i{
  display:block;width:clamp(1px,.16vw,3px);height:var(--eq-height);
  background:linear-gradient(180deg,rgba(112,238,243,.46),rgba(43,255,82,.44) 55%,rgba(220,90,87,.34));
  border-radius:6px;transform:scaleY(.77);transform-origin:center;
  filter:blur(.25px);
}
body.fxv2 .fxv2-header.fxv319-is-playing .fxv319-header-eq{opacity:.36}
body.fxv2 .fxv2-header.fxv319-is-playing .fxv319-header-eq i{
  animation:fx319-spectrum var(--eq-duration) ease-in-out var(--eq-delay) infinite alternate;
}
@keyframes fx319-spectrum{from{transform:scaleY(.23)}to{transform:scaleY(1.65)}}
/* The control now stands to the LEFT of the centred logo. Keep the player
   drawer below it, without encroaching on the menu button at the right. */
body.fxv2 .fxv2-header .fxv318-music{
  left:auto;right:calc(50% + clamp(90px,10vw,128px));top:calc(50% - 22px);
}
body.fxv2 .fxv318-music-eq{display:none}
body.fxv2 .fxv318-music-toggle svg{width:27px;height:27px}
body.fxv2 .fxv318-music-panel{left:-14px;right:auto}
@media(max-width:620px){
  body.fxv2 .fxv2-header .fxv318-music{left:auto;right:calc(50% + clamp(79px,20vw,102px))}
  body.fxv2 .fxv318-music-toggle svg{width:25px;height:25px}
}
@media(max-width:480px){
  body.fxv2 .fxv318-music-panel{position:fixed;left:9px;right:9px;width:auto;top:76px}
}
/* The permanent header mark is visible except during a single miniature
   rendition of the 5-second movie. It returns to a perfectly still image. */
body.fxv2 .fxv2-header .fxv2-logo{position:relative;isolation:isolate}
body.fxv2 .fxv319-brand-mini{
  position:absolute;left:9px;right:9px;top:50%;
  transform:translateY(-50%);display:block;width:calc(100% - 18px);
  height:auto;aspect-ratio:402/104;
  object-fit:contain;pointer-events:none;background:#000;
  opacity:0;visibility:hidden;transition:opacity .18s ease;
}
body.fxv2 .fxv2-logo.fxv319-mini-playing .fxv319-brand-mini{
  opacity:1;visibility:visible;
}
/* Reserve every media cell, even for a text-only blog note. This avoids
   the old single-column fallback fighting the genuine details view. */
body.fxv2 .fxv319-media-placeholder{
  display:grid;place-items:center;aspect-ratio:4/3;
  background:linear-gradient(140deg,#e9f1ea,#dbe7de);color:#3a9861;
  min-width:0;overflow:hidden;
}
body.fxv2 .fxv319-media-placeholder svg{width:38%;height:45%;opacity:.53}
body.fxv2 .fxv2-card-grid.is-v2-list .fxv319-no-media .fxv2-card-link{
  min-height:61px!important;grid-template-columns:42px minmax(0,1fr) 138px 108px!important;
  align-items:center!important;
}
body.fxv2 .fxv2-card-grid.is-v2-list .fxv319-no-media .fxv2-card-body{
  min-width:0;padding:0!important;
}
body.fxv2 .fxv2-card-grid.is-v2-list .fxv319-media-placeholder{
  width:42px;height:42px!important;min-height:42px!important;
}
body.fxv2 .fxv319-toolbar-slot{height:57px;min-height:57px;width:100%;pointer-events:none}
body.fxv2 .fxv2-card-viewbar{min-height:48px!important;box-sizing:border-box}
/* Embedded players reserve their future track-list footprint before their
   cross-origin data arrives. Nothing below the list jumps while it loads. */
body.fxv2 .fxv318-music-list{height:190px;min-height:190px;max-height:190px}
@media(max-width:600px){
  body.fxv2 .fxv2-card-grid.is-v2-list .fxv319-no-media .fxv2-card-link{
    grid-template-columns:34px minmax(0,1fr) 87px!important;
  }
  body.fxv2 .fxv2-card-grid.is-v2-list .fxv319-media-placeholder{
    width:34px;height:34px!important;min-height:34px!important;
  }
}
/* The big button is replaced with three modest typeset commands. No boxes,
   no pill backgrounds; clicking the black canvas also enters the website. */
body.fxv2 .fxv317-intro-overlay{cursor:pointer}
body.fxv2 .fxv319-intro-line{
  position:absolute;left:50%;top:calc(50% + clamp(93px,8.7vw,136px));
  transform:translateX(-50%);display:flex;align-items:center;justify-content:center;
  gap:5px;color:#f8fcf9;white-space:nowrap;z-index:3;
  font:500 clamp(12px,1.12vw,15px)/1.3 Inter,Arial,sans-serif;
  text-shadow:0 1px 9px #0009;letter-spacing:.025em;
}
body.fxv2 .fxv319-intro-line button{
  appearance:none;display:inline-block;border:0;border-radius:0;
  background:none;box-shadow:none;padding:5px 2px;
  font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;
  transition:opacity .2s ease,color .2s ease;
}
body.fxv2 .fxv319-intro-line button:hover{color:#bbffbe}
body.fxv2 .fxv319-intro-line button:focus-visible{outline:2px solid #afffaf;outline-offset:2px}
body.fxv2 .fxv319-intro-line [data-fxv319-audio][aria-pressed="true"]{color:#89fa91}
body.fxv2 .fxv317-intro.fxv319-intro-done .fxv319-intro-line{animation:fx319-line-in .45s ease both}
@keyframes fx319-line-in{from{opacity:.6;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
  body.fxv2 .fxv319-header-eq i,body.fxv2 .fxv319-intro-line{animation:none!important}
  body.fxv2 .fxv319-brand-mini{transition:none}
}