:root {
  --bg: #111214;
  --panel: #1e1f22;
  --line: #2b2d31;
  --text: #f2f3f5;
  --muted: #949ba4;
  --accent: #5865f2;
  --accent-hi: #4752c4;
  --bad: #f23f43;
  --good: #23a55a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.wrap { width: 100%; max-width: 440px; text-align: center; }
.mark { height: 192px; margin-bottom: 8px; }
.mark img { image-rendering: pixelated; }
.mark .still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mark .spin { display: none; }
  .mark .still { display: inline; }
}
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 28px; }
form { display: flex; gap: 8px; }
input[type=email] {
  flex: 1; min-width: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font: inherit;
}
input[type=email]:focus { outline: none; border-color: var(--accent); }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
button:hover { background: var(--accent-hi); }
button:disabled { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#ts { margin-top: 12px; }
#ts:empty { display: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.discord {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.discord:hover { border-color: var(--accent); }
.dlogo { width: 22px; height: 22px; color: var(--accent); }
.back { color: var(--muted); font-size: 14px; }
.back:hover { color: var(--text); }
.msg.big { font-size: 17px; color: var(--text); }
.msg { min-height: 24px; margin: 14px 0 0; font-size: 15px; }
.msg.ok { color: var(--good); }
.msg.err { color: var(--bad); }
.fine { color: var(--muted); font-size: 13px; margin-top: 36px; }
@media (max-width: 420px) {
  form { flex-direction: column; }
  h1 { font-size: 34px; }
  .mark { height: 144px; }
  .mark img { width: 108px; height: 144px; }
}