@font-face {
  font-family: "JetBrains Mono Subset";
  src: url("/fonts/jetbrains-mono-300-subset.woff2") format("woff2");
  font-weight: 300;
  font-display: block;
}

:root {
  --bg: #f7f8f9;
  --ink: #15181c;
  --focus: #3b5b8c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1114;
    --ink: #eef0f2;
    --focus: #8fb0e0;
  }
}

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

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-inline: 16px;
  background: var(--bg);
  color: var(--ink);
}

h1 {
  margin: 0;
  font: inherit;
}

.word {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: default;
  font-family: "JetBrains Mono Subset", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 300;
  /* The second bound keeps the word inside the 16px gutters when the visitor enlarges their default font size. */
  font-size: min(clamp(2.75rem, 10vw, 6.5rem), calc((100vw - 32px) / 5.4));
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.word:focus {
  outline: none;
}

.word:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0.15em;
}

/* Each bit draws its digit over the letter in the same cell; monospace keeps the widths equal. */
.bit {
  position: relative;
}

.bit::after {
  content: attr(data-digit);
  position: absolute;
  inset: 0;
  color: transparent;
}

.bit,
.bit::after {
  transition: color 0s linear 0s;
}

/* The i → 1 snaps just after the o → 0, like two bits switching in sequence. */
.bit:last-of-type,
.bit:last-of-type::after {
  transition-delay: 60ms;
}

.word.is-flipped .bit,
.word:focus-visible .bit {
  color: transparent;
}

.word.is-flipped .bit::after,
.word:focus-visible .bit::after {
  color: var(--ink);
}

@media (hover: hover) {
  .word:hover .bit {
    color: transparent;
  }

  .word:hover .bit::after {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bit:last-of-type,
  .bit:last-of-type::after {
    transition-delay: 0s;
  }
}