.typewriter {
  background-color: #241f43;
  max-height: 0;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;

  /* animation */
  animation: type-vert var(--duration, 2s) steps(var(--steps, 100), end)
    forwards;
}

.typewriter::after {
  /* the “cursor” itself */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* stick it to the bottom */
  height: 0.15em; /* thickness of the line */
  background: currentColor; /* same colour as the text */
}

/* ────────────────────────────────────────────────────── */
/* 3️⃣  The keyframes – grow the pseudo‑element  */
/* ────────────────────────────────────────────────────── */
@keyframes type-vert {
  to {
    max-height: 500px;
  }
}