Native dialog shell
A centered native dialog shell with a clear choice group, strong focus states, and a small-screen action layout.
Open folder
A centered native dialog shell with a clear choice group, strong focus states, and a small-screen action layout.
Create a beginner-friendly native HTML dialog shell using semantic dialog, fieldset, legend, labelled text, radio inputs, and real buttons. Keep every custom selector under .cf-dialog and ensure every selector is represented in the supplied HTML so live CSS edits visibly update the preview. Use a labelled dialog, visible focus rings, 44px touch targets, readable contrast, a backdrop that does not remove the dialog content, responsive stacking from 320px, and reduced-motion handling. Do not use a JavaScript modal library, custom radio controls, external assets, or framework classes. Return complete copy-ready HTML and dependency-free CSS, then explain how the native dialog and fieldset preserve accessible semantics.