You are composing a current-shell KIRUPA page. Read /design/components.json and the relevant entry in /design/sections/components.md for selectors, variants, source files, and usage. Start from an adjacent working page and reuse its SSI structure and named component classes. When a link needs to look like a link inside the tutorial body, add the blueEmphasis class to its anchor, including in component examples. Style class names, IDs, and code identifiers in explanatory prose with inlineCode. Choose semantic HTML before adding JavaScript. Use visible labels, keyboard-operable controls, clear focus, and explicit loading/error/empty states. Keep forms inert in documentation specimens and label demo output. Preserve the article's reading rhythm and code overflow containment. Verify the component in each visual style and both modes. Do not initialize onboarding, tracking, a live chat request, or a subscription in a preview. Keep reference and navigation descriptions short and factual.

Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.