* { box-sizing: border-box; }
html, body {
  margin:0;
  width:100%;
  height:100%;
  min-height:100%;
  background:#111;
}
body {
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding:0;
}

/*
  The artwork keeps its native 1536:1024 (3:2) aspect ratio.
  It scales to the largest size that fits the available viewport, so the
  machine fills the screen vertically whenever the viewport height is the
  limiting dimension, without ever distorting or cropping the artwork.
*/
.machine {
  position:relative;
  width:min(1536px, 100vw, 150vh);
  aspect-ratio:1536/1024;
  overflow:hidden;
}
.background { position:absolute; inset:0; width:100%; height:100%; display:block; }

/*
  Native artwork coordinates:
  LED centers X = 287,359,432,504,577,651,724,797,869,942,1015,1087,1161,1234,1306,1379
  LED centers Y = 352,492,631,769
  Physical button centers Y = 401,540,679,817
  Button hit-area top ≈ 373, row height ≈ 58.
*/
.steps {
  position:absolute;
  left:16.3086%;       /* (287 - 36.5) / 1536 */
  top:0;
  width:75.8464%;      /* (1379 + 36.5 - 250.5) / 1536 */
  height:100%;
  z-index:10;
}

.step-row {
  position:absolute;
  left:0;
  width:100%;
  height:5.86%;
  display:grid;
  grid-template-columns:repeat(16,1fr);
}

/* Exact physical-button rows from the supplied artwork. */
.step-row:nth-child(1) { top:36.43%; }
.step-row:nth-child(2) { top:50.00%; }
.step-row:nth-child(3) { top:63.57%; }
.step-row:nth-child(4) { top:77.15%; }

.step {
  position:relative;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  min-width:0;
  height:100%;
  z-index:11;
  -webkit-tap-highlight-color:transparent;
}

/* The actual LED centers are calibrated to the supplied artwork. */
.step::after {
  content:"";
  position:absolute;
  left:50%;
  /* Native calibration:
     button row top ≈ 373px
     LED center ≈ 352px
     LED diameter ≈ 10px
     Therefore the LED pseudo-element's top edge is ≈ 16px above
     the button-row top, represented responsively as -26.62%. */
  top:-32.86%;
  width:13.75%;
  height:16.67%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#151515;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.7);
  pointer-events:none;
}
.step:hover::after { background:#4d2814; }
.step.active::after {
  background:#3ac430;
  box-shadow:0 0 5px rgba(58,196,48,.95), 0 0 11px rgba(58,196,48,.6);
}
.step.playing::after {
  background:#ff6600;
  box-shadow:0 0 6px rgba(255,102,0,1), 0 0 13px rgba(255,102,0,.7);
}
.step.active.playing::after {
  background:#ff6600;
  box-shadow:0 0 7px rgba(255,102,0,1), 0 0 15px rgba(255,102,0,.75);
}

/* BPM range: the live marker and value both use the same
   60–160 angular scale. The background artwork remains unchanged. */
/* BPM control
   Calibrated from the supplied 1536 x 1024 artwork.
   Actual knob centre: (1100, 179)
   Actual display panel: approximately x=1237..1366, y=135..217
*/
.dial {
  position:absolute;
  left:65.7552%;
  top:8.6914%;
  width:11.71875%;
  height:17.578125%;
  border-radius:50%;
  background:transparent;
  cursor:ns-resize;
  touch-action:none;
  z-index:20;
  transform:none;
}

/* Cover the artwork's knob face, including the baked-in white nub/pointer.
   The overlay is centered on the actual knob centre rather than the old
   approximate dial box. */
.bpm-knob-face {
  position:absolute;
  left:17.78%;
  top:17.78%;
  width:64.44%;
  height:64.44%;
  border-radius:50%;
  background:
    radial-gradient(circle at 44% 40%, #252525 0%, #181818 48%, #0b0b0b 88%, #050505 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.06),
    inset 0 -4px 7px rgba(0,0,0,.85);
  pointer-events:none;
  z-index:1;
}

/* Cover the baked static orange pointer on the outer ring. */
.dial::before {
  content:"";
  position:absolute;
  left:70.5%;
  top:10.5%;
  width:9%;
  height:13%;
  border-radius:50%;
  background:#171717;
  pointer-events:none;
  z-index:2;
}

/* Live indicator. Its bottom centre is fixed to the true knob centre,
   so rotation occurs around the knob centre rather than around the marker. */
.bpm-marker {
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:32%;
  margin:0;
  border-radius:3px;
  background:#ff3b1f;
  box-shadow:0 0 4px rgba(255,59,31,.7), 0 0 8px rgba(255,59,31,.35);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(0deg);
  pointer-events:none;
  z-index:3;
}

/* Replace the baked BPM readout with a live HTML display aligned to the
   actual black display panel in the artwork. */
.bpm-value {
  position:absolute;
  left:80.5339%;
  top:13.1836%;
  width:8.3984%;
  height:8.0078%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ff6600;
  font:700 clamp(18px,2.25vw,34px)/1 monospace;
  letter-spacing:.02em;
  background:#080808;
  border:1px solid rgba(210,210,210,.14);
  border-radius:4px;
  z-index:21;
  pointer-events:none;
  text-shadow:0 0 5px rgba(255,102,0,.45);
}

/* Transport controls
   The background artwork is untouched. PLAY is explicitly masked in its
   idle state and gets a green triangle ONLY while :active. STOP and CLEAR
   use the same momentary-press behavior. */

/* Transport controls — artwork remains untouched.
   Idle = completely neutral.
   Pressed = visible indication ONLY while physically held. */

/* Transport controls: no highlight. Only a subtle physical push. */
.transport {
  position:absolute;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  appearance:none;
  transition:transform 70ms ease, filter 70ms ease;
}
.transport:active {
  transform:translateY(2px) scale(.985);
  filter:brightness(.94);
}
/* Disable all persistent/colored transport overlays. */
.play-hit::before,.play-hit::after,.stop-hit::before,.stop-hit::after,.clear-hit::before,.clear-hit::after { display:none; }
.play-hit.transport-active-play,.stop-hit.transport-active-stop { filter:none; }
.play-hit { left:36.2%; top:12.0%; width:6.2%; height:10.5%; }
.stop-hit { left:43.9%; top:12.0%; width:6.2%; height:10.5%; }
.clear-hit { left:51.5%; top:12.0%; width:6.2%; height:10.5%; }


/* Match the PLAY icon color to the STOP icon. Static only — no highlight. */
.play-hit::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform:translate(-35%,-50%);
  border-top:18% solid transparent;
  border-bottom:18% solid transparent;
  border-left:30% solid #f2eee5;
  pointer-events:none;
  z-index:31;
}


/* Mobile: render the complete machine at 93% of the available size. */
@media (max-width: 900px) {
  .machine {
    transform: scale(0.87);
    transform-origin: center center;
  }
}


/* Mobile/tablet: add 15px space above the scaled machine. */
@media (max-width: 900px) {
  body {
    padding-top: 15px;
  }
}