*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #fbfaf5; color: #12251f; font: 16px/1.5 system-ui, sans-serif; }
.gate { width: min(380px, calc(100vw - 32px)); }
h1 { margin: 0 0 8px; font-size: 28px; }
p { margin: 0 0 20px; color: #62716b; }
label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #dfe6e1; border-radius: 10px; font: inherit; background: white; }
input:focus-visible, button:focus-visible { outline: 2px solid #078871; outline-offset: 2px; }
button { width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: 10px; background: #078871; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #075b4e; }
button:disabled { opacity: .6; cursor: wait; }
#message { min-height: 22px; margin: 12px 0 0; color: #b42318; font-size: 14px; }