/* SOUL ONE LIVE v47 · Unified musical controls
   One DAW-grade command strip for BPM, key and semitone transposition.
   VISUAL ONLY: native elements, ids, focus and audio event handlers stay.
   Scope to desktop only. Mobile/iPad keep their established controls. */
@media (min-width:1000px) and (min-height:580px) and (pointer:fine) {
  /* Three floating rectangles become one coherent instrument strip. */
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center,
  html:fullscreen body>.app>.top.stage-header .stage-center {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(143px,1fr) 69px minmax(152px,1.08fr)!important;
    align-items:stretch!important;
    align-content:stretch!important;
    gap:0!important;
    padding:4px 5px!important;
    width:clamp(375px,29vw,430px)!important;
    min-width:0!important;
    height:63px!important;
    min-height:63px!important;
    max-height:63px!important;
    border:1px solid #34526a!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,#132a3d,#102436)!important;
    box-shadow:inset 0 1px 0 rgba(212,238,254,.06)!important;
    overflow:hidden!important;
    flex:0 1 430px!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field{
    box-sizing:border-box!important;
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:2px!important;
    height:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:2px 7px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  /* Exactly two subtle vertical lines rather than three heavy boxes. */
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field--key,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field--key,
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field--pitch,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field--pitch{
    border-left:1px solid #335068!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field .field-label,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field .field-label{
    font-family:inherit!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:12px!important;
    font-weight:660!important;
    letter-spacing:.012em!important;
    white-space:nowrap!important;
    text-transform:none!important;
    color:#a8bece!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .value-row,
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .ctl-group,
  html:fullscreen body>.app>.top.stage-header .stage-center .value-row,
  html:fullscreen body>.app>.top.stage-header .stage-center .ctl-group {
    display:flex!important;
    flex:0 0 30px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-height:30px!important;
    height:30px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .value-row button,
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .ctl-group button,
  html:fullscreen body>.app>.top.stage-header .stage-center .value-row button,
  html:fullscreen body>.app>.top.stage-header .stage-center .ctl-group button {
    box-sizing:border-box!important;
    display:inline-flex!important;
    flex:0 0 30px!important;
    align-items:center!important;
    justify-content:center!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    margin:0!important;
    padding:0!important;
    border-radius:7px!important;
    border:1px solid #42647b!important;
    background:#233e53!important;
    color:#e7f4fc!important;
    box-shadow:none!important;
    font-size:19px!important;
    line-height:1!important;
    font-weight:700!important;
    text-align:center!important;
    cursor:pointer;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .value-row button:hover:not(:disabled),
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .ctl-group button:hover:not(:disabled),
  html:fullscreen body>.app>.top.stage-header .stage-center .value-row button:hover:not(:disabled),
  html:fullscreen body>.app>.top.stage-header .stage-center .ctl-group button:hover:not(:disabled){
    background:#315a70!important;
    border-color:#67a5bd!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center button:focus-visible,
  html:fullscreen body>.app>.top.stage-header .stage-center button:focus-visible {
    outline:2px solid #7ee1d5!important;
    outline-offset:2px!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center #headerTempoVal,
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center #originalKey,
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center #pitchVal,
  html:fullscreen body>.app>.top.stage-header .stage-center #headerTempoVal,
  html:fullscreen body>.app>.top.stage-header .stage-center #originalKey,
  html:fullscreen body>.app>.top.stage-header .stage-center #pitchVal {
    box-sizing:border-box!important;
    display:inline-block!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:29px!important;
    padding:0!important;
    margin:0!important;
    text-align:center!important;
    color:#f1f8fe!important;
    font-size:23px!important;
    line-height:30px!important;
    font-weight:760!important;
    letter-spacing:-.045em!important;
    font-variant-numeric:tabular-nums!important;
  }
  /* The original BPM reset remains available as a quiet text action. */
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .live-original-tempo,
  html:fullscreen body>.app>.top.stage-header .stage-center .live-original-tempo {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    flex:0 0 12px!important;
    width:auto!important;
    min-width:0!important;
    height:12px!important;
    min-height:12px!important;
    max-height:12px!important;
    margin:-1px 0 0!important;
    padding:0 4px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:9px!important;
    line-height:12px!important;
    font-weight:630!important;
    letter-spacing:0!important;
    color:#83adc2!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .live-original-tempo:hover{
    color:#80e6d8!important;
    text-decoration:underline!important;
  }
  /* Center the original key with the same vertical rhythm as the counters. */
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field--key,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field--key {
    gap:2px!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field--key #originalKey,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field--key #originalKey {
    height:30px!important;
    min-height:30px!important;
    line-height:30px!important;
  }
}
/* Narrow desktop screens retain all buttons with tighter group widths. */
@media (min-width:1000px) and (max-width:1260px) and (min-height:580px) and (pointer:fine) {
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center,
  html:fullscreen body>.app>.top.stage-header .stage-center {
    width:365px!important;
    max-width:365px!important;
    grid-template-columns:143px 64px minmax(0,1fr)!important;
    padding:4px!important;
  }
  html:not(.soulone-ipad-classic) body>.app>.top.stage-header .stage-center .stage-field,
  html:fullscreen body>.app>.top.stage-header .stage-center .stage-field {
    padding-inline:4px!important;
  }
}