._key_1aqm4_1 {
  --key-width: var(--mod-key-width, 30px);
  flex-shrink: 0;
  width: var(--key-width);
  min-width: min-content;
  border-bottom-left-radius: calc(var(--key-width) / 8);
  border-bottom-right-radius: calc(var(--key-width) / 8);
  -webkit-user-drag: none;
  user-select: none;
  transition: box-shadow 80ms, background-color 80ms;
  display: flex;
  justify-content: center;
}
._key_1aqm4_1 > ._keyLabel_1aqm4_14 {
  align-self: flex-end;
  font-size: 0.9em;
}
._key_1aqm4_1._black_1aqm4_18 {
  height: 60%;
  --adjusted-width: calc(var(--key-width) * 0.6);
  width: var(--adjusted-width);
  margin: 0px calc(var(--adjusted-width) / -2) 0px calc(var(--adjusted-width) / -2);
  z-index: 2;
  background: black;
  box-shadow: hsl(0, 0%, 35%) 0px 2px 2px;
}
._key_1aqm4_1._black_1aqm4_18 > ._keyLabel_1aqm4_14 {
  color: white;
}
._key_1aqm4_1._black_1aqm4_18._left_1aqm4_30 {
  transform: translate(calc(var(--key-width) / -12));
}
._key_1aqm4_1._black_1aqm4_18._right_1aqm4_33 {
  transform: translate(calc(var(--key-width) / 12));
}
._key_1aqm4_1._black_1aqm4_18._played_1aqm4_36 {
  background: hsl(189, 56%, 54%);
  box-shadow: none;
}
._key_1aqm4_1._white_1aqm4_40 {
  height: 100%;
  width: var(--key-width);
  box-shadow: inset black 0px 0px 1px 0px, black 0px 3px 2px 0px;
}
._key_1aqm4_1._white_1aqm4_40._played_1aqm4_36 {
  background: hsl(189, 56%, 54%);
  box-shadow: inset black 0px 0px 1px 0px;
}._keyboard_ihmqj_1 {
  display: flex;
  justify-content: center;
}
._keyboard_ihmqj_1 > div {
  display: flex;
  overflow: auto;
  padding: 8px;
  height: 7.5rem;
}._controls_cmfdp_1 {
  display: flex;
  gap: 1rem;

  font-size: 0.8em;
}

._controls_cmfdp_1 > ._controlGroup_cmfdp_8 {
  display: flex;
  gap: 4px;
  border: solid 1px;
  border-radius: 4px;
  padding: 2px 5px 4px;
}

._controls_cmfdp_1 ._iconButton_cmfdp_16 {
  background: none;
  border: solid 1px;
  border-radius: 50%;
  font-size: 0.8em;
  color: currentColor;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  height: 3em;
  aspect-ratio: 1;
}

._controls_cmfdp_1 button {
  cursor: pointer;
}

._controls_cmfdp_1 button:disabled {
  background-color: rgb(237 237 237);
  color: rgb(140 140 140);
}

._controls_cmfdp_1 button._selected_cmfdp_40 {
  background-color: rgb(115, 183, 206);
}

._controls_cmfdp_1 ._spacer_cmfdp_44 {
  width: 8px;
}
._editor_uytz2_1 {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 0.9em;

  background-color: white;
  color: black;
}

/* Try to reset any global styles as much as possible */
._editor_uytz2_1,
._editor_uytz2_1 * {
  margin: 0;
  padding: 0;
  line-height: normal;
  box-sizing: border-box;
}