Prompt it

Create a single accessible native range slider using semantic HTML and complete dependency-free vanilla CSS. The control should demonstrate choosing card spacing from 8px to 48px in 4px increments. Include a visible section heading, short explanation, explicit label associated with the input, and helper text that explains keyboard use. Use a native <input type="range"> so Arrow keys, Home, and End remain available without JavaScript. Show minimum and maximum labels as text; do not imply a dynamically updated value unless you implement the required JavaScript. Style a high-contrast track and thumb in both WebKit and Firefox, and add a clearly visible :focus-visible outline that is not clipped. Scope every custom selector under .cf-range-slider and make sure each class selector also exists in the supplied HTML so CSS edits update the live preview. Use readable contrast, comfortable hit area, and a layout that remains usable at 320px without horizontal scrolling. Use system fonts, no framework, script, external asset, or animation. Return complete HTML and CSS.