Prompt it

Create an accessible product color-variant picker in semantic HTML with complete dependency-free vanilla CSS. Use a form containing a fieldset and legend, helper text connected with aria-describedby, and native radio inputs that share one name so keyboard users can move between options with arrow keys. Give every radio a unique ID and a visible label that includes both a colored swatch and the color name; never rely on color alone. Keep the actual inputs available to assistive technology while visually hiding them, and show a clear focus-visible ring on the associated swatch. Show a distinct selected state, use swatch colors with discernible edges, and add a clearly styled submit button. Scope every custom selector to .cf-swatch-picker and ensure every custom class selector exists in the HTML so edits update the live preview. Use readable contrast, touch targets at least 44px high, and a layout that works from 320px. Avoid animation, JavaScript, framework classes, remote fonts, and external assets. The /cart action is a placeholder; explain that production should validate the chosen variant and price server-side. Return complete HTML and CSS.