:root {
  --flute-w: 250px;
  --flute-h: 18px;
}

.addFlute {
      position: absolute;
      width: var(--flute-w);
      height: var(--flute-h);
      transition: opacity 0.5s ease-in-out;
    }



#flute {
  position: fixed; 
  top: 695px;
  left: 890px;
  margin: 0;
  padding: 0;
  width: var(--flute-w);
  height: 15px;
  z-index: 4;
}
.flute-body {
  position: absolute;
  width: var(--flute-w);
  height: var(--flute-h);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flute-score {
  position: absolute;
  width: var(--flute-w);
  height: var(--flute-h);
  top: calc(50% - var(--flute-h));
  left: 50%;
  transform: translate(-50%, -50%);
}
.flute-keyboard > .score {
  margin: 0;
  padding: 0;
  width: 13px;
  text-align: center;
  z-index: 3;
}


.flute-keyboard {
  display: flex;
  flex-wrap: nowrap;
  gap: 0px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: 1px;
  transform: translate(0, -50%);
  z-index: 2;
}
.flute-keyboard > .key {
  margin: 0;
  padding: 0;
  width: 13px;
  text-align: center;
  z-index: 3;
}
.flute-keyboard > .gap {
  margin: 0;
  padding: 0;
  width: 10px;
  text-align: center;
  z-index: 3;
}
.flute-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding:0;
  resize: none;
  overflow:hidden;
  pointer-events: none;
  z-index: 1;
}