html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #030202;
  color: #fff1d6;
}

/* One typeface for the sign-up: VT323, a PS1-console bitmap face, drawn sharp at normal size. */
:root {
  --type: 400 20px/1.25 VT323, ui-monospace, Menlo, monospace; /* 16 px or more stops iOS zooming in on focus */
  --cream: #fff1d6;
  --ink: #0e0808;
}

#room {
  position: fixed;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The video is only a frame source for the canvas. */
#loop {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The logo is drawn on the canvas; the heading stays for screen readers and search. */
header > h1, .hidden-label { position: fixed; left: -9999px; }

/* The call to action under the logo. main.js sets the top to the logo's bottom edge. Nothing else is written on
   the page: the room does the talking. */
.lockup {
  position: fixed;
  left: 50%;
  top: 40vh;
  transform: translateX(-50%);
  padding-top: 18px;
  text-align: center;
  font: var(--type);
  letter-spacing: 0.01em;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--ink), 0 0 8px rgba(14, 8, 8, 0.9);
}
.lockup p { margin: 0; }

/* One small button, the size of the App Store badge (40 px tall) that replaces it at launch. Tapping it swaps in a
   compact field with a submit arrow in the same spot. */
.cta { min-height: 40px; }
#open, #email, #submit {
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  border: 2px solid var(--cream);
  border-radius: 0;
  font: var(--type);
  letter-spacing: 0.01em;
}
#open, #submit {
  padding: 0 14px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  text-shadow: none;
  white-space: nowrap;
}
#open:hover, #open:focus-visible, #submit:hover, #submit:focus-visible { background: var(--ink); color: var(--cream); }
#waitlist { display: flex; gap: 6px; }
#waitlist[hidden] { display: none; }
#email {
  width: min(64vw, 13em);
  padding: 0 10px;
  background: rgba(14, 8, 8, 0.78);
  color: var(--cream);
  caret-color: var(--cream);
}
#email::placeholder { color: rgba(255, 241, 214, 0.45); }
#submit { padding: 0 12px; }
#open:focus-visible, #email:focus-visible, #submit:focus-visible { outline: 2px solid #ffb35a; outline-offset: 2px; }
#submit:disabled { opacity: 0.6; cursor: default; }
#status { min-height: 1.3em; margin-top: 8px; }