:root {
  --bg: #f3efe6;
  --ink: #1f1d19;
  --dot: rgba(31, 29, 25, 0.09);
  --cursor: #d4542b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1011;
    --ink: #d9e1d4;
    --dot: rgba(217, 225, 212, 0.06);
    --cursor: #7ee08a;
  }
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.line {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.6rem, 7.5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  display: grid;
}

/* Ghost reserves the final layout so typing never reflows the page. */
.ghost,
.live {
  grid-area: 1 / 1;
}

.ghost {
  visibility: hidden;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.06em;
  vertical-align: -0.17em;
  background: var(--cursor);
  animation: blink 1.06s steps(1, end) infinite;
}

.is-typing .cursor {
  animation: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

::selection {
  background: var(--cursor);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}