Prompt it

Create a clean, responsive search result item for a documentation site using semantic HTML and complete dependency-free vanilla CSS. Include a small content category and type label, a clear linked-result heading, a one-sentence excerpt with the matching search phrase highlighted using a semantic mark element, a breadcrumb-like documentation location, and an updated date using time datetime. Provide one prominent “Open guide” link with a decorative arrow. Make the result comfortable to scan at 320px with no horizontal overflow; allow metadata to wrap and stack the footer action on narrow screens. Use a restrained white card, readable dark title, muted excerpt and metadata, subtle border, and a pale but legible match highlight. Ensure keyboard navigation, a clearly visible focus ring, readable contrast, and a 44px minimum action height. Respect prefers-reduced-motion for transitions. Use system fonts only, no JavaScript, external assets, frameworks, or invented search behavior. Scope all custom CSS beneath .cf-search-result and make every class used in the CSS present in the supplied HTML so edits in the live CSS editor visibly update the preview. Return complete HTML and CSS and briefly explain why mark is appropriate for the matched phrase.