.login{min-height:100dvh;display:grid;place-items:center;padding:24px;overflow:auto;position:fixed;inset:0;background:
  linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/100% 64px,
  linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/88px 100%,
  var(--paper)}
.envelope{width:min(440px,100%);padding:11px;border-radius:6px;background:repeating-linear-gradient(135deg,var(--red) 0 16px,#fff 16px 28px,#2250d9 28px 44px,#fff 44px 56px);box-shadow:var(--shadow-lg);transform:rotate(-.6deg)}
.envelope .paperin{background:var(--surface);border-radius:2px;padding:30px 32px 32px;position:relative;display:flex;flex-direction:column;gap:22px}
.envelope .quad{position:absolute;right:26px;top:-2px;transform-origin:50% 0;animation:land .55s cubic-bezier(.2,1.2,.4,1) both;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));z-index:1}
@keyframes land{0%{transform:translateY(-34px) rotate(14deg) scale(1.4);opacity:0}60%{opacity:1}100%{transform:translateY(0) rotate(4deg) scale(1)}}
.postmark{position:absolute;right:74px;top:30px;width:78px;height:78px;color:var(--ink-3);opacity:.5;transform:rotate(-12deg);pointer-events:none}
.login h1{font:650 40px/1 var(--ui);letter-spacing:-.035em}
.login .lead{color:var(--ink-2);margin-top:8px;max-width:26ch}
.login form{display:flex;flex-direction:column;gap:16px}
.login .input{height:46px;font-size:16px}
.login .btn{height:48px;font-size:16px}
.login .err{color:var(--red);font-weight:560;font-size:14.5px;display:flex;gap:8px;align-items:flex-start}
.login .foot{font-size:13px;color:var(--ink-3);text-align:center;margin-top:-6px}
.codeinput{letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;font-size:24px!important}
@media (prefers-reduced-motion:reduce){.envelope .quad{animation:none;transform:rotate(4deg)}}