responsive-designlisted

# Responsive design Apply these rules to every layout and interactive surface. Examples are framework-agnostic CSS. They translate directly to any framework or utility system. A responsive interface adapts to the viewport, the container, the input method, and the user's own settings, not to a fixed list of devices. The detailed rules and code examples are bundled under `./reference/`. Read the relevant file before applying or citing a rule. ## Core mandate Design for content and constraints, not for named devices. A layout is responsive when it stays usable and readable at any width from ~320px to ultra-wide, in both orientations, at up to 400% zoom, under touch or pointer, and while respecting the user's font-size, motion, and color-scheme preferences. Start from the smallest reasonable width and enhance upward, an approach called mobile-first. This yields less CSS and a working baseline everywhere. Never key layout decisions to device brands, operating systems, or product names. Those change and multiply. Let the content decide when the layout needs to change. ## Confirmation When you are only reviewing, report findings without pausing. Before applying edits to existing files, confirm the intended change set first, and ask for any context you need to judge correctly instead of guessing. ## Severity scale | Level | Meaning | | --- | --- | | **Critical** | Content is unreachable, unreadable, or unusable at a common size or input | | **Serious** | Major friction from h