body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background: transparent;
}

.controls {
  margin-bottom: 20px;
}



/* Title styling */
.keyboard-title {
  position: absolute;  
  top: 2%;  
  left: 50%;  
  transform: translateX(-50%);
  font-size: 16px;  
  font-weight: bold;
  text-align: center;
  margin: 0; /* no margin to avoid affecting layout */
}

.keyboard-container {
  display: inline-block;
  position: relative;
  overflow: visible;
  background: none;
}

.white-keys-layer {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  height: 100%;
}

.white-key {
  display: inline-block;
  width: 40px;
  height: 200px;
  background: #fff;
  border: 1px solid #000;
  vertical-align: bottom;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.black-keys-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  pointer-events: none; 
}

.black-key {
  position: absolute;
  width: 25px;
  height: 120px;
  background: #000;
  border: 1px solid #000;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
}

/* Allow line breaks to be preserved for key text */
.key-text-on, .key-text-above, .key-text-below {
  white-space: pre;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  background: transparent;
}

/* On-key text:
   Anchored from bottom:10%; additional lines appear above,
   keeping the last (bottom) line at bottom:10%. */
.key-text-on {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

/* Above-key text:
   Anchored from bottom:100% (just above the key), with a small margin.
   Additional lines appear above this bottom line, keeping the last line stable. */
.key-text-above {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
}

/* Below-key text:
   Anchored from the bottom so the last line remains stable at this position.
   Adjust the -5px if needed to match your exact desired offset below the key.
   Additional lines appear above, keeping the final (bottom) line in place. */
.key-text-below {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}
.keyboard-outer-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically if needed */
  margin: 20px auto;       /* Center the container with automatic margins */
  position: relative;
  border: 1px solid #000;
  overflow: visible;
  min-width: fit-content;  /* Ensure the container width fits the content */
  max-width: fit-content;
}