[hidden]{display:none!important}
body{display:grid;align-content:center}
.login-sheet{width:min(520px,100%);margin:0 auto}
.login-sheet .paper{width:100%;padding:70px 40px 60px 84px}
.login h1{font-size:clamp(44px,10vw,66px);line-height:.95;margin:0 0 24px}
.login form{margin:0}
.login input{
  display:block;width:100%;margin:0 0 6px;padding:6px 4px;background:transparent;border:0;
  border-bottom:2px solid rgba(29,43,79,.55);border-radius:0;outline:0;
  font:700 38px/1.1 "Caveat",cursive;color:var(--ink);
}
.login input::placeholder{color:var(--ink-soft);opacity:.55;font-weight:500}
.login input:focus{border-bottom-color:var(--ink)}
.login .btns{display:flex;gap:14px;margin-top:22px}
.login button{
  font:700 42px/1 "Caveat",cursive;color:var(--ink);background:transparent;cursor:pointer;
  border:3px solid var(--ink);border-radius:46% 54% 50% 50%/52% 48% 54% 46%;
  height:64px;min-width:64px;padding:0 18px;display:grid;place-items:center;
}
.login button:first-child{flex:1;border-radius:14px 22px 16px 24px/22px 14px 24px 16px}
.login button:hover,.login button:focus-visible{background:rgba(29,43,79,.08)}
.login .msg{color:#b3261e;font-size:30px;margin:0 0 14px}
.login code{font:16px monospace}

/* Hand-drawn passkey entry button */
.login #pk-login.pk-btn-drawn {
  color: #8b1814;
  border: 2.5px solid #8b1814;
  border-radius: 14px 22px 16px 20px / 20px 14px 22px 16px;
  font: 700 32px/1 "Caveat", cursive;
  height: auto;
  min-height: 52px;
  padding: 6px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.login #pk-login.pk-btn-drawn:hover,
.login #pk-login.pk-btn-drawn:focus-visible {
  background: rgba(139, 24, 20, 0.08);
}
.drawn-key-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width:560px){.login-sheet .paper{padding:60px 20px 44px 56px}}