.typewriter {
  --speed: 1.8s;
  --delay: 0s;
  white-space: nowrap;
  overflow: hidden;
  border-right: .1em solid currentColor;
  display: inline-block;
  width: 0;
  animation: none;
}

.typewriter[data-auto="true"] {
  animation:
    typing var(--speed) steps(var(--n)) forwards var(--delay),
    caret .7s step-end infinite var(--delay);
}

.play-on-hover:hover .typewriter:not(.played) {
  animation:
    typing var(--speed) steps(var(--n)) forwards,
    caret .7s step-end infinite;
}

.typewriter.played {
  border-right: none;
}

@keyframes typing { from { width: 0; } to { width: calc(var(--n) * 1ch); } }
@keyframes caret  { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .typewriter { animation: none; width: auto; border-right: none; }
}