html,body{margin:0;background:var(--concrete);min-height:100%}
body{padding:0 0 env(safe-area-inset-bottom,0px)}
.shell{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;box-shadow:0 0 0 1px var(--line)}
@media(min-width:560px){.shell{margin:24px auto;min-height:auto;border-radius:2px;overflow:hidden}}
.pin{display:flex;flex-direction:column;gap:18px}
.pin p{margin:0;font-size:15px;color:var(--ink2);max-width:38ch}
.pin label{display:flex;flex-direction:column;gap:8px}
.pin input{font:inherit;font-weight:800;font-size:30px;letter-spacing:.4em;text-align:center;padding:12px 10px;border:1px solid var(--line);border-radius:2px;background:var(--white);width:100%;font-variant-numeric:tabular-nums}
.pin input:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--ink)}
.pin .btn{display:flex;align-items:center;justify-content:center;min-height:50px;border:0;border-radius:2px;background:var(--ink);color:var(--concrete);font:inherit;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pin .btn[disabled]{opacity:.5;cursor:default}
.pin .err{min-height:20px;font-size:14px;font-weight:600;color:#B23A0E}
.pin .alt{font-size:13.5px;color:var(--steel)}
.pin .alt a{color:var(--ink);font-weight:700}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}