/* Phase 2G.1: approved standalone C3 composition, scoped beneath the shared site shell. */
#music .music-production-scene {
  /* Jukebox lighting controls: idle is a masked tube dimmer; v3 artwork is full output. */
  --tube-idle-dim-strength: .60;
  --spill-idle-level: .20;
  --spill-playing-level: 1;
  --ignition-duration: 620ms;
  --magenta-ignition-offset: 70ms;
  --pause-fade-duration: 1000ms;
  --amber-transition-duration: 780ms;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #101112;
}

.music-production-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

/* Full-canvas transparent overlay shares the backdrop's cover crop exactly. */
.music-production-painted-hand {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

/* Matches the production backdrop's cover crop (1672 × 941), not viewport coordinates. */
.music-production-backdrop-hotspots {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: max(100%, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.music-production-spotify-painting {
  position: absolute;
  left: calc(100% * 1095 / 1672);
  top: calc(100% * 165 / 941);
  /* The frame's right edge sits beneath persistent navigation; retain its unobstructed painted half. */
  width: calc(100% * 160 / 1672);
  height: calc(100% * 210 / 941);
  display: block;
  border-radius: 2px;
  cursor: pointer;
  pointer-events: auto;
}

.music-production-spotify-painting:hover { filter: brightness(1.07); }
.music-production-spotify-painting:focus-visible {
  outline: 2px solid #efc66c;
  outline-offset: 3px;
  box-shadow: 0 0 0 1px #241308, 0 0 8px rgba(238,171,66,.65);
}

.music-production-jukebox {
  --native-w: 1286;
  --object-w: min(57vw, 952px);
  --unit: calc(var(--object-w) / var(--native-w));
  /* The panel has an independent readability floor; its attachment remains local to --unit. */
  --panel-unit: max(var(--unit), .833333px);
  --panel-w: calc(var(--panel-unit) * 500);
  --panel-h: calc(var(--panel-unit) * 490);
  --panel-y: calc((var(--unit) * 597) - (var(--panel-unit) * 245));
  /* The former home is retained only as a measured pass-through position. */
  --panel-closed-x: calc(var(--unit) * 930);
  --panel-travel: calc(var(--unit) * 300);
  --panel-open-x: calc(var(--panel-closed-x) + var(--panel-travel));
  /* 1108 is the conservative opaque pillar edge across the full panel-height span. */
  --panel-stowed-x: calc((var(--unit) * 1108) - var(--panel-w));
  --panel-stow-travel: calc(var(--panel-open-x) - var(--panel-stowed-x));
  /* Source-local mechanical anchors: cabinet rail mount → panel spine at open. */
  --rail-mount-x: calc(var(--unit) * 845);
  /* The spine is 18 panel-local pixels inside the immutable open left edge. */
  --rail-carriage-x: calc(var(--panel-closed-x) + var(--panel-travel) + (var(--panel-unit) * 18));
  position: absolute;
  z-index: 1;
  left: 6vw;
  top: calc(100% - (var(--unit) * 930));
  width: var(--object-w);
  height: calc(var(--object-w) * 1223 / 1286);
  pointer-events: none;
}

.music-production-body {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

/* Phase 2G.5: approved lab environmental integration, locked to jukebox-local coordinates. */
.music-production-environment {
  position: absolute;
  z-index: 0;
  left: -11%;
  top: 0;
  width: 122%;
  height: 100%;
  pointer-events: none;
}

.music-production-environment > div { position: absolute; inset: 0; }

.music-production-contact-shadow {
  background:
    radial-gradient(ellipse 39% 47% at 50% 63%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.15) 42%, transparent 74%),
    radial-gradient(ellipse 48% 16% at 50% 96%, rgba(0,0,0,.22) 0%, transparent 70%);
}

.music-production-tube-spill {
  background:
    radial-gradient(ellipse 18% 28% at 17% 49%, rgba(0,187,226,.12) 0%, rgba(0,135,184,.055) 42%, transparent 73%),
    radial-gradient(ellipse 18% 28% at 83% 49%, rgba(239,35,143,.105) 0%, rgba(181,24,106,.045) 42%, transparent 73%);
}

.music-production-amber-spill {
  background: radial-gradient(ellipse 30% 22% at 50% 28%, rgba(221,126,28,.105) 0%, rgba(180,85,17,.04) 45%, transparent 76%);
}

/* Jukebox lighting: environmental spill remains behind the opaque body. */
.jukebox-lighting {
  --native-w: 1286;
  --object-w: min(57vw, 952px);
  --unit: calc(var(--object-w) / var(--native-w));
  position: absolute;
  z-index: 0;
  left: 6vw;
  top: calc(100% - (var(--unit) * 930));
  width: var(--object-w);
  height: calc(var(--object-w) * 1223 / 1286);
  filter: brightness(.82);
  opacity: var(--spill-idle-level);
  pointer-events: none;
  transition: opacity var(--pause-fade-duration) ease-in-out, filter var(--pause-fade-duration) ease-in-out;
}
.music-production-scene.is-playing .jukebox-lighting { filter: brightness(1); opacity: var(--spill-playing-level); transition-duration: var(--ignition-duration); transition-timing-function: cubic-bezier(.22,1.08,.42,1); }

.jukebox-light-cyan,.jukebox-light-magenta,.jukebox-light-amber { position:absolute; inset:-4%; pointer-events:none; mix-blend-mode:screen; }
@property --cyan-highlight-x { syntax:"<length>"; inherits:false; initial-value:246px; }
@property --cyan-highlight-y { syntax:"<length>"; inherits:false; initial-value:700px; }
@property --magenta-highlight-x { syntax:"<length>"; inherits:false; initial-value:1040px; }
@property --magenta-highlight-y { syntax:"<length>"; inherits:false; initial-value:700px; }
@property --cyan-highlight-radius-x { syntax:"<length>"; inherits:false; initial-value:15px; }
@property --cyan-highlight-radius-y { syntax:"<length>"; inherits:false; initial-value:76px; }
@property --magenta-highlight-radius-x { syntax:"<length>"; inherits:false; initial-value:15px; }
@property --magenta-highlight-radius-y { syntax:"<length>"; inherits:false; initial-value:76px; }
.jukebox-light-cyan { background:radial-gradient(ellipse 10% 35% at 17.5% 49%,rgba(86,231,255,.56) 0%,rgba(0,191,235,.27) 38%,rgba(0,154,203,.09) 57%,transparent 76%),radial-gradient(ellipse 9% 13% at 26% 58%,rgba(77,221,246,.25) 0%,transparent 72%); filter:blur(calc(var(--unit) * 13)); opacity:.62; animation:none; }
.jukebox-light-magenta { background:radial-gradient(ellipse 10% 35% at 82.5% 49%,rgba(255,100,202,.54) 0%,rgba(238,35,153,.26) 39%,rgba(185,22,112,.08) 58%,transparent 76%),radial-gradient(ellipse 9% 13% at 74% 58%,rgba(255,102,200,.24) 0%,transparent 72%); filter:blur(calc(var(--unit) * 13)); opacity:.60; animation:none; }
.jukebox-light-cyan::before,.jukebox-light-magenta::before,.jukebox-light-cyan::after,.jukebox-light-magenta::after { -webkit-mask-image:url("../assets/music/masks/KLIXBAIT_MUSIC_Jukebox_Tube-Core-Mask_v1.svg"); -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-image:url("../assets/music/masks/KLIXBAIT_MUSIC_Jukebox_Tube-Core-Mask_v1.svg"); mask-position:center; mask-repeat:no-repeat; mask-size:100% 100%; }
.jukebox-light-cyan::before,.jukebox-light-magenta::before { position:absolute; inset:3.7037037%; content:""; filter:blur(calc(var(--unit) * 2.5)); opacity:.24; transition:opacity var(--amber-transition-duration) ease-in-out; }
.jukebox-light-cyan::before { background:radial-gradient(ellipse 2.15% 29% at 20.1% 50%,rgba(152,249,255,.72) 0%,rgba(19,220,250,.28) 48%,transparent 78%),radial-gradient(ellipse 6% 2.1% at 19.2% 14.6%,rgba(119,245,255,.40) 0%,transparent 80%),radial-gradient(ellipse 3.5% 2% at 14.8% 24%,rgba(87,238,255,.27) 0%,transparent 80%); }
.jukebox-light-magenta::before { background:radial-gradient(ellipse 2.15% 29% at 79.9% 50%,rgba(255,198,238,.70) 0%,rgba(255,48,184,.27) 48%,transparent 78%),radial-gradient(ellipse 6% 2.1% at 80.8% 14.6%,rgba(255,166,224,.40) 0%,transparent 80%),radial-gradient(ellipse 3.5% 2% at 85.2% 24%,rgba(255,113,204,.27) 0%,transparent 80%); }
.jukebox-light-cyan::after,.jukebox-light-magenta::after { display:none; }
.jukebox-light-cyan::after { --cyan-highlight-radius-x:44px; --cyan-highlight-radius-y:280px; background:radial-gradient(ellipse var(--cyan-highlight-radius-x) var(--cyan-highlight-radius-y) at var(--cyan-highlight-x) var(--cyan-highlight-y),rgba(255,255,255,1) 0%,rgba(246,255,255,1) 26%,rgba(210,253,255,1) 58%,transparent 84%); animation:jukebox-cyan-source-idle 15.4s ease-in-out infinite; }
.jukebox-light-magenta::after { --magenta-highlight-radius-x:44px; --magenta-highlight-radius-y:280px; background:radial-gradient(ellipse var(--magenta-highlight-radius-x) var(--magenta-highlight-radius-y) at var(--magenta-highlight-x) var(--magenta-highlight-y),rgba(255,255,255,1) 0%,rgba(255,247,252,1) 26%,rgba(255,218,241,1) 58%,transparent 84%); animation:jukebox-magenta-source-idle 17.1s ease-in-out infinite; }
.jukebox-light-cyan::before,.jukebox-light-magenta::before { display:none; }

/* Above-body tube dimmers. The split colour fields plus tube-path mask exclude all cabinet/UI areas. */
.jukebox-tube-core-lighting { position:absolute; z-index:2; inset:0; pointer-events:none; }
.jukebox-tube-core-cyan,.jukebox-tube-core-magenta { position:absolute; inset:0; pointer-events:none; opacity:var(--tube-idle-dim-strength); transition:opacity var(--pause-fade-duration) ease-in-out; -webkit-mask-image:url("../assets/music/masks/KLIXBAIT_MUSIC_Jukebox_Tube-Core-Mask_v1.svg"); -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-image:url("../assets/music/masks/KLIXBAIT_MUSIC_Jukebox_Tube-Core-Mask_v1.svg"); mask-position:center; mask-repeat:no-repeat; mask-size:100% 100%; }
.jukebox-tube-core-cyan { background:linear-gradient(90deg,#002c3a 0 48%,transparent 52%); }
.jukebox-tube-core-magenta { background:linear-gradient(90deg,transparent 48%,#400629 52% 100%); }
.music-production-scene.is-playing .jukebox-tube-core-cyan { animation:jukebox-cyan-ignition var(--ignition-duration) cubic-bezier(.22,.8,.28,1) both; }
.music-production-scene.is-playing .jukebox-tube-core-magenta { animation:jukebox-magenta-ignition calc(var(--ignition-duration) + 60ms) cubic-bezier(.22,.8,.28,1) var(--magenta-ignition-offset) both; }
.jukebox-light-amber { background:radial-gradient(ellipse 24% 18% at 50% 28%,rgba(255,185,79,.25) 0%,rgba(224,123,28,.11) 46%,transparent 74%); filter:blur(calc(var(--unit) * 10)); opacity:.38; overflow:hidden; transition:opacity var(--amber-transition-duration) ease-in-out; }
.jukebox-light-amber::after { position:absolute; top:12%; left:27%; width:46%; height:29%; background:radial-gradient(ellipse at 40% 45%,rgba(255,222,153,.46) 0%,rgba(244,160,55,.15) 38%,transparent 69%); content:""; filter:blur(calc(var(--unit) * 8)); opacity:0; transform:translate3d(-8%,3%,0) scale(.94); }
.music-production-scene.is-playing .jukebox-light-amber { opacity:.78; }
 .music-production-scene.is-playing .jukebox-light-amber::after { animation:jukebox-amber-operational-flicker 13.8s ease-in-out infinite; }
@keyframes jukebox-cyan-ambient { 0%{opacity:.90;transform:translate3d(-1.1%,.7%,0) scale(.975)} 19%{opacity:1.06;transform:translate3d(.5%,-.8%,0) scale(1.015)} 47%{opacity:.94;transform:translate3d(-.4%,.3%,0) scale(.99)} 73%{opacity:1.14;transform:translate3d(.8%,-.2%,0) scale(1.025)} 100%{opacity:.90;transform:translate3d(-1.1%,.7%,0) scale(.975)} }
@keyframes jukebox-magenta-ambient { 0%{opacity:.86;transform:translate3d(.8%,-.6%,0) scale(.98)} 23%{opacity:1.04;transform:translate3d(-.6%,.8%,0) scale(1.02)} 56%{opacity:.91;transform:translate3d(.4%,-.3%,0) scale(.992)} 81%{opacity:1.11;transform:translate3d(-.9%,.3%,0) scale(1.018)} 100%{opacity:.86;transform:translate3d(.8%,-.6%,0) scale(.98)} }
@keyframes jukebox-cyan-ignition { 0%{opacity:var(--tube-idle-dim-strength)} 38%{opacity:.07} 56%{opacity:.16} 100%{opacity:0} }
@keyframes jukebox-magenta-ignition { 0%{opacity:var(--tube-idle-dim-strength)} 36%{opacity:.08} 55%{opacity:.17} 100%{opacity:0} }
@keyframes jukebox-cyan-source-idle { 0%,100%{--cyan-highlight-x:246px;--cyan-highlight-y:700px} 38%{--cyan-highlight-x:246px;--cyan-highlight-y:678px} 71%{--cyan-highlight-x:246px;--cyan-highlight-y:690px} }
@keyframes jukebox-magenta-source-idle { 0%,100%{--magenta-highlight-x:1040px;--magenta-highlight-y:700px} 31%{--magenta-highlight-x:1040px;--magenta-highlight-y:678px} 76%{--magenta-highlight-x:1040px;--magenta-highlight-y:692px} }
@keyframes jukebox-cyan-source-playing { 0%{--cyan-highlight-x:246px;--cyan-highlight-y:794px} 26%{--cyan-highlight-x:246px;--cyan-highlight-y:421px} 54%{--cyan-highlight-x:330px;--cyan-highlight-y:205px} 78%{--cyan-highlight-x:468px;--cyan-highlight-y:101px} 100%{--cyan-highlight-x:573px;--cyan-highlight-y:69px} }
@keyframes jukebox-magenta-source-playing { 0%{--magenta-highlight-x:713px;--magenta-highlight-y:69px} 27%{--magenta-highlight-x:818px;--magenta-highlight-y:101px} 58%{--magenta-highlight-x:956px;--magenta-highlight-y:205px} 82%{--magenta-highlight-x:1040px;--magenta-highlight-y:421px} 100%{--magenta-highlight-x:1040px;--magenta-highlight-y:794px} }
@keyframes jukebox-amber-reflection { 0%{opacity:.40;transform:translate3d(-16%,7%,0) scale(.90)} 27%{opacity:.70;transform:translate3d(5%,-6%,0) scale(1.08)} 62%{opacity:.48;transform:translate3d(14%,4%,0) scale(.96)} 84%{opacity:.76;transform:translate3d(-3%,5%,0) scale(1.05)} 100%{opacity:.40;transform:translate3d(-16%,7%,0) scale(.90)} }
@keyframes jukebox-amber-operational-flicker { 0%{opacity:.18;transform:translate3d(-8%,3%,0) scale(.94)} 17%{opacity:.33;transform:translate3d(-8%,3%,0) scale(.97)} 38%{opacity:.24;transform:translate3d(-8%,3%,0) scale(.95)} 55%{opacity:.43;transform:translate3d(-8%,3%,0) scale(1)} 71%{opacity:.27;transform:translate3d(-8%,3%,0) scale(.96)} 89%{opacity:.37;transform:translate3d(-8%,3%,0) scale(.98)} 100%{opacity:.18;transform:translate3d(-8%,3%,0) scale(.94)} }

/* Three compact telescopic members: hidden under the cabinet at home, extended behind the panel spine. */
.music-production-rails {
  position: absolute;
  z-index: 1;
  left: var(--rail-mount-x);
  top: var(--panel-y);
  width: calc(var(--rail-carriage-x) - var(--rail-mount-x));
  height: var(--panel-h);
  overflow: visible;
  pointer-events: none;
}

.music-production-rail {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--unit) * 11);
  transform: scaleX(.12);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.22,.75,.2,1);
}

.music-production-rail span,
.music-production-rail i,
.music-production-rail b { position: absolute; display: block; }
.music-production-rail span { inset: 0; border: 1px solid #050606; border-radius: 999px; background: linear-gradient(#34363a, #0b0d0e 50%, #272a2c); box-shadow: inset 0 1px #6a6a66aa; }
.music-production-rail i { top: 2px; right: 6%; bottom: 2px; left: 18%; border: 1px solid #5c331b; border-radius: 999px; background: linear-gradient(90deg, #4b2816, #b3773d 48%, #583017); box-shadow: inset 0 1px #e1ad72aa; }
.music-production-rail b { top: -3px; right: 0; width: calc(var(--unit) * 14); height: calc(var(--unit) * 17); border: 1px solid #151719; border-radius: 2px; background: linear-gradient(90deg, #121415, #a36a36 50%, #1c1d1d); box-shadow: 0 1px 2px #0009; }
.rail-one { top: calc(var(--panel-unit) * 123); }
.rail-two { top: calc(var(--panel-unit) * 244); }
.rail-three { top: calc(var(--panel-unit) * 365); }
.music-production-rails.is-extended .music-production-rail { transform: scaleX(1); }

/* Approved 500×490 chassis. The panel grows around its locked mechanical centreline. */
.music-production-panel {
  position: absolute;
  z-index: 1;
  left: var(--panel-stowed-x);
  top: var(--panel-y);
  width: var(--panel-w);
  height: var(--panel-h);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform 620ms ease, opacity 150ms ease;
}

.music-production-panel.is-open {
  opacity: 1;
  transform: translateX(var(--panel-stow-travel));
  pointer-events: auto;
}

/* During retraction only transform returns: opacity stays until rails are home. */
.music-production-panel.is-returning {
  opacity: 1;
  pointer-events: none;
}

.music-production-panel-chassis {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.music-production-panel-content { position: absolute; inset: 0; color: #eee4d5; }

.music-production-panel-artwork {
  position: absolute;
  left: calc(var(--panel-unit) * 111);
  top: calc(var(--panel-unit) * 57);
  width: calc(var(--panel-unit) * 91);
  height: calc(var(--panel-unit) * 91);
  object-fit: cover;
  background: #3d2a1f;
  opacity: 0;
  transition: opacity 600ms ease;
}
.music-production-panel-artwork.is-active { opacity: 1; }

.music-production-panel-status {
  position: absolute;
  left: calc(var(--panel-unit) * 242);
  top: calc(var(--panel-unit) * 63);
  width: calc(var(--panel-unit) * 191);
  height: calc(var(--panel-unit) * 83);
  overflow: hidden;
}

.music-production-panel-eyebrow,
.music-production-panel-idea h3 {
  margin: 0 0 calc(var(--panel-unit) * 5);
  color: #d5a853;
  font: 700 calc(var(--panel-unit) * 10.5)/1 Arial, sans-serif;
  letter-spacing: .13em;
}

.music-production-panel-status h2 {
  max-height: 2.07em;
  margin: 0;
  overflow: hidden;
  color: #f0e4d2;
  font: 700 calc(var(--panel-unit) * 18)/1.03 Arial, sans-serif;
  overflow-wrap: anywhere;
}

.music-production-panel-status p:not(.music-production-panel-eyebrow) {
  margin: calc(var(--panel-unit) * 3) 0 0;
  color: #ddc49a;
  font: 400 calc(var(--panel-unit) * 11)/1.2 Arial, sans-serif;
}

.music-production-panel-status p[data-production-panel-version] {
  font-family: Arial, sans-serif;
  font-style: italic;
  font-weight: 600;
}

.music-production-panel-idea {
  position: absolute;
  left: calc(var(--panel-unit) * 105);
  top: calc(var(--panel-unit) * 190);
  width: calc(var(--panel-unit) * 358);
  height: calc(var(--panel-unit) * 110);
  overflow: hidden;
}

.music-production-panel-idea p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #eadfce;
  font: 400 calc(var(--panel-unit) * 12)/1.22 Arial, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.music-production-panel-progress {
  position: absolute;
  left: calc(var(--panel-unit) * 106);
  top: calc(var(--panel-unit) * 320);
  display: block;
  align-items: center;
  width: calc(var(--panel-unit) * 358);
  height: calc(var(--panel-unit) * 27);
  padding: 0;
  color: #ead8bc;
  font: 400 calc(var(--panel-unit) * 10)/1 Arial, sans-serif;
}

.music-production-panel-progress span {
  position: absolute;
  top: 0;
  width: calc(var(--panel-unit) * 60);
  height: 100%;
  display: grid;
  place-items: center;
}
.music-production-panel-progress span:first-child { left: calc(var(--panel-unit) * 21); }
.music-production-panel-progress span:last-child { right: 0; }

.music-production-panel-progress input {
  position: absolute;
  left: calc(var(--panel-unit) * 96);
  top: calc(var(--panel-unit) * -4);
  width: calc(var(--panel-unit) * 193);
  height: 100%;
  accent-color: #e4ae50;
}

.music-production-panel-controls {
  position: absolute;
  left: calc(var(--panel-unit) * 105);
  top: calc(var(--panel-unit) * 360);
  display: block;
  width: calc(var(--panel-unit) * 358);
  height: calc(var(--panel-unit) * 75);
  align-items: start;
}

.music-production-panel-controls button {
  position: absolute;
  border: 0;
  background: transparent;
  color: #f1dfbd;
  padding: 0;
  display: grid;
  place-items: center;
  width: calc(var(--panel-unit) * 64);
  height: calc(var(--panel-unit) * 64);
  text-align: center;
}

.music-production-panel-controls button:not(:disabled) { cursor: pointer; }

.music-production-panel-controls [data-production-panel-play] { left: calc(var(--panel-unit) * -2); top: calc(var(--panel-unit) * 10); }
.music-production-panel-controls [data-production-panel-eject] { left: calc(var(--panel-unit) * 230); top: calc(var(--panel-unit) * 10); }
.music-production-panel-controls button svg { width: calc(var(--panel-unit) * 16); height: calc(var(--panel-unit) * 16); fill: currentColor; filter: drop-shadow(0 1px 1px #000); }
.music-production-panel-controls [data-production-panel-play] svg { transform: translateY(calc(var(--panel-unit) * -6)); }
.music-production-panel-controls [data-production-panel-eject] svg { transform: translate(calc(var(--panel-unit) * -4), calc(var(--panel-unit) * -6)); }
.music-production-panel-controls [data-production-panel-play] .play-icon { display: none; }
.music-production-panel-controls [data-production-panel-play].is-paused .play-icon { display: block; }
.music-production-panel-controls [data-production-panel-play].is-paused .pause-icon { display: none; }

.music-production-panel-controls button:disabled { cursor: default; opacity: .55; }

.music-production-panel-controls label {
  position: relative;
  position: absolute;
  left: calc(var(--panel-unit) * 70);
  top: calc(var(--panel-unit) * 11);
  display: block;
  width: calc(var(--panel-unit) * 50);
  height: calc(var(--panel-unit) * 50);
  min-width: 0;
  color: #ead8bc;
  color: transparent;
  font-size: 0;
}

.music-production-panel-controls label::before { position: absolute; inset: calc(var(--panel-unit) * 4); border: 1px solid #9c6c37; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #806042, #211710 62%, #070707 65%); box-shadow: inset 0 0 0 calc(var(--panel-unit) * 2) #181410, 0 1px 2px #000b; content: ""; transform: rotate(var(--volume-turn, 54deg)); }
.music-production-panel-controls label::after { position: absolute; top: calc(var(--panel-unit) * 10); left: 50%; width: 1px; height: calc(var(--panel-unit) * 9); background: #e1b361; content: ""; transform: translateX(-50%) rotate(var(--volume-turn, 54deg)); transform-origin: 50% calc(var(--panel-unit) * 15); }

.music-production-panel-controls label input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Overlay reader: all anchors are jukebox-local, so existing player geometry stays locked. */
.music-magnifier { --magnifier-left-origin-x:var(--panel-open-x); --magnifier-right-origin-x:calc(var(--panel-open-x) + var(--panel-w)); --magnifier-origin-y:calc(var(--panel-y) + var(--panel-h)/2); --magnifier-left-x:calc(var(--unit) * 900); --magnifier-right-x:calc(var(--panel-open-x) + var(--panel-w) + (var(--unit) * 80)); --magnifier-left-travel:calc(var(--magnifier-left-origin-x) - var(--magnifier-left-x)); --magnifier-right-travel:calc(var(--magnifier-right-x) - var(--magnifier-right-origin-x)); /* The joint sits near IDEA's lower half: extend 260px up but only 55px down to leave every player control exposed. */ --magnifier-pole-up:calc(var(--panel-unit) * 260); --magnifier-pole-down:calc(var(--panel-unit) * 55); --magnifier-projection-top:calc(var(--magnifier-origin-y) - var(--magnifier-pole-up)); position:absolute; z-index:8; inset:0; overflow:visible; pointer-events:none; }
.music-production-panel-controls .music-magnifier__toggle { position:absolute; z-index:5; /* Lower-controls local 125–225 maps to panel-local 230–330: the aperture immediately right of volume. */ left:calc(var(--panel-unit) * 125); top:calc(var(--panel-unit) * 10); display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:calc(var(--panel-unit) * 100); height:calc(var(--panel-unit) * 47); min-height:0; margin:0; padding:0; border:0; background:transparent; color:#d8b975; font:700 calc(var(--panel-unit) * 9.5)/1 Arial,sans-serif; letter-spacing:.08em; line-height:1; text-align:center; text-indent:0; white-space:nowrap; pointer-events:auto; text-shadow:0 1px 1px #000; transform:none; appearance:none; -webkit-appearance:none; }
.music-production-panel-controls .music-magnifier__toggle:not(:disabled) { cursor:zoom-in; }.music-production-panel-controls .music-magnifier__toggle[aria-expanded="true"] { cursor:zoom-out; }.music-magnifier__toggle:focus-visible { outline:2px solid #f3bd51; outline-offset:2px; }
.music-magnifier__rail { position:absolute; z-index:0; top:calc(var(--magnifier-origin-y) - (var(--panel-unit) * 5)); height:calc(var(--panel-unit) * 10); transform:scaleX(.025); opacity:0; transition:transform 500ms cubic-bezier(.22,.72,.2,1),opacity 100ms linear; }.music-magnifier__rail span { position:absolute; inset:0; border:1px solid #241408; border-radius:999px; background:linear-gradient(#2a180c,#75431e 19%,#d1a05c 43%,#563018 62%,#d0a15f 80%,#2d190c); box-shadow:inset 0 1px #ffe0a080,inset 0 -1px #1a0d0588,0 2px 3px #000c; }.music-magnifier__rail i { position:absolute; top:22%; bottom:22%; border-radius:999px; background:linear-gradient(90deg,transparent,#ffe2a599,transparent); }.music-magnifier__rail--left { left:var(--magnifier-left-x); width:var(--magnifier-left-travel); transform-origin:right center; }.music-magnifier__rail--left i { right:14%; left:10%; }.music-magnifier__rail--right { left:var(--magnifier-right-origin-x); width:var(--magnifier-right-travel); transform-origin:left center; }.music-magnifier__rail--right i { right:10%; left:14%; }
.music-magnifier__joint { position:absolute; z-index:4; top:calc(var(--magnifier-origin-y) - (var(--panel-unit) * 14)); width:calc(var(--panel-unit) * 28); height:calc(var(--panel-unit) * 28); border:1px solid #241408; border-radius:4px; background:linear-gradient(135deg,#2e190b,#bd8040 25%,#62401f 48%,#e0b66e 71%,#35200d); box-shadow:inset 0 1px #ffe3a588,inset 0 0 0 3px #513018,0 2px 5px #000d; opacity:0; transition:transform 500ms cubic-bezier(.22,.72,.2,1),opacity 100ms linear; }.music-magnifier__joint::after { position:absolute; inset:27%; border:1px solid #1f1007; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e0ae67,#79461f 57%,#291408 62%); box-shadow:inset 0 1px #f7cc8677; content:""; }.music-magnifier__joint--left { left:calc(var(--magnifier-left-x) - (var(--panel-unit) * 14)); transform:translateX(var(--magnifier-left-travel)) rotate(-20deg) scale(.55); }.music-magnifier__joint--right { left:calc(var(--magnifier-right-x) - (var(--panel-unit) * 14)); transform:translateX(calc(var(--magnifier-right-travel) * -1)) rotate(20deg) scale(.55); }
.music-magnifier__pole { position:absolute; z-index:4; top:var(--magnifier-projection-top); width:calc(var(--panel-unit) * 15); height:calc(var(--magnifier-pole-up) + var(--magnifier-pole-down)); opacity:0; transform:scaleY(.035); transform-origin:center var(--magnifier-pole-up); transition:transform 390ms cubic-bezier(.22,.72,.2,1) 365ms,opacity 100ms linear 365ms; }.music-magnifier__pole--left { left:calc(var(--magnifier-left-x) - (var(--panel-unit) * 7.5)); }.music-magnifier__pole--right { left:calc(var(--magnifier-right-x) - (var(--panel-unit) * 7.5)); }.music-magnifier__pole::before,.music-magnifier__pole::after,.music-magnifier__pole i,.music-magnifier__pole b { position:absolute; display:block; left:0; width:100%; background:linear-gradient(90deg,#221206,#8d5527 25%,#e1b873 48%,#79441f 72%,#1c0e05); box-shadow:inset 1px 0 #ffdda18a,inset -1px 0 #170a04,0 0 2px #000b; content:""; }.music-magnifier__pole::before { top:0; height:31%; }.music-magnifier__pole i { top:30%; height:21%; }.music-magnifier__pole b { bottom:30%; height:21%; }.music-magnifier__pole::after { bottom:0; height:31%; }.music-magnifier__pole i,.music-magnifier__pole b { border:1px solid #43250f; border-width:1px 0; }
.music-magnifier__projection { position:absolute; z-index:1; left:calc(var(--magnifier-left-x) + (var(--panel-unit) * 10)); top:var(--magnifier-projection-top); width:calc(var(--magnifier-right-x) - var(--magnifier-left-x) - (var(--panel-unit) * 20)); height:calc(var(--magnifier-pole-up) + var(--magnifier-pole-down)); overflow:hidden; opacity:0; background:radial-gradient(ellipse at 5% 48%,rgba(110,224,230,.15),transparent 16%),radial-gradient(ellipse at 95% 45%,rgba(104,213,224,.13),transparent 17%),radial-gradient(ellipse at 31% 32%,rgba(247,249,247,.16),transparent 52%),linear-gradient(112deg,rgba(150,159,160,.08),rgba(210,218,218,.17) 47%,rgba(113,124,126,.13)); box-shadow:inset 1px 0 rgba(151,231,233,.48),inset -1px 0 rgba(151,231,233,.45),inset 0 0 42px rgba(226,239,238,.1),0 0 16px rgba(92,206,214,.08); backdrop-filter:blur(0) saturate(.78); -webkit-backdrop-filter:blur(0) saturate(.78); transition:opacity 310ms ease 610ms,backdrop-filter 310ms ease 610ms,-webkit-backdrop-filter 310ms ease 610ms; }.music-magnifier__sheen { position:absolute; inset:-25% -55%; opacity:0; background:linear-gradient(105deg,transparent 36%,rgba(210,255,255,.05) 43%,rgba(232,255,255,.5) 50%,rgba(167,239,242,.08) 57%,transparent 64%); transform:translateX(-45%); }.music-magnifier__content { position:absolute; z-index:2; top:10%; left:8%; width:82%; color:#090d0e; opacity:0; transform:translateY(7px); text-shadow:none; filter:none; mix-blend-mode:normal; transition:opacity 210ms ease 835ms,transform 210ms ease 835ms; }.music-magnifier__eyebrow { margin:0 0 .5em; color:#b8dfe1; font:700 calc(var(--panel-unit) * 14)/1 Arial,sans-serif; letter-spacing:.15em; opacity:1; text-shadow:none; filter:none; }.music-magnifier__content h2 { margin:0; color:#050708; font:800 calc(var(--panel-unit) * 25)/1.08 Arial,sans-serif; opacity:1; text-shadow:none; filter:none; }.music-magnifier__version { min-height:1.1em; margin:.22em 0 .65em; color:#292419; font:italic 600 calc(var(--panel-unit) * 14)/1.2 Arial,sans-serif; opacity:1; text-shadow:none; filter:none; }.music-magnifier__copy { margin:0; color:#090d0e; font:500 clamp(15px,calc(var(--panel-unit) * 20),20px)/1.56 Arial,sans-serif; opacity:1; text-align:justify; text-shadow:none; filter:none; mix-blend-mode:normal; }
.music-magnifier.is-deployed .music-magnifier__rail { opacity:1; transform:scaleX(1); }.music-magnifier.is-deployed .music-magnifier__joint { opacity:1; transform:translateX(0) rotate(0) scale(1); }.music-magnifier.is-deployed .music-magnifier__pole { opacity:1; transform:scaleY(1); }.music-magnifier.is-deployed .music-magnifier__projection { opacity:1; backdrop-filter:blur(13px) saturate(.85); -webkit-backdrop-filter:blur(13px) saturate(.85); }.music-magnifier.is-deployed .music-magnifier__content { opacity:1; transform:translateY(0); }.music-magnifier[data-magnifier-state="opening"] .music-magnifier__sheen,.music-magnifier[data-magnifier-state="closing"] .music-magnifier__sheen { animation:music-magnifier-sheen 430ms ease-out 630ms both; }.music-magnifier[data-magnifier-state="closing"] .music-magnifier__content { transition-delay:0ms; }.music-magnifier[data-magnifier-state="closing"] .music-magnifier__projection { transition-delay:130ms; }.music-magnifier[data-magnifier-state="closing"] .music-magnifier__pole { transition-delay:300ms; }.music-magnifier[data-magnifier-state="closing"] .music-magnifier__rail,.music-magnifier[data-magnifier-state="closing"] .music-magnifier__joint { transition-delay:470ms; }@keyframes music-magnifier-sheen { from { opacity:0; transform:translateX(-45%); } 35% { opacity:.9; } to { opacity:0; transform:translateX(45%); } }

/* The slot stays source-native; only the artwork receives the approved optical correction. */
.music-production-medallion {
  position: absolute;
  z-index: 2;
  left: calc(var(--unit) * 606);
  top: calc(var(--unit) * 108);
  width: calc(var(--unit) * 76);
  height: calc(var(--unit) * 76);
  overflow: hidden;
  border-radius: 50%;
}

.music-production-medallion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(calc(var(--unit) * -7), calc(var(--unit) * 2));
}

/* Source-native live bank: 315,361,648×360 on the 1286×1223 jukebox canvas. */
.music-production-bank {
  position: absolute;
  z-index: 3;
  left: calc(var(--unit) * 315);
  top: calc(var(--unit) * 361);
  width: calc(var(--unit) * 648);
  height: calc(var(--unit) * 360);
  pointer-events: auto;
}

.music-production-bank-rows {
  display: grid;
  grid-template-rows: repeat(6, calc(var(--unit) * 50));
  gap: calc(var(--unit) * 11);
  width: 100%;
  height: 100%;
}

.music-production-track {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #342719;
  font-family: Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}

.music-production-track:focus-visible {
  outline: calc(var(--unit) * 3) solid #56eaff;
  outline-offset: calc(var(--unit) * 2);
}

.music-production-track:disabled { cursor: not-allowed; opacity: .44; }

.music-production-track::after {
  position: absolute;
  top: calc(var(--unit) * 2);
  right: calc(var(--unit) * 27);
  width: calc(var(--unit) * 52);
  height: calc(var(--unit) * 52);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.music-production-track:not(:disabled):hover::after {
  box-shadow: 0 0 calc(var(--unit) * 5) #ff65c655;
}

.music-production-track.is-selected::after {
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,210,240,.72) 0%, rgba(255,89,199,.58) 25%, rgba(232,19,151,.30) 49%, rgba(232,19,151,0) 72%);
  box-shadow: 0 0 calc(var(--unit) * 5) rgba(255,55,183,.38);
  mix-blend-mode: screen;
}

.music-production-track-code {
  position: absolute;
  top: 50%;
  left: calc(var(--unit) * 14);
  width: calc(var(--unit) * 61);
  transform: translateY(-50%);
  color: #b99352;
  font-size: calc(var(--unit) * 13);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}

.music-production-track-title {
  position: absolute;
  top: 50%;
  right: calc(var(--unit) * 80);
  left: calc(var(--unit) * 95);
  max-height: 2.1em;
  overflow: hidden;
  transform: translateY(-50%);
  color: #20170e;
  font-size: calc(var(--unit) * 17);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.03;
  text-shadow: 0 1px rgba(255,242,209,.5);
}

.music-production-track-title.is-condensed { font-size: calc(var(--unit) * 14); }

.music-production-track-version {
  display: block;
  margin-top: calc(var(--unit) * 1);
  color: #65421d;
  font-size: .76em;
  font-family: Arial, sans-serif;
  font-style: italic;
  font-weight: 600;
}

/* Source-native lower control strip: 320,747,638×92. */
.music-production-paging {
  position: absolute;
  z-index: 3;
  left: calc(var(--unit) * 320);
  top: calc(var(--unit) * 747);
  display: block;
  width: calc(var(--unit) * 638);
  height: calc(var(--unit) * 92);
  padding: 0 calc(var(--unit) * 20);
  pointer-events: auto;
}

.music-production-paging button {
  position: absolute;
  top: calc(var(--unit) * 8);
  width: calc(var(--unit) * 84);
  height: calc(var(--unit) * 80);
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.music-production-paging [data-production-bank-prev] { left: calc(var(--unit) * 11); }
.music-production-paging [data-production-bank-next] { right: calc(var(--unit) * 50); }

.music-production-paging button:focus-visible {
  outline: calc(var(--unit) * 2) solid #f3bd51;
  outline-offset: calc(var(--unit) * 2);
}

.music-production-paging button:disabled { cursor: default; opacity: .4; }

.music-production-paging [data-production-bank-status] {
  position: absolute;
  top: calc(var(--unit) * 12);
  left: calc(var(--unit) * 181);
  display: grid;
  width: calc(var(--unit) * 276);
  height: calc(var(--unit) * 67);
  place-items: center;
  color: #d8b975;
  font: 700 calc(var(--unit) * 15)/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.music-production-paging [data-production-bank-status]:disabled { cursor: default; opacity: .4; }

@media (max-width: 1450px) {
  .jukebox-lighting {
    --object-w: min(61.2vw, 833px);
    left: 10px;
  }
  .music-production-jukebox {
    --object-w: min(61.2vw, 833px);
    left: 10px;
  }
}

@media (max-width: 1050px) { .music-magnifier { --magnifier-left-x:calc(var(--unit) * 975); --magnifier-right-x:calc(var(--panel-open-x) + var(--panel-w) + (var(--unit) * 30)); --magnifier-pole-up:calc(var(--panel-unit) * 220); --magnifier-pole-down:calc(var(--panel-unit) * 55); }.music-magnifier__content { left:9%; width:80%; } }

@media (max-width: 760px) {
  .music-production-scene { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jukebox-light-cyan,
  .jukebox-light-cyan::before,
  .jukebox-light-cyan::after,
  .jukebox-light-magenta,
  .jukebox-light-magenta::before,
  .jukebox-light-magenta::after,
  .jukebox-tube-core-cyan,
  .jukebox-tube-core-magenta,
  .jukebox-light-amber,
  .jukebox-light-amber::after { animation: none !important; }
  .music-production-scene.is-playing .jukebox-light-cyan { opacity: .63; }
  .music-production-scene.is-playing .jukebox-light-magenta { opacity: .61; }
  .music-production-scene.is-playing .jukebox-tube-core-cyan,
  .music-production-scene.is-playing .jukebox-tube-core-magenta { opacity: 0; }
  .music-production-scene.is-playing .jukebox-light-amber::after { opacity: .26; transform: translate3d(0, 0, 0) scale(1); }
  .music-production-panel,
  .music-production-rail,
  .music-magnifier *,
  .music-magnifier { animation-duration: 1ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}