*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  font-family:ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  background:#0b0e13;color:#c9d4e0;
}
.wrap{width:320px;padding:40px 24px}
.mark{
  text-align:center;font-size:20px;font-weight:700;letter-spacing:4px;
  color:#4da3ff;margin-bottom:36px;text-transform:lowercase;
}
label{display:block;font-size:11px;letter-spacing:.8px;color:#6b7a8d;margin:16px 0 6px;text-transform:uppercase}
input{
  width:100%;padding:11px 12px;border:1px solid #1f2733;border-radius:8px;
  background:#11161f;color:#e6edf3;font-size:15px;outline:none;transition:border-color .15s;
}
input:focus{border-color:#2b4a77}
input[type=text]#t{letter-spacing:6px;font-size:17px;text-align:center}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
button{
  width:100%;margin-top:24px;padding:12px;border:0;border-radius:8px;cursor:pointer;
  background:#1f3a5f;color:#eaf2fb;font-size:14px;font-weight:600;letter-spacing:.5px;
  transition:background .15s;
}
button:hover{background:#2b4a77}
.err{margin-top:14px;text-align:center;font-size:12px;color:#f85149}