@seed-design/css 1.2.6 → 1.2.8

package/all.layered.css

@@ -764,14 +764,18 @@
   @keyframes seed-enter {
     from {
       opacity: var(--seed-enter-opacity, 1);
-      transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0) scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1)) rotate(var(--seed-enter-rotate, 0));
+      transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0)
+      scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1))
+      rotate(var(--seed-enter-rotate, 0));
     }
   }
 
   @keyframes seed-exit {
     to {
       opacity: var(--seed-exit-opacity, 1);
-      transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0) scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1)) rotate(var(--seed-exit-rotate, 0));
+      transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0)
+      scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1))
+      rotate(var(--seed-exit-rotate, 0));
     }
   }
 
@@ -921,13 +925,13 @@
     --range-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_brandSolid:is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -956,13 +960,13 @@
     --range-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -991,13 +995,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -1026,13 +1030,13 @@
     --range-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-critical-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
       background: var(--seed-color-bg-critical-solid-pressed);
     }
@@ -1064,13 +1068,13 @@
     --range-color: var(--seed-color-bg-brand-solid);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -1103,13 +1107,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -1141,13 +1145,13 @@
     background: #fff0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_ghost:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-action-button--variant_ghost:is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -1363,7 +1367,7 @@
   .seed-action-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -1373,7 +1377,7 @@
 
   .seed-action-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -1402,7 +1406,7 @@
   .seed-action-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
@@ -1798,6 +1802,96 @@
     animation: none !important;
   }
 
+  [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
   [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 8vh;
@@ -2021,7 +2115,7 @@
   }
 
   .seed-app-screen__root {
-    --app-bar-offset: calc(var(--app-bar-height)  + var(--seed-safe-area-top));
+    --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
     width: 100%;
     height: 100%;
     position: absolute;
@@ -2081,10 +2175,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_slideFromRightIOS {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 2);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 7);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 2);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 7);
   }
 
   .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
@@ -2229,10 +2323,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 3);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 4);
   }
 
   .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
@@ -2285,10 +2379,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_fadeIn {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 3);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 4);
   }
 
   .seed-app-screen__dim--transitionStyle_fadeIn {
@@ -2515,6 +2609,18 @@
     --badge-offset: 30px;
   }
 
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
   .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;
@@ -2640,6 +2746,15 @@
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
   }
 
+  .seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px;
+  }
+
+  .seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  }
+
   .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px;
   }
@@ -2818,7 +2933,7 @@
   .seed-bottom-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -2828,7 +2943,7 @@
 
   .seed-bottom-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -2844,7 +2959,7 @@
   .seed-bottom-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
@@ -3051,13 +3166,13 @@
     transform: translateX(-50%);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
       background-color: var(--seed-color-palette-gray-500);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
       background-color: var(--seed-color-palette-gray-500);
     }
@@ -3162,7 +3277,7 @@
     cursor: pointer;
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
+    margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
     border-radius: var(--seed-radius-r2_5);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
@@ -3188,13 +3303,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -3210,13 +3325,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
@@ -3232,13 +3347,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
@@ -3254,13 +3369,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
@@ -3276,13 +3391,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
@@ -3298,13 +3413,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
@@ -3347,7 +3462,7 @@
 
   .seed-checkbox__root--size_large {
     min-height: var(--seed-dimension-x9);
-    --checkmark-margin-top: calc((var(--seed-dimension-x9)  - var(--seed-dimension-x6)) / 2);
+    --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
   }
 
   .seed-checkbox__label--size_large {
@@ -3358,7 +3473,7 @@
 
   .seed-checkbox__root--size_medium {
     min-height: var(--seed-dimension-x8);
-    --checkmark-margin-top: calc((var(--seed-dimension-x8)  - var(--seed-dimension-x5)) / 2);
+    --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
   }
 
   .seed-checkbox__label--size_medium {
@@ -3408,13 +3523,13 @@
     border-width: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -3433,13 +3548,13 @@
     color: var(--seed-color-fg-disabled);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -3471,13 +3586,13 @@
     background: var(--seed-color-bg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -3491,13 +3606,13 @@
     background: var(--seed-color-bg-brand-solid);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -3507,13 +3622,13 @@
     color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
       background: var(--seed-color-palette-gray-200);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
       background: var(--seed-color-palette-gray-200);
     }
@@ -3523,13 +3638,13 @@
     color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
       background: var(--seed-color-palette-carrot-200);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
       background: var(--seed-color-palette-carrot-200);
     }
@@ -3632,25 +3747,25 @@
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -3678,13 +3793,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -3695,13 +3810,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -3729,13 +3844,13 @@
     --seed-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -3746,13 +3861,13 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -3930,25 +4045,25 @@
     color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -3976,25 +4091,25 @@
     border-color: #0000;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -4020,25 +4135,25 @@
     color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -4167,13 +4282,13 @@
     --range-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -4199,13 +4314,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-layer-floating-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
       background: var(--seed-color-bg-layer-floating-pressed);
     }
@@ -4339,7 +4454,7 @@
   .seed-dialog__positioner {
     overscroll-behavior-y: none;
     --dialog-z-index: 2;
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: center;
     display: flex;
@@ -4349,7 +4464,7 @@
 
   .seed-dialog__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -4357,7 +4472,7 @@
   .seed-dialog__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--dialog-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     max-width: 272px;
     margin: auto var(--seed-dimension-x8);
@@ -4449,7 +4564,7 @@
   .seed-extended-action-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -4459,7 +4574,7 @@
 
   .seed-extended-action-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -4488,7 +4603,7 @@
   .seed-extended-action-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-block: var(--seed-dimension-x4);
@@ -4760,7 +4875,7 @@
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
-    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
     display: flex;
   }
 
@@ -4772,7 +4887,7 @@
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-color: var(--seed-color-fg-critical);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
-    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4)  - var(--seed-dimension-x4)) / 2);
+    --seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
     display: flex;
   }
 
@@ -4880,13 +4995,13 @@
     overflow: hidden;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -4944,7 +5059,7 @@
 
   .seed-help-bubble__positioner {
     --popover-z-index: 99;
-    z-index: calc(var(--popover-z-index)  + var(--z-index-offset, 0));
+    z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
   }
 
   .seed-help-bubble__content {
@@ -5023,10 +5138,10 @@
   .seed-help-bubble__closeButton {
     cursor: pointer;
     padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
-    margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
+    margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
-    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5081,11 +5196,19 @@
     display: block;
   }
 
+  .seed-image-frame__content:not([data-loading-state="loaded"]) {
+    display: none;
+  }
+
   .seed-image-frame__fallback {
     width: 100%;
     height: 100%;
   }
 
+  .seed-image-frame__fallback[data-loading-state="loaded"] {
+    display: none;
+  }
+
   .seed-image-frame__root--stroke_true:after {
     content: "";
     pointer-events: none;
@@ -5139,10 +5262,10 @@
 
   .seed-image-frame-reaction-button__root:before {
     content: "";
-    top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    bottom: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
-    left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -5193,7 +5316,7 @@
     padding-block: var(--seed-dimension-x2_5);
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
-    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
+    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
     --seed-suffix-icon-align-self: center;
@@ -5250,8 +5373,8 @@
   .seed-inline-banner__closeButton {
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
-    margin-left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
+    margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
+    margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
     --seed-suffix-icon-margin-left: initial;
     cursor: pointer;
     background-color: #0000;
@@ -5383,13 +5506,13 @@
     background-color: var(--seed-color-bg-disabled);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
@@ -5679,7 +5802,7 @@
     inset: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
       left: var(--seed-dimension-x1_5);
@@ -5688,7 +5811,7 @@
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
       left: var(--seed-dimension-x1_5);
@@ -5697,7 +5820,7 @@
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
       background-color: var(--seed-color-bg-transparent-pressed);
       left: var(--seed-dimension-x1_5);
@@ -5706,7 +5829,7 @@
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
       background-color: var(--seed-color-bg-transparent-pressed);
       left: var(--seed-dimension-x1_5);
@@ -5742,25 +5865,25 @@
     background-color: var(--seed-color-bg-brand-weak);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
       background-color: var(--seed-color-bg-brand-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
       background-color: var(--seed-color-bg-brand-weak-pressed);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
       background-color: var(--seed-color-bg-brand-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
       background-color: var(--seed-color-bg-brand-weak-pressed);
     }
@@ -5896,7 +6019,7 @@
   .seed-menu-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -5906,7 +6029,7 @@
 
   .seed-menu-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -5914,12 +6037,12 @@
   .seed-menu-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--seed-dimension-x4);
-    padding-bottom: calc(var(--seed-dimension-x4)  + var(--seed-safe-area-bottom));
+    padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
     flex-direction: column;
@@ -5995,13 +6118,13 @@
     display: flex;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-menu-sheet__closeButton:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -6075,13 +6198,13 @@
     display: flex;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-menu-sheet-item__root:is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -6241,7 +6364,7 @@
     padding-bottom: var(--seed-dimension-x2_5);
     --seed-prefix-icon-size: var(--seed-dimension-x4);
     --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
-    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
+    --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x2);
     --seed-suffix-icon-align-self: center;
@@ -6296,8 +6419,8 @@
 
   .seed-page-banner__button {
     cursor: pointer;
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-line-height-t3)) * .5 * -1);
-    padding: calc((var(--seed-dimension-x10)  - var(--seed-line-height-t3)) * .5);
+    margin: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
+    padding: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
     font-family: inherit;
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
@@ -6320,8 +6443,8 @@
   .seed-page-banner__closeButton {
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
-    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
-    margin-left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
+    margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
+    margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
     --seed-suffix-icon-margin-left: initial;
     cursor: pointer;
     border-radius: var(--seed-radius-r1);
@@ -6350,13 +6473,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -6372,13 +6495,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -6394,13 +6517,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-informative-weak-pressed);
     }
@@ -6416,13 +6539,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-informative-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-informative-solid-pressed);
     }
@@ -6438,13 +6561,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-positive-weak-pressed);
     }
@@ -6460,13 +6583,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-positive-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-positive-solid-pressed);
     }
@@ -6482,13 +6605,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-warning-weak-pressed);
     }
@@ -6504,13 +6627,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-warning-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-warning-solid-pressed);
     }
@@ -6526,13 +6649,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-critical-weak-pressed);
     }
@@ -6548,13 +6671,13 @@
     --seed-suffix-icon-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-critical-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-critical-solid-pressed);
     }
@@ -6570,13 +6693,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
       background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
@@ -6644,7 +6767,7 @@
   }
 
   .seed-pull-to-refresh__indicator {
-    transform: translateY(min(calc(var(--ptr-displacement, 0)  - var(--ptr-size)), 0px));
+    transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
     transition: transform var(--seed-duration-d6);
     justify-content: center;
     align-items: center;
@@ -6688,7 +6811,7 @@
 
   .seed-radio__root--size_large {
     min-height: var(--seed-dimension-x9);
-    --radiomark-margin-top: calc((var(--seed-dimension-x9)  - var(--seed-dimension-x6)) / 2);
+    --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
   }
 
   .seed-radio__label--size_large {
@@ -6699,7 +6822,7 @@
 
   .seed-radio__root--size_medium {
     min-height: var(--seed-dimension-x8);
-    --radiomark-margin-top: calc((var(--seed-dimension-x8)  - var(--seed-dimension-x5)) / 2);
+    --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
   }
 
   .seed-radio__label--size_medium {
@@ -6731,13 +6854,13 @@
     position: relative;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
@@ -6779,13 +6902,13 @@
     background-color: var(--seed-color-bg-neutral-inverted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-inverted-pressed);
     }
@@ -6799,13 +6922,13 @@
     background-color: var(--seed-color-bg-brand-solid);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -6882,13 +7005,13 @@
     --seed-count-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -6902,13 +7025,13 @@
     --seed-count-color: var(--seed-color-fg-brand);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-transparent-pressed);
     }
@@ -7073,28 +7196,28 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
       background-color: var(--seed-color-palette-gray-100);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
       background-color: var(--seed-color-palette-gray-100);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);
       box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
@@ -7123,13 +7246,13 @@
     inset: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
@@ -7269,13 +7392,13 @@
     inset: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       color: var(--seed-color-fg-neutral-subtle);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       color: var(--seed-color-fg-neutral-subtle);
     }
@@ -7573,12 +7696,12 @@
   }
 
   .seed-slider__valueIndicatorArrow[data-dir="ltr"] {
-    left: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
+    left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
     transform: translateX(-50%);
   }
 
   .seed-slider__valueIndicatorArrow[data-dir="rtl"] {
-    right: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
+    right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
     transform: translateX(50%);
   }
 
@@ -7799,7 +7922,7 @@
     z-index: 2147483647;
     left: calc(env(safe-area-inset-left, 0px));
     right: calc(env(safe-area-inset-right, 0px));
-    bottom: calc(env(safe-area-inset-bottom, 0px)  + var(--snackbar-region-offset, 0px));
+    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
     padding-left: var(--seed-dimension-x2);
     padding-right: var(--seed-dimension-x2);
     padding-top: var(--seed-dimension-x2);
@@ -7840,7 +7963,7 @@
   .seed-switch__root--size_16 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x1_5);
-    --switchmark-margin-top: calc((var(--seed-dimension-x6)  - 16px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
   }
 
   .seed-switch__label--size_16 {
@@ -7852,7 +7975,7 @@
   .seed-switch__root--size_24 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x2);
-    --switchmark-margin-top: calc((var(--seed-dimension-x6)  - 24px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
   }
 
   .seed-switch__label--size_24 {
@@ -7864,7 +7987,7 @@
   .seed-switch__root--size_32 {
     min-height: var(--seed-dimension-x8);
     gap: var(--seed-dimension-x2_5);
-    --switchmark-margin-top: calc((var(--seed-dimension-x8)  - 32px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
   }
 
   .seed-switch__label--size_32 {
@@ -7939,7 +8062,7 @@
   }
 
   .seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(10px);
+    transform: scale(1) translateX(10px);
   }
 
   .seed-switchmark__root--size_24 {
@@ -7954,7 +8077,7 @@
   }
 
   .seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(14px);
+    transform: scale(1) translateX(14px);
   }
 
   .seed-switchmark__root--size_32 {
@@ -7969,7 +8092,7 @@
   }
 
   .seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(20px);
+    transform: scale(1) translateX(20px);
   }
 
   .seed-tabs__root {
@@ -8086,8 +8209,8 @@
   }
 
   .seed-tabs__indicator--triggerLayout_fill {
-    left: calc(var(--indicator-left, 0px)  + var(--seed-dimension-spacing-x-global-gutter));
-    width: calc(var(--indicator-width, 0px)  - 2 * var(--seed-dimension-spacing-x-global-gutter));
+    left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
+    width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
   }
 
   .seed-tabs__trigger--triggerLayout_fill {
@@ -8106,8 +8229,8 @@
   }
 
   .seed-tabs__indicator--triggerLayout_hug {
-    left: calc(var(--indicator-left, 0px)  + 0px);
-    width: calc(var(--indicator-width, 0px)  - 2 * 0px);
+    left: calc(var(--indicator-left, 0px) + 0px);
+    width: calc(var(--indicator-width, 0px) - 2 * 0px);
   }
 
   .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
@@ -8975,13 +9098,13 @@
     --range-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -8996,13 +9119,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -9035,13 +9158,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -9056,13 +9179,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }