:root {
  --bg: #0a0a0f;
  --fg: #f2f0ea;
  --muted: #8d8a9b;
  --line: rgba(255, 255, 255, .08);
  --a: #7c6cff;
  --b: #19c3b0;
  --c: #ff7a59;
  --grain: .07;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f3ec;
    --fg: #16151b;
    --muted: #6f6b7a;
    --line: rgba(0, 0, 0, .08);
    --a: #8b7dff;
    --b: #3fd1bf;
    --c: #ff9a7a;
    --grain: .05;
  }
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* drifting colour blobs */
.sky { position: fixed; inset: -20vmax; z-index: 0; filter: blur(70px); opacity: .55; pointer-events: none; }
.blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; }
@media (prefers-color-scheme: light) { .blob { mix-blend-mode: multiply; } .sky { opacity: .35; } }
.blob.a { background: var(--a); top: 18%; left: 12%; animation: drift-a 26s ease-in-out infinite alternate; }
.blob.b { background: var(--b); top: 42%; left: 48%; animation: drift-b 32s ease-in-out infinite alternate; }
.blob.c { background: var(--c); top: 8%;  left: 58%; width: 30vmax; height: 30vmax; animation: drift-c 38s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-20vmax, -10vmax) scale(.9); } }
@keyframes drift-c { to { transform: translate(-12vmax, 22vmax) scale(1.2); } }

/* film grain */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain);
  background-image: url("grain.svg");
}

/* faint grid */
.grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

main {
  position: relative; z-index: 2;
  width: min(760px, 100%);
  animation: rise 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 0 var(--b); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

h1 {
  margin-top: 28px;
  font-weight: 700;
  font-size: clamp(30px, 11vw, 104px);
  line-height: .95;
  letter-spacing: -.045em;
}
h1 .soon {
  display: block;
  margin-top: .12em;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400;
  letter-spacing: -.03em;
  /* room for descenders and italic overhang: background-clip:text paints only inside the box */
  padding: 0 .12em .22em 0;
  margin-bottom: -.22em;
  background: linear-gradient(100deg, var(--a), var(--b) 45%, var(--c) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 100% 0; } }
.caret {
  display: inline-block; width: .06em; height: .8em; margin-left: .08em;
  vertical-align: -.04em; background: var(--fg); border-radius: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

p {
  margin-top: 28px; max-width: 34ch;
  font-size: clamp(15px, 1.9vw, 18px); line-height: 1.6; color: var(--muted);
}

.progress {
  margin-top: 44px; display: flex; align-items: center; gap: 14px;
  font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted);
}
.bar { flex: 0 1 220px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, transparent, var(--a), var(--b));
  animation: load 3.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(290%); } }

footer {
  position: fixed; z-index: 2; left: 0; right: 0; bottom: 22px;
  text-align: center; font: 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em; color: var(--muted); opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

.nw { white-space: nowrap; }