Prompt it

Create a reusable, accessible skip-to-content link for a web page with repeated navigation. Put a real anchor before the main landmark, link it to the main element’s unique ID, and give the main element tabindex="-1" so keyboard activation moves focus to it without adding it to the normal Tab order. Hide the link visually while keeping it keyboard-focusable, reveal it on :focus-visible, and provide a clear focus indicator on both the link and destination. Include a small demo main panel so the behavior is understandable. Scope custom CSS to .cf-skip-demo and ensure every custom class or ID selector appears in the supplied HTML. Use readable contrast, a 44px target, responsive spacing down to 320px, no JavaScript, and reduced-motion handling for the reveal transition. Return complete copy-ready HTML and dependency-free CSS, then explain the anchor target and tabindex choice for beginners.