.pin-control{min-width:0}.pin-control>label{margin-bottom:10px}.pin-field{position:relative;width:100%;max-width:390px;min-width:0;--pin-bg:#fff;--pin-line:#a6b5a4;--pin-focus:#305d43;--pin-ink:#183f30;--pin-error:#a02b30}.pin-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(5px,1.8vw,10px);pointer-events:none}.pin-cells span{display:flex;align-items:center;justify-content:center;min-width:0;height:clamp(54px,15vw,72px);border:1px solid var(--pin-line);border-radius:12px;background:var(--pin-bg);color:var(--pin-ink);font-size:24px;box-shadow:0 2px 5px #00000008}.pin-field input.pin-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;opacity:0!important;margin:0!important;padding:0!important;z-index:1;font-size:16px!important;cursor:text}.pin-field:focus-within .pin-cells .is-active{outline:3px solid var(--pin-focus);outline-offset:2px;border-color:var(--pin-focus)}.pin-field:has([aria-invalid=true]) .pin-cells span{border-color:var(--pin-error)}.pin-error{color:#a02b30;font-size:13px;line-height:1.5;margin:10px 0 0;min-width:0}.pin-error:empty,.pin-save-status:empty{display:none}@media(forced-colors:active){.pin-field:focus-within .is-active{outline:3px solid Highlight}}