.word-roller-unit {
  --word-roller-duration: 500ms;
  display: inline-flex;
  max-width: 100%;
  vertical-align: baseline;
  white-space: nowrap;
}

.word-roller-unit--line {
  display: flex;
  width: fit-content;
  margin-block: 0.08em;
}

.word-roller {
  display: inline-grid;
  min-width: 0;
  overflow: hidden;
  perspective: 28em;
  vertical-align: baseline;
}

.word-roller[data-display="line"] {
  display: grid;
  width: fit-content;
  margin-block: 0.08em;
}

.word-roller__sizer,
.word-roller__word {
  grid-area: 1 / 1;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

.word-roller__sizer { visibility: hidden; pointer-events: none; user-select: none; }
.word-roller__word { opacity: 1; transform: translateY(0) rotateX(0deg); transform-origin: 50% 50%; backface-visibility: hidden; }
.word-roller__word--incoming { opacity: 0; transform: translateY(-55%) rotateX(68deg); transform-origin: 50% 0%; }
.word-roller__word--outgoing { opacity: 0; transform: translateY(55%) rotateX(-68deg); transform-origin: 50% 100%; }
.word-roller__word--animate {
  transition: transform var(--word-roller-duration) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--word-roller-duration) ease-out;
}

.word-roller-controls { display: flex; align-items: center; min-height: 44px; margin-top: 0.55rem; }
.word-roller__control {
  display: inline-flex; min-width: 7.5rem; min-height: 44px; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.5rem 0.75rem; border: 0;
  border-radius: 999px; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; opacity: 0.72;
}
.word-roller__control:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; }
.word-roller__control:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.word-roller__control:disabled { cursor: default; opacity: 0.5; }
.word-roller__icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.word-roller-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .word-roller__word--incoming, .word-roller__word--outgoing, .word-roller__word--animate { transition: none !important; transform: none !important; }
}