:root {
  --bg: #06080b;
  --ink: #d9e2ec;
  --muted: #6b7889;
  --line: rgb(255 255 255 / .06);
  /* --accent and --accent-glow are set per site in index.html */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg);
  color: var(--ink);
  font: 16px/1.5 "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  display: grid; place-items: center;
  overflow-x: hidden;
}
/* Faint scanlines, a nod to the CRT on the main site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
}

main { width: 100%; max-width: 860px; padding: 48px 20px; }

.mark {
  margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(56px, 14vw, 132px);
}
.mark span { color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }

.out {
  margin: 28px 0 0;
  font-size: clamp(18px, 3.4vw, 28px); line-height: 1.35;
  text-shadow: 0 0 12px var(--accent-glow);
}
.cursor { color: var(--accent); animation: blink 1s steps(1) infinite; }

.sub { margin: 26px 0 0; max-width: 46ch; color: var(--muted); }

footer { margin-top: 56px; color: var(--muted); font-size: 14px; }
footer a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
footer a:hover { color: var(--accent); }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }