Prompt it

Create a beginner-friendly accessible native date input 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 an input type="date" with a name and aria-describedby pointing to the helper text. Scope every selector under .cf-date-field and ensure every custom selector is represented in the supplied HTML so live CSS edits visibly update the preview. 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 date-picker widgets, or external assets. Return complete copy-ready HTML and CSS and explain why native date controls and explicit label associations improve accessibility.