One-Time Code Input

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OTP Verify</title>
    <meta name="description" content="A one-time code card — six mono digit boxes share one real input, a focus ring glides to the next box as you type, a texted code arrives with an Autofill chip, a wrong code shakes and drains away, and the right one ripples green box by box.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="bg-layer"></div>

    <main class="otp-stage">

        <section class="otp-card" id="otp-card" data-state="idle" aria-labelledby="otp-title" aria-describedby="otp-sub">

            <header class="otp-head">
                <span class="otp-head__tile" aria-hidden="true">
                    <svg class="otp-head__glyph otp-head__glyph--lock" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M8 11v-4a4 4 0 1 1 8 0v4"/></svg>
                    <svg class="otp-head__glyph otp-head__glyph--open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -6"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M8 11v-5a4 4 0 0 1 8 0"/></svg>
                </span>
                <div class="otp-head__text">
                    <h2 class="otp-title" id="otp-title">Verify it's you</h2>
                    <p class="otp-sub" id="otp-sub">We texted a 6-digit code to <span class="otp-phone" id="otp-phone">+44 •••• ••318</span></p>
                </div>
            </header>

            <div class="otp-sms" id="otp-sms" data-state="waiting">
                <div class="otp-sms__wait" aria-hidden="true">
                    <svg class="otp-sms__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"/><path d="M11 4h2"/><path d="M12 17v.01"/></svg>
                    <span class="otp-sms__wait-text">Waiting for the text</span>
                    <span class="otp-sms__dots"><span></span><span></span><span></span></span>
                </div>
                <div class="otp-sms__msg" id="otp-sms-msg">