OTP / PIN Code Input

Build a one-time-code (OTP / PIN) input using vanilla HTML, CSS, and JavaScript. No libraries, no frameworks — zero dependencies.

VISUAL DESIGN
- Six segmented input cells in a horizontal row with 10px gap between them
- Each cell: 48px wide, 56px tall, border-radius 10px, 1.5px border at rgba(255,255,255,0.1), background rgba(255,255,255,0.04)
- Centered 22px monospace-feel digit (use font-variant-numeric: tabular-nums for stable widths)
- Cyan caret color (#00c4ff)
- Hover state: brighter border and background
- Focus state: cyan border (#00c4ff), pale cyan background tint, 4px cyan glow ring
- Filled state: subtle cyan background tint and cyan-tinted border (so users see at a glance which cells are populated)
- Hide native number-input spinners (-webkit-appearance: none on inner/outer spin buttons; -moz-appearance: textfield)
- Status line below the row, min-height 18px so layout doesn't jump

VALIDATION STATES
- Success: all cells turn green (#00ff88) with green border and green tinted background, status text "Verified" in green
- Error: all cells turn red (#ff6b6b) with red border and red tinted background, status text "Invalid code, try again", and the row plays a 500ms shake keyframe (translate -2/4/-7/7/-7/4/-2)
- Cells lock to readOnly during success state to prevent further editing

INPUT BEHAVIOR
- type="text" with inputmode="numeric" so mobile keyboards show numpads (do not use type="number" — it allows scientific notation, "e", and signs)
- maxlength="1" per cell as a safety net, but ALSO sanitize the input event:
  - On input: take only the first numeric character of the new value, replace cell value with it
  - If the user typed a digit (cell was empty before, is now filled): focus the next empty cell
  - Non-numeric characters are silently rejected
- Auto-advance only on a real new character — pressing the same digit twice should still move forward
- Always select() on focus so the cell's existing value is overwritten by the next keystroke

KEYBOARD NAVIGATION
- ArrowLeft: move focus to previous cell (no wrap)
- ArrowRight: move focus to next cell (no wrap)
- Backspace on an empty cell: clear and focus the previous cell (the most expected behavior — never lose a keystroke)
- Backspace on a filled cell: clear it and stay (the next backspace then steps back per rule above)
- Delete: clear current cell, stay
- Home: focus first cell
- End: focus last filled cell (or last cell if all filled)
- Tab / Shift+Tab: leave the group entirely (do not trap focus inside)

PASTE HANDLING
- Listen for the paste event on the container (or each cell)
- Strip non-numeric characters from clipboard data, then take the first 6 digits
- Distribute one digit per cell starting from the focused cell (or from cell 0 if pasted into the container)
- After paste, focus the cell after the last filled cell (or stay on the last cell if the row is full)
- If paste fills all cells, fire the onComplete callback automatically

API
- Initialize: createOtpInput(container, { length: 6, onChange: (code) => ..., onComplete: (code) => ..., validate: (code) => boolean | Promise<boolean> })
- Public methods on the returned controller: getValue(), setValue(string), clear(), focus(), setError(message), setSuccess(message), reset()
- onComplete fires when all cells are filled; if validate is provided, it runs validate(code) and applies setSuccess or setError automatically

ACCESSIBILITY
- Wrap the row in role="group" with an aria-label like "One-time verification code"
- Each input has an aria-label "Digit 1" through "Digit N" so screen readers can identify the position
- Status message in role="status", aria-live="polite" — announced when validation result changes
- autocomplete="one-time-code" on each input so iOS / browsers can auto-fill from SMS
- prefers-reduced-motion: skip the shake animation; show error state instantly

OUTPUT
- Single HTML file with embedded <style> and <script>
- Demo with a "validate against hardcoded 123456" example
- Buttons to manually trigger valid / invalid / clear states for testing
- Polished, professional aesthetic — should feel like the verification screens on a premium modern sign-in flow