@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* Same tokens as the full site (site/assets/css/site.css): dark data console, cyan as the only signal colour. */
:root {
  color-scheme: dark;
  --bg: #04070c;
  --text-2: #8ea3b6;
  --text-3: #55697d;
  --ink: #dbe7f0;
  --line-2: #1c3245;
  --cyan: #27e1f0;
  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(39,225,240,.06), transparent 70%),
    linear-gradient(rgba(39,225,240,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,225,240,.035) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px; background-position: center;
  color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--cyan); color: #021015; }

/* Corner brackets around the viewport. */
body::before { content: ""; position: fixed; inset: clamp(16px, 4vw, 32px); pointer-events: none;
  --b: linear-gradient(var(--line-2), var(--line-2));
  background: var(--b) top left / 28px 1px, var(--b) top left / 1px 28px,
              var(--b) top right / 28px 1px, var(--b) top right / 1px 28px,
              var(--b) bottom left / 28px 1px, var(--b) bottom left / 1px 28px,
              var(--b) bottom right / 28px 1px, var(--b) bottom right / 1px 28px;
  background-repeat: no-repeat; }

#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

main { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 16px; text-align: center; }

.mark { width: clamp(88px, 18vw, 132px); height: auto; display: block; filter: drop-shadow(0 0 22px rgba(39,225,240,.35)); }

h1 { margin: 0; display: flex; align-items: center; gap: 16px; font-weight: 400; }
h1 b { font-weight: 600; font-size: clamp(22px, 5vw, 32px); letter-spacing: .24em; margin-right: -.24em; text-transform: uppercase; }
h1 span { font-family: var(--mono); font-size: clamp(12px, 2.6vw, 15px); color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; padding-left: 16px; border-left: 1px solid var(--line-2); }

.soon { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.soon::before { content: "//"; color: var(--text-3); }
.soon i { width: .6em; height: 1.1em; background: var(--cyan); box-shadow: 0 0 10px rgba(39,225,240,.6); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .soon i { animation: none; } }
@media (max-width: 420px) { h1 { flex-direction: column; gap: 8px; } h1 span { border-left: 0; padding-left: 0; } }