/* first paint: the gate, before the module css arrives */
@font-face { font-family: "Titan One"; src: url(/fonts/TitanOne-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(/fonts/PixelifySans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url(/fonts/Anton-400.woff2) format("woff2"); font-display: swap; }
:root { --void: #1c0646; --ink: #1a0b33; --pink: #ff2e93; --cyan: #19e3ff; --lemon: #ffe23a; --violet: #7b3cff; --paper: #fff8ec; }
html, body { margin: 0; background: var(--void); color: #fff; }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--void) url(/v/hero.jpg) center / cover no-repeat; text-align: center; padding: 24px; }
.gate::before { content: ""; position: absolute; inset: 0; background: rgba(28, 6, 70, .55); backdrop-filter: blur(10px); }
.gate > * { position: relative; }
.gate { transition: opacity .3s; } .gate.out { opacity: 0; pointer-events: none; }
.gate[hidden], .film[hidden] { display: none; }
.gate-mark { width: min(720px, 86vw); height: auto; }
.gate-line { font: 22px/1.2 "Pixelify Sans", monospace; margin: 0; color: #fff; text-shadow: 0 2px 0 #000; }