.klyp-otp-input{max-width:100%;display:inline-block}.klyp-otp-input[data-disabled=true] .klyp-otp-input__cells{cursor:not-allowed}.klyp-otp-input[data-disabled=true] .klyp-otp-input__cell{opacity:.5}.klyp-otp-input__cells{grid-template-columns:repeat(var(--klyp-otp-length,6), minmax(0, var(--klyp-otp-cell-width,44px)));gap:var(--klyp-app-ui-kit-space-16);cursor:text;width:100%;max-width:100%;display:grid;position:relative}.klyp-otp-input__cells[data-invalid=true]{animation:klyp-otp-input-shake .32s var(--klyp-app-ui-kit-easing-standard)}.klyp-otp-input__hidden-input{z-index:2;width:100%;height:100%;box-shadow:none;color:#0000;caret-color:#0000;font-family:monospace;font-size:var(--klyp-otp-cell-height,60px);font-variant-numeric:tabular-nums;letter-spacing:-.5em;text-align:left;background:0 0;border:0 solid #0000;outline:0 solid #0000;margin:0;padding:0;line-height:1;display:flex;position:absolute;inset:0}.klyp-otp-input__hidden-input::selection{color:#0000;background:0 0}.klyp-otp-input__hidden-input:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 9999s ease-in-out;box-shadow:inset 0 0 0 1000px #0000}.klyp-otp-input__hidden-input:-webkit-autofill:focus{-webkit-text-fill-color:transparent;transition:background-color 9999s ease-in-out;box-shadow:inset 0 0 0 1000px #0000}@media (hover:hover) and (pointer:fine){.klyp-otp-input__hidden-input:-webkit-autofill:hover{-webkit-text-fill-color:transparent;transition:background-color 9999s ease-in-out;box-shadow:inset 0 0 0 1000px #0000}}@supports (-webkit-touch-callout:none){.klyp-otp-input__hidden-input{letter-spacing:-.6em;font-weight:100;font-stretch:50%;left:-1px;right:1px}}.klyp-otp-input__cell{z-index:1;width:100%;height:var(--klyp-otp-cell-height,60px);border:var(--klyp-app-ui-kit-bw-default) solid var(--klyp-app-ui-kit-color-border-default);border-radius:var(--klyp-app-ui-kit-r-chip);background:var(--klyp-app-ui-kit-color-control-bg);color:var(--klyp-app-ui-kit-color-fg-primary);font:var(--klyp-app-ui-kit-type-heading-xl);font-weight:var(--klyp-app-ui-kit-font-weight-medium);font-variant-numeric:tabular-nums;transition:border-color var(--klyp-app-ui-kit-duration-fast) var(--klyp-app-ui-kit-easing-standard), background var(--klyp-app-ui-kit-duration-fast) var(--klyp-app-ui-kit-easing-standard), color var(--klyp-app-ui-kit-duration-fast) var(--klyp-app-ui-kit-easing-standard), box-shadow var(--klyp-app-ui-kit-duration-fast) var(--klyp-app-ui-kit-easing-standard);place-items:center;line-height:1;display:grid;position:relative;overflow:hidden}.klyp-otp-input__cell[data-filled=true]{color:var(--klyp-app-ui-kit-color-fg-primary)}.klyp-otp-input__cell[data-active=true]{border-color:var(--klyp-app-ui-kit-color-fg-accent);box-shadow:inset 0 0 0 var(--klyp-app-ui-kit-bw-default) var(--klyp-app-ui-kit-color-fg-accent)}.klyp-otp-input__cell[data-invalid=true]{border-color:var(--klyp-app-ui-kit-color-status-danger);background:color-mix(in srgb, var(--klyp-app-ui-kit-color-status-danger) 10%, var(--klyp-app-ui-kit-color-bg-surface));color:var(--klyp-app-ui-kit-color-status-danger);box-shadow:none}.klyp-otp-input__cell[data-success=true]{border-color:var(--klyp-app-ui-kit-color-status-success);background:color-mix(in srgb, var(--klyp-app-ui-kit-color-status-success) 8%, var(--klyp-app-ui-kit-color-bg-surface));color:var(--klyp-app-ui-kit-color-status-success);box-shadow:none}.klyp-otp-input__ring{z-index:1;box-sizing:border-box;height:var(--klyp-otp-cell-height,60px);border:var(--klyp-app-ui-kit-bw-emphasis) solid var(--klyp-app-ui-kit-color-fg-accent);border-radius:var(--klyp-app-ui-kit-r-chip);pointer-events:none;position:absolute;top:0;left:0}.klyp-otp-input__char{animation:klyp-otp-input-char-in var(--klyp-app-ui-kit-duration-fast) var(--klyp-app-ui-kit-easing-standard) both;display:block}@keyframes klyp-otp-input-char-in{0%{opacity:.2;transform:translateY(75%)}}@keyframes klyp-otp-input-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@media (prefers-reduced-motion:reduce){.klyp-otp-input__cells[data-invalid=true],.klyp-otp-input__char{animation:none}}