:root {
  --paper: #fbfaf7;
  --ink: #1b1a17;
  --accent: #3a56d5;

  /* Width of the wordmark divided by its height. */
  --logo-aspect: 5.83;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b1a17;
    --ink: #fbfaf7;
    --accent: #8ea0ff;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

main {
  /* dvh keeps the logo centred while mobile browser chrome shows and hides. */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.logo {
  margin: 0;
  line-height: 0;
}

.logo__mark {
  display: block;
  width: min(74vw, 40rem, calc(38vh * var(--logo-aspect)));
  height: auto;

  /* The caret's cell, counted in characters from the start of the line. Eight
     is its resting place, just past the final y. logo.js drives it while
     typing; the stylesheet owns it the rest of the time. */
  --caret: 8;
}

.logo__glyph {
  fill: var(--ink);
}

html.js .logo__mark {
  --caret: 0;
}

html.js .logo__glyph {
  display: none;
}

.logo__caret {
  fill: var(--accent);
  transform: translateX(calc(var(--caret) * 600px));
}

@media (prefers-reduced-motion: no-preference) {
  .logo__caret {
    transition: transform 55ms ease-out;
  }

  /* A real caret holds steady while keys are being struck; it only blinks once
     the typing stops. */
  .logo__mark:not(.is-typing) .logo__caret {
    animation: cursor-blink 1.8s ease-in-out infinite;
  }
}

/* Dims rather than vanishing, so the lockup stays whole in any paused frame,
   and holds at each end so it reads as a resting cursor rather than a flicker. */
@keyframes cursor-blink {
  0%,
  40% {
    opacity: 1;
  }
  50%,
  90% {
    opacity: 0.34;
  }
  100% {
    opacity: 1;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}