Modern CSS Prompt Library

Build a responsive card grid in plain CSS. Use CSS Grid with `repeat(auto-fit, minmax(...))` so it reflows without media queries. Use `gap` for spacing, not margins. Do not use floats, flexbox row wrapping hacks, or a framework.

Make this component respond to its own container width, not the viewport. Use container queries: set `container-type: inline-size` on the wrapper and `@container` rules on the children. Do not use viewport media queries for component layout.

Position this popover relative to its trigger button using CSS Anchor Positioning (`position-anchor`, `anchor()`), not JavaScript `getBoundingClientRect()` or scroll/resize listeners. Fall back gracefully where unsupported.

Style this parent based on the state of a descendant using the `:has()` selector instead of toggling a class with JavaScript. For example, highlight a form group when it contains an invalid input.

Build an accordion that animates open and closed with pure CSS. Use `details`/`summary` with `::details-content`, `interpolate-size: allow-keywords`, and a `height` transition. Do not measure heights in JavaScript.

Build this dropdown menu using the native Popover API (`popover` attribute + `popovertarget`) instead of a JavaScript toggle or a UI library. Handle light dismiss and focus natively.

Make this textarea grow with its content using `field-sizing: content` instead of a JavaScript resize handler.

Animate these elements as they scroll into view using a scroll-driven animation (`animation-timeline: view()` with `animation-range`). Do not use IntersectionObserver or a JavaScript animation library.

Animate this element in when it is added to the DOM using `@starting-style` and a transition, not a JavaScript timing hack or a `requestAnimationFrame` toggle.

Animate this element between `display: none` and visible using `transition-behavior: allow-discrete` plus `@starting-style`, so both enter and exit transitions run with no JavaScript.

Generate a color scale from a single brand color using `oklch` and relative color syntax (`oklch(from var(--brand) ...)`), not hardcoded hex values or a Sass color function. Keep it perceptually uniform.

Add dark mode using `color-scheme: light dark` and the `light-dark()` function instead of duplicating rules under a `.dark` class or a `prefers-color-scheme` media query block.

Set readable text color automatically against a variable background using `contrast-color()` instead of hardcoding black or white per background.

Refactor this CSS to modern, native equivalents. Replace float layouts with Grid or Flexbox, margin spacing hacks with `gap`, the padding-bottom aspect-ratio hack with `aspect-ratio`, and JavaScript class toggles with `:has()`. Keep behavior identical and note any feature with limited browser support.

Convert this Sass/Less to plain modern CSS. Use native nesting, custom properties for variables, `color-mix()` for color functions, and `@layer` for organization. Do not introduce a build step.

Rewrite this component's styling from utility classes into a small block of modern CSS using custom properties, nesting, and logical properties. Keep the visual result identical.