Prompt it

Create a beginner-friendly accessible rating meter using semantic HTML and dependency-free CSS. Use a labelled section with a heading, a score that includes the numeric value and denominator, a real meter element with min, max, value, visible fallback text, and an aria-label, plus a short next-step note. Scope every selector under .cf-rating-meter and ensure every custom selector is represented in the supplied HTML or on the meter pseudo-elements. Use a flexible header, readable contrast, an accent-color progress treatment, visible focus styles, 320px-safe wrapping, and a mobile breakpoint below 460px. Do not use JavaScript, frameworks, or external assets. Include reduced-motion handling even though the base component is static. Return complete copy-ready HTML and CSS, then explain why meter semantics and text alternatives matter for accessible interfaces.