Prompt it

Create a beginner-friendly, accessible verification-code entry component with semantic HTML and complete dependency-free vanilla CSS. Use a single text input for a six-digit code, not six separate fields, so keyboard navigation, paste, and mobile one-time-code autofill work naturally. Include a visible label, a concise helper connected with aria-describedby, inputmode="numeric", autocomplete="one-time-code", a six-digit pattern, maxlength, a submit button, and a separate resend link. Use placeholder text only as an example, never as the actual code. Scope every custom selector under .cf-code-entry and ensure every selector matches an element in the supplied HTML so live CSS edits visibly update the preview. Use readable contrast, clear focus-visible states, a layout that fits 320px, wrapped actions on narrow screens, and reduced-motion handling. Do not use JavaScript, remote fonts, icons, or framework classes. Keep the /verify-code action as an integration placeholder and explain that the code must be verified securely on the server; client-side pattern validation is only input guidance. Return full copy-ready HTML and CSS.