:root {
  --brand: #57ADB8;
  --font-display: 'Creato Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--font-display);
}

/* Each line reserves its own fixed pixel width (set by script.js, based on
   the final rendered text) so the layout never shifts while typing — the
   logo and divider stay put from the first frame to the last. */
.type-line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  line-height: 1.15;
  min-height: 1.15em;
}

/* Thin blinking caret. Fixed pixel width regardless of font size, so it
   always reads as a slim text cursor rather than a thick bar. */
.caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  vertical-align: -0.05em;
  background-color: var(--brand);
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caret {
    animation-duration: 1.4s;
  }
}