Prompt it

Create a beginner-friendly accessible select field using semantic HTML and dependency-free CSS. Use a labelled section with a visible heading, a short introductory paragraph, a real label connected with for/id, and a native select with a name and aria-describedby pointing to the helper text. Include three useful options. Scope every selector under .cf-select-field and ensure every custom selector is represented in the supplied HTML. Use a mobile-safe width, readable contrast, a 48px target, a visible keyboard focus ring, a small-screen adjustment below 360px, and reduced-motion handling. Do not use JavaScript, frameworks, custom select widgets, or external assets. Return complete copy-ready HTML and CSS and explain why native form controls and explicit label associations improve accessibility.