@layer a11y {
:is(:focus-visible) {
    outline-offset: var(--sem-focus-outline-offset);
    outline-width: var(--sem-focus-outline-width);
  }

  :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    summary,
    [role="button"]
  ) {
    min-height: var(--sem-ui-target);
    min-width: var(--sem-ui-target);
  }

  /*
   * Icon-only-Knöpfe der Klaviatur-Chrome (mobil) brauchen 44px
   * Touch-Breite. Absolut statt rem: Touch-Ziele dürfen mit der
   * skalierenden Root-Größe nicht schrumpfen. Diese Schicht gewinnt
   * gegen min-width oben; Flex kann die Knöpfe so nicht drücken.
   */
  @media (max-width: 40rem) {
    .chord-keyboard-midi [data-role="play"],
    .chord-keyboard-midi [data-role="reset"] {
      min-width: 44px;
      flex-shrink: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
  }

}