Prompt it

Create an accessible file-upload progress card using semantic HTML and complete dependency-free vanilla CSS. Use an article with a heading linked by aria-labelledby, a short filename, file type and size, and status text that does not rely on color alone. Use a native progress element with max and current value, an explicit label, and visible numeric percentage connected with aria-describedby. Include a focusable Cancel upload button as a visual integration placeholder and give it a strong focus-visible style. Scope every custom CSS selector to .cf-upload-status-card and ensure every custom selector/class appears in the supplied HTML so edits visibly update the live preview. Use readable contrast, text wrapping for long filenames, comfortable 44px action targets, and a layout that works from 320px. Keep the progress bar static in this example—do not animate it; in production update progress values from the upload process and make the cancel button abort that request. Avoid JavaScript, remote assets, and framework classes. Return complete HTML and CSS.