.small-text {
  position: absolute;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 300;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  letter-spacing: 0;
  color: var(--cream);
  white-space: nowrap;
}

.type-text::after,
.type-text-scene2::after,
.type-text-scene3::after,
.type-text-scene4::after,
.type-text-scene5::after,
.type-text-scene5b::after,
.type-text-scene6::after,
.type-text-scene7-fixed::after,
.type-text-scene7-changing::after,
.type-text-scene8::after,
.type-text-scene9::after,
.type-text-scene10::after,
.type-text-scene11::after,
.type-text-scene12::after,
.type-text-scene13::after,
.type-text-scene14::after,
.type-text-scene15::after{
  content: "|";
  display: inline-block;
  margin-left: 0.08em;
  opacity: 0;
  transform: translateY(-0.03em);
}

.type-text.is-typing::after,
.type-text.cursor-end::after,
.type-text-scene2.is-typing::after,
.type-text-scene2.cursor-end::after,
.type-text-scene3.is-typing::after,
.type-text-scene3.cursor-end::after,
.type-text-scene4.is-typing::after,
.type-text-scene4.cursor-end::after,
.type-text-scene5.is-typing::after,
.type-text-scene5.cursor-end::after,
.type-text-scene5b.is-typing::after,
.type-text-scene5b.cursor-end::after,
.type-text-scene6.is-typing::after,
.type-text-scene6.cursor-end::after,
.type-text-scene7-fixed.is-typing::after,
.type-text-scene7-changing.is-typing::after,
.type-text-scene7-changing.cursor-end::after,
.type-text-scene8.is-typing::after,
.type-text-scene8.cursor-end::after,
.type-text-scene9.is-typing::after,
.type-text-scene9.cursor-end::after,
.type-text-scene10.is-typing::after,
.type-text-scene10.cursor-end::after,
.type-text-scene11.is-typing::after,
.type-text-scene11.cursor-end::after,
.type-text-scene12.is-typing::after,
.type-text-scene12.cursor-end::after,
.type-text-scene13.small-text::after,
.type-text-scene13.cursor-end::after,
.type-text-scene14.small-text::after,
.type-text-scene14.cursor-end::after,
.type-text-scene15.small-text::after,
.type-text-scene15.cursor-end::after   {
  opacity: 1;
  animation: blink 0.85s steps(1) infinite;
}

@media (max-width: 56.25rem) {
  .small-text {
    font-size: var(--text-body-size-small);
    line-height: var(--text-body-leading-small);
  }
}

/*
  Reserve the final text footprint, centre that footprint in its layout,
  and type from its fixed left edge. This prevents each new letter from
  re-centring the visible text; only the cursor moves forward.
*/
.typing-stable {
  box-sizing: border-box;
  display: inline-block;
  margin-inline: auto;
  text-align: left !important;
  transform-origin: center center;
}