/* MX STUDIOS MUSIC V3.1 — single top-right play/pause button only.
   Header placement fix only; existing site header/nav CSS remains untouched. */

.mx-music-toggle{
  position:absolute;
  z-index:2;
  top:50%;
  right:var(--pad);
  transform:translateY(-50%);
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.mx-music-toggle:active{opacity:.72}
.mx-music-icon{width:14px;height:14px;display:block;fill:currentColor}
.mx-music-pause{display:none}
.mx-music-toggle.is-playing .mx-music-play{display:none}
.mx-music-toggle.is-playing .mx-music-pause{display:block}

/* Desktop: reserve the far-right circle for music and put the existing CTA just to its left. */
@media (min-width:901px){
  .site-header .header-cta{
    position:absolute;
    right:calc(var(--pad) + 56px);
  }
  .site-header .mx-music-toggle{
    right:var(--pad);
  }
}

/* Tablet + mobile: existing CTA is already hidden by the site's CSS.
   Keep music immediately left of the hamburger instead of letting flex center it. */
@media (max-width:900px){
  .site-header .mx-music-toggle{
    right:64px;
    width:38px;
    height:38px;
  }
  .mx-music-icon{width:13px;height:13px}
}

@media (max-width:560px){
  .site-header .mx-music-toggle{
    right:58px;
    width:36px;
    height:36px;
  }
}

@media (prefers-reduced-motion:reduce){
  .mx-music-toggle{transition:none}
}


/* V3.3 — one real tap on the loading screen unlocks sound */
#loader{
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.loader-enter-hint{
  margin-top:16px;
  min-height:12px;
  font:500 8px/1.25 "DM Mono",monospace;
  letter-spacing:.16em;
  color:rgba(243,240,232,.45);
  text-transform:uppercase;
  transition:color .18s ease,opacity .18s ease,transform .18s ease;
}
.loader-enter-hint.is-ready{
  color:rgba(243,240,232,.88);
}
#loader.is-sound-ready .loader-track span{
  background:#ff4931;
}
@media (max-width:700px){
  .loader-enter-hint{
    font-size:7px;
    letter-spacing:.12em;
    margin-top:14px;
  }
}
@media (prefers-reduced-motion:reduce){
  .loader-enter-hint{transition:none}
}


/* V3.4 mobile scale polish only */
@media (max-width:900px){
  .site-header .mx-music-toggle{width:34px;height:34px;right:61px}
  .mx-music-icon{width:11px;height:11px}
}
@media (max-width:560px){
  .site-header .mx-music-toggle{width:32px;height:32px;right:57px}
  .mx-music-icon{width:10px;height:10px}
}