/* "Beauty and the Nerd": one side glam, one side terminal.
   The row is a gradient from rose (beauty) to phosphor green (nerd) -- serif
   digits for the glamour, monospace labels and a blinking caret for the nerd. */
:root {
  --bg: #0a0b10;
  --rose: #ff9ec7;
  --blush: #ffc6a8;
  --sage: #a9ecc2;
  --phosphor: #4ef08f;
  --muted: #7c8598;
  --line: rgba(255, 255, 255, 0.10);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    /* beauty: a soft bloom in one corner */
    radial-gradient(70% 60% at 12% 8%, rgba(255, 130, 190, 0.16), transparent 70%),
    /* nerd: phosphor haze in the other */
    radial-gradient(60% 55% at 92% 96%, rgba(60, 240, 140, 0.10), transparent 70%),
    /* nerd: graph paper */
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 44px),
    var(--bg);
  color: #f2f4f7;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 52rem; text-align: center; }
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  padding: 2rem 0;
  /* the seam between the two worlds */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--rose), var(--blush), var(--sage), var(--phosphor)) 1;
}
.num {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(2.4rem, 9vw, 5rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
/* rose -> phosphor across the row: she starts it, he finishes it */
.beauty { color: var(--rose);     text-shadow: 0 0 28px rgba(255, 158, 199, 0.35); }
.glam   { color: var(--blush);    text-shadow: 0 0 24px rgba(255, 198, 168, 0.25); }
.geek   { color: var(--sage);     text-shadow: 0 0 24px rgba(169, 236, 194, 0.22); }
.nerd   { color: var(--phosphor); text-shadow: 0 0 28px rgba(78, 240, 143, 0.35); }
.name {
  margin-top: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.caret { color: var(--phosphor); animation: blink 1.06s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
#over {
  display: none;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--rose);
  text-shadow: 0 0 32px rgba(255, 158, 199, 0.4);
}
.done .grid { display: none; }
.done #over { display: block; }