.ufo-tape-title-host {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ufo-tape-title-frame {
  position: absolute;
  top: 17.2%;
  right: 15%;
  left: 15%;
  height: 10.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: rgba(21, 18, 13, 0.88);
  mix-blend-mode: multiply;
  container-type: size;
}

.ufo-tape-title-ink {
  display: flex;
  width: 92%;
  height: 78%;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  transform: translateY(22%) rotate(-0.28deg);
  transform-origin: center;
}

.ufo-tape-typed-title {
  display: inline-flex;
  max-width: 100%;
  align-items: baseline;
  justify-content: center;
  overflow: visible;
  color: currentColor;
  font-family: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  font-size: clamp(0.72rem, 5vw, 2rem);
  font-variant-ligatures: none;
  font-weight: 550;
  letter-spacing: 0.015em;
  line-height: 0.88;
  text-rendering: geometricPrecision;
  text-shadow: 0.02em 0.025em 0 rgba(76, 57, 36, 0.16);
  white-space: nowrap;
}

@supports (font-size: 1cqw) {
  .ufo-tape-typed-title {
    font-size: min(var(--ufo-title-font-width, 10cqw), 68cqh);
  }
}

.ufo-tape-typed-title__character {
  display: inline-block;
  flex: 0 0 auto;
  font-weight: var(--ufo-char-weight, 550);
  opacity: var(--ufo-char-opacity, 0.9);
  transform: translateY(var(--ufo-char-y, 0)) rotate(var(--ufo-char-rotate, 0deg));
  transform-origin: 50% 70%;
}

.ufo-tape-typed-title__character--space {
  width: 0.58em;
}

@media (max-width: 640px) {
  .ufo-tape-title-frame {
    mix-blend-mode: normal;
  }

  .ufo-tape-title-ink {
    width: 90%;
    height: 76%;
  }
}