Build a component that can adapt its styles conditionally based on where it appears in the DOM (via CSS custom property inheritance) rather than available size. For example, a table of contents components that is expanded in the sidebar but collapsed in a single-column layout.

Affected web-feature IDs: container-style-queries

Use case subdir: guides/user-experience/usage-aware-component-variations

Related features: #48

Required files:

• Use case metadata (guide.md frontmatter)
• demo.html
• Use case guidance (guide.md)
• expectations.md
• tasks/task.md
• negative-demo.html
• grader.ts