:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f6f7f9; }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
form { width: min(100%, 420px); }
input {
  width: 100%; height: 58px; padding: 0 20px; border: 1px solid #d8dce3; border-radius: 14px;
  outline: none; color: #20242c; background: #fff; box-shadow: 0 12px 40px rgba(34,43,60,.08);
  font: 15px ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
input::placeholder { color: #a3a9b3; }
input:focus { border-color: #7186e8; box-shadow: 0 0 0 4px rgba(113,134,232,.12), 0 12px 40px rgba(34,43,60,.08); }
input:disabled { opacity: .65; }
input.error { border-color: #df6673; box-shadow: 0 0 0 4px rgba(223,102,115,.12); animation: shake .28s ease; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }