Conditional blocks

Apply a Master CSS condition inside a native rule or managed definition.

@variant

Use @variant inside managed definitions or native style rules to share the current selector under a Master CSS condition.

.notice {  border-radius: var(--radius-lg);  padding: var(--spacing-md);  @dark {    background-color: var(--color-gray-90);    color: white;  }  @variant media((width<52.125rem)) {    padding: var(--spacing-sm);  }}

.notice {  border-radius: var(--radius-lg);  padding: var(--spacing-md)}@media (prefers-color-scheme:dark) {  .notice:where(:root, :root *) {    background-color: var(--color-gray-90);    color: #fff  }}@media (prefers-color-scheme:dark) {  .notice:where(:host, :host *) {    background-color: var(--color-gray-90);    color: #fff  }}@media (width<52.125rem) {  .notice {    padding: var(--spacing-sm)  }}@layer theme {  :root,  :host {    --radius-lg: .5rem;    --spacing-md: 1rem;    --color-gray-90: oklch(23.5% 0 none);    --spacing-sm: .75rem  }}

Use @dark and @light as rule-local shorthands for those explicitly defined modes. Use @variant for other modes, custom variants, breakpoint names, and complete native queries such as media((width<52.125rem)). Unknown names are errors; numeric and feature shorthand inference is removed. These blocks are rule-local compiler directives, not native CSS at-rules or entry markers.

For selector states, write a nested selector such as &:hover directly. A selector can contain @variant when it also needs a condition. Define custom modes and variants before using them; @variant does not declare a new mode or condition. See Conditional queries for the condition grammar.