Update styles based on different states

website/app/[locale]/(root)/docs/accent-color/content.mdx

@@ -30,7 +30,7 @@ Use the `accent-color:color` to set a custom accent color of user interface elem
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="accent-color:red-46**:hover** accent-color:red-46**@sm** accent-color:red-46**@dark** accent-color:red-46**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/align-content/content.mdx

@@ -4,7 +4,7 @@
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="align-content:normal**:hover** align-content:normal**@sm** align-content:normal**@dark** align-content:normal**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/align-items/content.mdx

@@ -4,7 +4,7 @@
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="align-items:center**:hover** align-items:center**@sm** align-items:center**@dark** align-items:center**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/align-self/content.mdx

@@ -4,7 +4,7 @@
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="align-self:auto**:hover** align-self:auto**@sm** align-self:auto**@dark** align-self:auto**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-delay/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@delay:300ms**:hover** @delay:300ms**@sm** @delay:300ms**@dark** @delay:300ms**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-direction/content.mdx

@@ -41,7 +41,7 @@ For one-shot animations, remove `infinite`.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@direction:normal**:hover**">…</div>
 <div class="@direction:normal**@sm**">…</div>

website/app/[locale]/(root)/docs/animation-duration/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@duration:1s**:hover** @duration:1s**@sm** @duration:1s**@dark** @duration:1s**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-fill-mode/content.mdx

@@ -10,7 +10,7 @@ Simplify the native syntax using the derived symbol.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@fill-mode:none**:hover** @fill-mode:none**@sm** @fill-mode:none**@dark** @fill-mode:none**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-iteration-count/content.mdx

@@ -23,7 +23,7 @@ Specifies the number of times the animation iterates, even decimals.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@iteration:infinite**:hover** @iteration:infinite**@sm** @iteration:infinite**@dark** @iteration:infinite**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-name/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@name:fade**:hover** @name:fade**@sm** @name:fade**@dark** @name:fade**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-play-state/content.mdx

@@ -21,7 +21,7 @@ Pauses the running animation.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@play:paused**:hover** @play:paused**@sm** @play:paused**@dark** @play:paused**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation-timing-function/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@easing:ease**:hover** @easing:ease**@sm** @easing:ease**@dark** @easing:ease**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/animation/content.mdx

@@ -98,7 +98,7 @@ Use the `fade` animation on SVG paths with regular delays to create a loading sp
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="@fade|1s**:hover** @fade|1s**@sm** @fade|1s**@dark** @fade|1s**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/appearance/content.mdx

@@ -32,7 +32,7 @@ Before removing the default appearance, it looks like this:
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="appearance:none**:hover** appearance:none**@sm** appearance:none**@dark** appearance:none**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/aspect-ratio/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="aspect:1/1**:hover** aspect:1/1**@sm** aspect:1/1**@dark** aspect:1/1**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/backdrop-filter/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="backdrop-filter:none**:hover** backdrop-filter:none**@sm** backdrop-filter:none**@dark** backdrop-filter:none**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-attachment/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-attachment:scroll**:hover** background-attachment:scroll**@sm** background-attachment:scroll**@dark** background-attachment:scroll**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-blend-mode/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-blend-mode:normal**:hover** background-blend-mode:normal**@sm** background-blend-mode:normal**@dark** background-blend-mode:normal**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-clip/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-clip:origin**:hover** background-clip:origin**@sm** background-clip:origin**@dark** background-clip:origin**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-color/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-color:fade-10**:hover** background-color:fade-10**@sm** background-color:fade-10**@dark** background-color:fade-10**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-image/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="bg:url(…)**:hover** bg:url(…)**@sm** bg:url(…)**@dark** bg:url(…)**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-origin/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background:border**:hover** background:border**@sm** background:border**@dark** background:border**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-position/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-position:top**:hover** background-position:top**@sm** background-position:top**@dark** background-position:top**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-repeat/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-repeat:repeat**:hover** background-repeat:repeat**@sm** background-repeat:repeat**@dark** background-repeat:repeat**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background-size/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="background-size:10%|20**:hover** background-size:10%|20**@sm** background-size:10%|20**@dark** background-size:10%|20**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/background/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="bg:url(\'…\');center/cover**:hover** bg:url(\'…\');center/cover**@sm** bg:url(\'…\');center/cover**@dark** bg:url(\'…\');center/cover**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border-collapse/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border-collapse:collapse**:hover** border-collapse:collapse**@sm** border-collapse:collapse**@dark** border-collapse:collapse**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border-color/content.mdx

@@ -2,7 +2,7 @@
 <Overview />
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border-color:blue-60**:hover** border-color:blue-60**@sm** border-color:blue-60**@dark** border-color:blue-60**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border-radius/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border-radius:10**:hover** border-radius:10**@sm** border-radius:10**@dark** border-radius:10**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border-style/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border-style:solid**:hover** border-style:solid**@sm** border-style:solid**@dark** border-style:solid**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border-width/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border-width:10**:hover** border-width:10**@sm** border-width:10**@dark** border-width:10**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/border/content.mdx

@@ -2,7 +2,7 @@
 <Overview />
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="border:1|solid|blue-60**:hover** border:1|solid|blue-60**@sm** border:1|solid|blue-60**@dark** border:1|solid|blue-60**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/box-decoration-break/content.mdx

@@ -15,7 +15,7 @@ Use `box-decoration:clone` to apply the background, border, border-image, box-sh
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="box-decoration:slice**:hover** box-decoration:slice**@sm** box-decoration:slice**@dark** box-decoration:slice**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/box-shadow/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="box-shadow:1|2|3|blue**:hover** box-shadow:1|2|3|blue**@sm** box-shadow:1|2|3|blue**@dark** box-shadow:1|2|3|blue**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/box-sizing/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="box-sizing:1/1**:hover** box-sizing:1/1**@sm** box-sizing:1/1**@dark** box-sizing:1/1**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/break-after/content.mdx

@@ -28,7 +28,7 @@ Use `break-after:value` to set how breaks should behave after a generated box.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="break-after:auto**:hover** break-after:auto**@sm** break-after:auto**@dark** break-after:auto**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/break-before/content.mdx

@@ -28,7 +28,7 @@ Use `break-before:value` to set how breaks should behave before a generated box.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="break-before:auto**:hover** break-before:auto**@sm** break-before:auto**@dark** break-before:auto**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/break-inside/content.mdx

@@ -41,7 +41,7 @@ Before setting the `break-inside:avoid`, the item is break within the list. It l
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="break-inside:avoid**:hover** break-inside:avoid**@sm** break-inside:avoid**@dark** break-inside:avoid**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/caret-color/content.mdx

@@ -16,7 +16,7 @@ Use the `caret-color:color` to change the cursor color in text input.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="caret-color:blue-46**:hover** caret-color:blue-46**@sm** caret-color:blue-46**@dark** caret-color:blue-46**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/clear/content.mdx

@@ -62,7 +62,7 @@ Use `both:right` to move the element below all right floated elements.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="clear:both**:hover** clear:both**@sm** clear:both**@dark** clear:both**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/clip-path/content.mdx

@@ -2,7 +2,7 @@
 <Overview/>
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="clip:inset(0|20px)**:hover** clip:inset(0|20px)**@sm** clip:inset(0|20px)**@dark** clip:inset(0|20px)**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/color/content.mdx

@@ -41,7 +41,7 @@ Change the text color of an element using HSL color code.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="fg:slate-10**:hover** fg:slate-10**@sm** fg:slate-10**@dark** fg:slate-10**@print**">…</div>
 ```

website/app/[locale]/(root)/docs/column-span/content.mdx

@@ -16,7 +16,7 @@ Use `col-span:value` to make elements span across all columns.
 </Demo>
 ```html
     <div class="cols:3">
-        
+
 ### Introduction to animals
         <p>There are many different types of animals in the world …</p>
     </div>
@@ -25,7 +25,7 @@ Use `col-span:value` to make elements span across all columns.
 ---
 
 ## Conditionally apply
-Apply styles in [different states](/docs/states-and-queries) using selectors, media queries, etc.
+Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
 <div class="column-span:all**:hover** column-span:all**@sm** column-span:all**@dark** column-span:all**@print**">…</div>
 ```