/* The real text supplies both colours: no duplicate label or layout boxes. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  a.fk-karaoke-link .fk-karaoke-ink {
    /* Existing button/icon span rules must not change the new text wrapper. */
    all: unset !important;
    display: inline !important;
    background-image: linear-gradient(90deg, var(--fk-karaoke-blue, #59c6ff) 0%, var(--fk-karaoke-blue, #59c6ff) 50%, var(--fk-karaoke-rest) 50%, var(--fk-karaoke-rest) 100%) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    transition: background-position 160ms linear !important;
  }

  a.fk-karaoke-link:focus-visible .fk-karaoke-ink {
    background-position: 0 0 !important;
    transition-duration: var(--fk-karaoke-duration, 650ms) !important;
    transition-delay: var(--fk-karaoke-delay, 0ms) !important;
  }

  @media (hover: hover) {
    a.fk-karaoke-link:hover .fk-karaoke-ink {
      background-position: 0 0 !important;
      transition-duration: var(--fk-karaoke-duration, 650ms) !important;
      transition-delay: var(--fk-karaoke-delay, 0ms) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    a.fk-karaoke-link .fk-karaoke-ink,
    a.fk-karaoke-link:hover .fk-karaoke-ink,
    a.fk-karaoke-link:focus-visible .fk-karaoke-ink {
      transition: none !important;
    }
  }

  @media (forced-colors: active) {
    a.fk-karaoke-link .fk-karaoke-ink {
      background: none !important;
      color: LinkText !important;
      -webkit-text-fill-color: currentColor !important;
      transition: none !important;
    }
  }
}