## Instructions - Organize CSS in layers: reset → tokens (`:root` variables) → base → layout → components → utilities; use `@layer` to control cascade explicitly. - Master specificity order: elements < classes < attributes/pseudo-classes < IDs (avoid) < `!important` (never); keep selectors flat, max 2-3 levels deep. - Default to Flexbox for 1-D rows/columns, Grid for 2-D pages/cards; never float-layout or absolute-position whole pages. - Build mobile-first with `min-width` breakpoints (e.g. 640/768/1024px); add container queries (`@container`) for truly reusable components. - Define design tokens as CSS custom properties: colors, spacing scale, radii, shadows, font stacks; dark mode via `[data-theme]` overrides. - Use BEM naming (`.card`, `.card__title`, `.card--featured`) for vanilla projects; keep utility-class sprawl out unless Tailwind is adopted project-wide. - Animations: prefer `transform` + `opacity` only (GPU-safe); use `transition` for state changes, `@keyframes` for loops; always honor `prefers-reduced-motion`. - Responsive media: `max-width:100%` on all media, `aspect-ratio` for frames, `clamp()` for fluid type/spacing instead of many breakpoints. - Avoid magic numbers: derive spacing from scale (`--space-1..8`), z-index scale, and line-height ratios; document any exception inline. - Tailwind-vs-vanilla rule: solo landing/small site → vanilla + BEM; fast-iterating app/design-system team → Tailwind; never mix both on the same component. - Debug visually: outline grid (`* { outline: 1px solid red }` temporarily), check computed specificity, then remove debug code. - Ship lean CSS: purge unused rules, minify, single critical `