#rise-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.rise-midi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
}

.rise-midi .field select {
  min-width: 8.5rem;
  max-width: 12rem;
}

.rise-piano .white-key,
.rise-piano .black-key {
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

@media (max-width: 48rem) {
  .rise-midi,
  .rise-midi .field,
  .rise-midi .field select,
  .rise-midi .btn {
    width: 100%;
    max-width: none;
  }
}