.code-input{position:relative;width:100%;margin-top:4px}.code-input-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,2vw,10px)}.code-input-slot{position:relative;display:grid;place-items:center;min-width:0;height:clamp(52px,14vw,64px);border:1px solid #414141;border-radius:12px;background:#222;color:#fff;font-size:clamp(24px,6vw,28px);font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.code-input-slot.is-filled{border-color:#616161;background:#282828}.code-input-slot.is-active{border-color:var(--primary);box-shadow:0 0 0 3px #9e7fff26}.code-input.is-invalid .code-input-slot{border-color:#e77}.code-input .code-input-native,.code-input .code-input-native:focus{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:24px;cursor:text}.code-input-native::-moz-selection{background:transparent;color:transparent}.code-input-native::selection{background:transparent;color:transparent}.code-input-caret{width:2px;height:24px;border-radius:1px;background:var(--primary)}@media(prefers-reduced-motion:reduce){.code-input-slot{transition:none}}