.pin-field{border-radius:var(--radius-sm);text-align:center;outline:none;width:3rem;height:3.5rem;margin:.25rem;font-size:2rem;transition-property:background,color,border,box-shadow,transform;transition-duration:.25s;display:inline-block}.pin-small{border-radius:var(--radius-sm);width:2.5rem;height:3rem;margin:.2rem;font-size:1.5rem}.pin-field:invalid{border-color:#dc3545;animation:75ms linear 3 shake;box-shadow:0 0 .25rem #dc354580}swd-pin-field[completed] .pin-field{border-color:var(--color-border-strong);background-color:var(--color-surface-muted)}@keyframes shake{0%{transform:scale(1.05)translateY(-5%)}to{transform:scale(1.05)translateY(5%)}}