/* Letter-by-letter rollover, scoped to the two requested headlines. */
.letter-rollover > button {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  -webkit-text-stroke: inherit;
  paint-order: inherit;
  cursor: pointer;
}

.letter-rollover > button:focus-visible {
  outline: 2px solid #c4f45a;
  outline-offset: 7px;
  border-radius: 2px;
}

.letter-roll-cell {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: -.1em;
  margin-bottom: -.1em;
  line-height: 1;
}

.letter-roll-word {
  display: inline-block;
  white-space: nowrap;
}

.letter-roll-stack {
  display: flex;
  flex-direction: column;
  height: 2em;
  line-height: 1;
  will-change: transform;
}

.letter-roll-glyph {
  display: block;
  flex: 0 0 1em;
  height: 1em;
  line-height: 1;
  white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
  .letter-roll-stack { will-change: auto; }
}