* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #fff; }
body { display: grid; place-items: center; font: 16px/1.4 Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
form { display: grid; gap: 12px; width: min(300px, calc(100vw - 48px)); }
input {
  font: inherit; color: #141754; background: #fff;
  border: 1px solid #c4c7c5; border-radius: 10px; padding: 13px 14px; outline: none;
}
input:focus { border-color: #00a0c6; box-shadow: 0 0 0 3px #e1f6fb; }
input::placeholder { color: #8a8d8b; }
form.bad input { border-color: #b3261e; }
form.bad { animation: shake .3s; }
/* Enter submits; the button exists only so every browser allows that. */
button { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { form.bad { animation: none; } }