html, body { margin:0; padding:0; height:100%; background:#000; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#eee; }
.gate { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.gate__form { width: min(360px, 80vw); }
.gate__input {
  width:100%; padding:.8rem 1rem; font-size:1rem;
  background:#111; color:#eee; border:1px solid #333; border-radius:8px;
  outline:none; text-align:center; letter-spacing:.04em;
}
.gate__input:focus { border-color:#666; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.gate__form--shake { animation: shake .4s ease; }
.gate--admin .gate__input { border-color:#664; }