Prompt it

Build a polished, beginner-friendly password requirements helper in semantic HTML and complete dependency-free vanilla CSS. Use a section with a heading, a visible label connected to a native type="password" input, autocomplete="new-password", a sensible minlength, and concise helper text associated with aria-describedby. Follow it with a real heading and a semantic list of practical password guidelines. Do not mark requirements as passed or failed: this example is deliberately static and must not imply that CSS validates the entered value. Include a clear note that production validation belongs in the application and server. Scope every custom selector to .cf-password-help or its prefixed elements, and ensure each selector/class appears in the supplied HTML so editing CSS changes the live preview. Use readable contrast, a visible :focus-visible indicator, comfortable control sizing, wrapping text, and a layout that works at 320px. Respect prefers-reduced-motion; do not add animation, JavaScript, external assets, remote fonts, or framework classes. Return complete HTML and CSS.