body {
  --bg: #0c0b0d;
  --ink: #d8d1cc;
  --dim: #7d8581;
  --dir: #6c70e0;
  --sign: #ff2fb3;
  --cell-w: 7.2px;
  --cell-h: 13px;
  --margin: 64px;
}

.column {
  position: relative;
  width: min(calc(100% - 2 * var(--margin)), 806px);
  height: 100%;
  margin: 0 auto;
}

.brand {
  position: absolute;
  left: calc(5 * var(--cell-w));
  top: calc(3 * var(--cell-h));
  gap: var(--cell-w);
  min-height: 0;
  color: var(--ink);
  font: 400 12px/13px "Plex Mono", ui-monospace, monospace;
  letter-spacing: 0;
}

.brand svg {
  width: calc(2 * var(--cell-w));
  height: 12px;
}

.switch {
  position: absolute;
  top: calc(3 * var(--cell-h));
  right: calc(5 * var(--cell-w));
}

.switch a {
  position: relative;
  min-width: 0;
  min-height: 0;
  font: 400 12px/13px "Plex Mono", ui-monospace, monospace;
  letter-spacing: 0;
}

.switch a::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
}

.brand::after,
.back::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
}

.term {
  position: absolute;
  top: 12%;
  left: var(--cell-w);
  right: var(--cell-w);
  color: color-mix(in srgb, var(--ink) 92%, var(--bg));
  font: 400 12px/13px "Plex Mono", ui-monospace, monospace;
}

.line {
  min-height: var(--cell-h);
  margin: 0;
  white-space: pre-wrap;
}

.dir {
  color: color-mix(in srgb, var(--dir) 70%, var(--bg));
}

.sign {
  color: var(--sign);
}

.caret {
  display: inline-block;
  width: var(--cell-w);
  height: var(--cell-h);
  vertical-align: top;
  background: var(--ink);
  animation: blink 760ms steps(1) infinite;
}

.back {
  position: absolute;
  right: calc(5 * var(--cell-w));
  bottom: calc(2 * var(--cell-h));
  padding: 0 var(--cell-w);
  background: var(--ink);
  color: var(--bg);
  font: 400 12px/13px "Plex Mono", ui-monospace, monospace;
  text-decoration: none;
  white-space: nowrap;
}

.back:hover {
  filter: brightness(1.18);
}

.back:focus-visible {
  outline-offset: 4px;
}

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

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

@media (max-width: 1100px) {
  body {
    --margin: 36px;
  }
}

@media (max-width: 800px) {
  body {
    --margin: 20px;
  }
}

@media (max-width: 640px) {
  .brand span {
    display: inline;
  }
}

@media (max-width: 380px) {
  body {
    --margin: 16px;
  }
}