.scaleKeyboard{
  --white-key:#fff;
  --white-key-bottom:#edf0f5;
  --black-key:#17191e;
  --black-key-bottom:#08090c;
  position:relative;
  width:100%;
  height:clamp(175px, 25vh, 235px);
  border-radius:13px;
  overflow:hidden;
  background:#10131c;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.scaleKeyboardWhiteRow{
  position:absolute;
  inset:0;
}

.scaleKeyboardWhiteRow{ display:flex; }

.scalePianoKey{
  appearance:none;
  min-width:0;
  padding:0;
  border:0;
  font:inherit;
  cursor:pointer;
  touch-action:none;
  transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}

.scalePianoKey.white{
  position:relative;
  flex:1 1 0;
  height:100%;
  border-right:1px solid rgba(0,0,0,.20);
  background:linear-gradient(180deg, var(--white-key), var(--white-key-bottom));
}

.scalePianoKey.white:last-child{ border-right:0; }

.scalePianoKey.black{
  position:absolute;
  top:0;
  width:var(--black-key-width, 7.75%);
  height:62%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:0 0 9px 9px;
  background:linear-gradient(180deg, var(--black-key), var(--black-key-bottom));
  box-shadow:0 9px 16px rgba(0,0,0,.46);
  pointer-events:auto;
  z-index:5;
}

.scalePianoKey.isRequested,
.scalePianoKey.isPlayback{
  background:var(--note-colour) !important;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.72);
  animation:requestedKeyPulse 1.05s ease-in-out infinite alternate;
}

.scalePianoKey.white.isRequested,
.scalePianoKey.white.isPlayback{ z-index:1; }

.scalePianoKey.black.isRequested,
.scalePianoKey.black.isPlayback{
  z-index:6;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.68), 0 0 18px var(--note-colour);
}

.scalePianoKey.isPressed{
  background:var(--note-colour) !important;
  transform:translateY(3px);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.78);
  animation:none;
}

.scalePianoKey.white.isPressed{ z-index:2; }
.scalePianoKey.black.isPressed{ z-index:7; }

.scalePianoKeyLabel{
  position:absolute;
  left:50%;
  bottom:13px;
  z-index:2;
  transform:translateX(-50%);
  color:#252733;
  font-size:clamp(15px, 2vw, 23px);
  line-height:1;
  font-weight:1000;
  pointer-events:none;
}

.scalePianoKey.black .scalePianoKeyLabel{
  bottom:10px;
  color:#fff;
  font-size:clamp(10px, 1.3vw, 15px);
  text-shadow:0 2px 5px rgba(0,0,0,.65);
}

.scalePianoKey.isRequested .scalePianoKeyLabel,
.scalePianoKey.isPlayback .scalePianoKeyLabel,
.scalePianoKey.isPressed .scalePianoKeyLabel{
  padding:4px 6px;
  border-radius:7px;
  background:rgba(0,0,0,.25);
  color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.45);
}

.scalePianoKey:focus-visible{
  outline:4px solid #ffa927;
  outline-offset:-4px;
}

.scalePianoKey.isUnavailable{
  cursor:default;
  filter:saturate(.12);
  opacity:.54;
}

.scalePianoKey.isUnavailable:disabled{
  pointer-events:auto !important;
}

.scaleKeyboard.isBusy .scalePianoKey:disabled:not(.isUnavailable){
  cursor:not-allowed;
  opacity:.68 !important;
  filter:saturate(.45) !important;
}

.scaleKeyboard.keyboardColoursHidden .scalePianoKey.isRequested,
.scaleKeyboard.keyboardColoursHidden .scalePianoKey.isPlayback,
.scaleKeyboard.keyboardColoursHidden .scalePianoKey.isPressed{
  background:#685d78 !important;
}

.scalePianoKey.resultGood{ box-shadow:inset 0 -9px 0 #3eb36f; }
.scalePianoKey.resultNear{ box-shadow:inset 0 -9px 0 #ed941f; }
.scalePianoKey.resultLow{ box-shadow:inset 0 -9px 0 #287fb6; }
.scalePianoKey.resultHigh{ box-shadow:inset 0 -9px 0 #ed941f; }
.scalePianoKey.resultMissed{ box-shadow:inset 0 -9px 0 #9b9b9b; }

@keyframes requestedKeyPulse{
  from{ filter:brightness(.94); }
  to{ filter:brightness(1.12); }
}