Convert a design screenshot into clean HTML/CSSPromptLow risk

I'm attaching a screenshot of {{screen_name}}. Recreate it as semantic HTML and modern CSS.

Rules:
- Mobile first; breakpoints at {{breakpoints}}.
- Use CSS custom properties for colors, spacing and radius; put them in :root.
- Flexbox/grid only, no absolute positioning for layout.
- Use real elements (nav, main, section, button, label) — no div soup.
- Where the screenshot is ambiguous, pick the simplest option and list your assumptions at the end.

Output one HTML file with a <style> block.