*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#16261d;
  color:#f3f6f2;
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gate{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.gate-form{
  position:relative;display:flex;align-items:center;gap:0;
  width:min(340px,100%);
  border-bottom:1px solid rgba(243,246,242,.28);
  transition:border-color .25s ease;
}
.gate-form:focus-within{border-color:#e7b43c}
.gate-input{
  flex:1;min-width:0;height:52px;padding:0 4px;
  background:transparent;border:0;outline:0;color:inherit;
  font:inherit;font-size:17px;letter-spacing:.14em;
}
.gate-input::placeholder{color:rgba(243,246,242,.42);letter-spacing:.08em}
.gate-btn{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:50%;background:#e7b43c;color:#16261d;cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.gate-btn:hover{transform:translateX(2px);background:#f0c45a}
.gate-btn:focus-visible{outline:2px solid #f3f6f2;outline-offset:3px}
.gate-msg{
  position:absolute;left:4px;top:calc(100% + 12px);margin:0;
  font-size:13px;color:#f2a39b;min-height:1em;
}
.gate-form.shake{animation:shake .38s ease}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.gate-form.shake{animation:none}*{transition:none!important}}