Prompt it

Create a polished, responsive kanban task card for a project board using semantic HTML and complete dependency-free vanilla CSS. Show a project/category eyebrow, a clearly labelled textual priority (never rely on color alone), a concise task title and description, and a checklist progress indicator with both a visible “2 of 4 complete” label and a native progress element with an accessible name. Add an assignee using an address element with a decorative initials avatar, plus a machine-readable due date using time datetime. Include a clear “Open task” anchor. Make the card fit from 320px without horizontal scrolling; stack the top row and footer gracefully on very narrow screens. Use a calm white surface, readable dark text, muted supporting text, restrained teal action, subtle border and soft shadow. Preserve keyboard access, visible focus, strong contrast, and 44px-minimum action height. Respect reduced-motion preferences. Use system fonts, no JavaScript, frameworks, or external assets. Scope CSS under .cf-task-card and ensure every custom class selector exists in the supplied HTML so live editor changes visibly update the preview. Return complete HTML and CSS and briefly explain the semantic use of article, address, time, and progress.