/* Insets complement existing responsive styles without disabling browser zoom. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  min-height: 100vh;
  min-height: 100dvh;
}
.dialog {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
button, select, .option { touch-action: manipulation; }
.sound-button, .step { min-height: 44px; }
@media (max-width: 400px) {
  header { flex-wrap: wrap; }
  .header-controls { margin-inline-start: auto; }
}