/* Passcode page only — intentionally unlike the rest of the site. System fonts, no imagery. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #202525; color: #F5F1E8; font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.gate { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.gate__form { width: 100%; max-width: 380px; }
.gate__label { display: block; margin-bottom: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(245, 241, 232, .72); }
.gate__row { display: flex; border-bottom: 1px solid rgba(245, 241, 232, .35); transition: border-color .2s; }
.gate__row:focus-within { border-color: #E3A988; }
.gate__input { flex: 1; min-width: 0; height: 52px; padding: 0 2px; border: 0; background: transparent; color: #F5F1E8; font: inherit; font-size: 1.1rem; letter-spacing: .12em; }
.gate__input:focus { outline: none; }
.gate__btn { flex: none; height: 52px; padding: 0 4px 0 18px; border: 0; background: transparent; color: #E3A988; font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.gate__btn:hover { color: #F5F1E8; }
.gate__btn:focus-visible, .gate__input:focus-visible { outline: 2px solid #E3A988; outline-offset: 4px; }
.gate__btn[disabled] { opacity: .55; cursor: progress; }
.gate__msg { min-height: 1.5em; margin: 14px 0 0; font-size: .875rem; color: #F2B8A0; }
.gate__row.is-wrong { border-color: #F2B8A0; }
@media (prefers-reduced-motion: no-preference) {
  .gate__row.is-wrong { animation: nudge .32s ease; }
  @keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
}