:root {
  --color-bg:         oklch(15% 0.01 260);
  --color-text:       oklch(96% 0.01 260);
  --color-text-dim:   oklch(85% 0.02 260);
  --color-accent:     #5ff0c0;
  --color-accent-b:   #ff5f9e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
}

body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* oklch() requires Chrome 111+ / Safari 16.4+ / Firefox 113+ */
.page {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.number-wrap {
  position: relative;
  line-height: 1;
  animation: bounce-in 1.5s 1s both;
}

.number,
.number-ghost {
  display: flex;
}

.number span,
.number-ghost span {
  font-size: clamp(6rem, 20vw, 18.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.number {
  position: relative;
  z-index: 2;
  color: var(--color-text);
}

.number-ghost {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  opacity: 0.75;
}

.number-ghost--a {
  color: var(--color-accent);
  transform: translate(-4px, 2px);
}

.number-ghost--b {
  color: var(--color-accent-b);
  transform: translate(4px, -2px);
}

.prompt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 90vw;
  font-size: 1.1rem;
  color: var(--color-text-dim);
  animation: fade-in 0.4s 2.4s both;
  z-index: 2;
}

.prompt-symbol {
  color: var(--color-accent);
}

.cursor {
  display: inline-block;
  width: 9px;
  height: 18px;
  background: var(--color-accent);
  animation: blink 1s step-end infinite;
}

@keyframes bounce-in {
  0%   { transform: translateY(-100vh); }
  60%  { transform: translateY(0); }
  75%  { transform: translateY(-18px); }
  85%  { transform: translateY(0); }
  92%  { transform: translateY(-7px); }
  97%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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