.pinpad{display:flex;flex-direction:column;align-items:center;gap:20px}.pinpad.shake{animation:pinpad-shake .42s var(--ease)}@keyframes pinpad-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.pinpad-sink{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.pinpad-msg{max-width:28em;margin:0;color:var(--dang);font-size:var(--fs-sm);text-align:center}.pinpad-slots{display:flex;gap:12px;padding:0}.pinpad-slot{width:16px;height:16px;border-radius:50%;border:1px solid var(--grid-rule)}.pinpad-slot.filled{background:var(--acc);border-color:var(--acc)}.invalid .pinpad-slot{border-color:var(--dang);outline:1px solid var(--dang)}.pinpad-slot.cursor{border-color:var(--acc);outline:1px solid var(--acc)}.pinpad-keys{grid-template-columns:repeat(3,minmax(0,1fr));padding:1px;width:min(280px,100%)}.pinpad-key{min-height:56px;border:0;border-radius:0;font-size:20px;font-weight:600;color:var(--ink);transition:background var(--dur-press) var(--ease-hover),transform var(--dur-press) var(--ease)}@media(pointer:coarse)and (max-height:500px){.pinpad-key{min-height:44px}.pinpad-keys{scroll-margin-bottom:calc(var(--chrome-bottom) + 4.5rem)}}.pinpad-keys>.pinpad-key:active{background:var(--grid-tint);transform:scale(.97)}@media(hover:hover)and (pointer:fine){.pinpad-keys>.pinpad-key:hover:not(:disabled){background:var(--grid-tint)}}.pinpad-keys>.pinpad-key:focus-visible{position:relative;z-index:1;outline:2px solid var(--focus);outline-offset:-2px}.pinpad-keys>.pinpad-key:disabled{color:var(--ink-3)}.pinpad-key-fn{font-size:var(--fs-sm);color:var(--ink-2)}@media(prefers-reduced-motion:reduce){.pinpad.shake{animation:none}}