.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); }
.gate-card { width: 380px; max-width: calc(100vw - 32px); background: var(--panel); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 0 0 1px #0000000A, 0 1px 2px #0000000A, 0 24px 48px -32px #1D1D4A40; }
.gate-card h1 { margin: 6px 0 0; font-size: 28px; letter-spacing: -0.035em; font-weight: 800; background: var(--spec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-card p { margin: 0 0 6px; color: var(--dim); }
.credits { font-family: 'GeistMono', monospace; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--raise); color: var(--dim); }
/* login: the button shows that it is working, and every answer gets a line under it */
.gate-card input[readonly] { opacity: .7; }
.gate-card .btn:disabled { opacity: .9; cursor: default; }
.gate-card .btn.busy::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gspin .7s linear infinite; }
@keyframes gspin { to { transform: rotate(360deg); } }
.gate .hint { min-height: 1.45em; line-height: 1.45; font-size: 13px; }
.gate .hint.err { color: var(--red); }
.gate-more { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gate-more[hidden] { display: none; }
.gate .lnk { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.gate .lnk:disabled { color: var(--faint); cursor: default; }
.gate .lnk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.gate-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 4px 0 -2px; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.gate-skip { width: 100%; }
.gate-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.blk[hidden] { display: none; }