@seed-design/css 1.2.6 → 1.2.8

package/all.css

@@ -824,13 +824,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);
   }
@@ -859,13 +859,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);
   }
@@ -894,13 +894,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);
   }
@@ -929,13 +929,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);
   }
@@ -967,13 +967,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);
   }
@@ -1006,13 +1006,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);
   }
@@ -1044,13 +1044,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);
   }
@@ -1266,7 +1266,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;
@@ -1276,7 +1276,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;
 }
@@ -1305,7 +1305,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);
@@ -1701,6 +1701,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;
@@ -1924,7 +2014,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;
@@ -1984,10 +2074,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 {
@@ -2132,10 +2222,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 {
@@ -2188,10 +2278,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 {
@@ -2418,6 +2508,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;
@@ -2543,6 +2645,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;
 }
@@ -2721,7 +2832,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;
@@ -2731,7 +2842,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;
 }
@@ -2747,7 +2858,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);
@@ -2954,13 +3065,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);
   }
@@ -3065,7 +3176,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;
@@ -3091,13 +3202,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);
   }
@@ -3113,13 +3224,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);
   }
@@ -3135,13 +3246,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);
   }
@@ -3157,13 +3268,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);
   }
@@ -3179,13 +3290,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);
   }
@@ -3201,13 +3312,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));
   }
@@ -3250,7 +3361,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 {
@@ -3261,7 +3372,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 {
@@ -3311,13 +3422,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);
   }
@@ -3336,13 +3447,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);
   }
@@ -3374,13 +3485,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);
   }
@@ -3394,13 +3505,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);
   }
@@ -3410,13 +3521,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);
   }
@@ -3426,13 +3537,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);
   }
@@ -3535,25 +3646,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);
   }
@@ -3581,13 +3692,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);
   }
@@ -3598,13 +3709,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);
   }
@@ -3632,13 +3743,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);
   }
@@ -3649,13 +3760,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);
   }
@@ -3833,25 +3944,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);
   }
@@ -3879,25 +3990,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);
   }
@@ -3923,25 +4034,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);
   }
@@ -4070,13 +4181,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);
   }
@@ -4102,13 +4213,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);
   }
@@ -4242,7 +4353,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;
@@ -4252,7 +4363,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;
 }
@@ -4260,7 +4371,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);
@@ -4352,7 +4463,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;
@@ -4362,7 +4473,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;
 }
@@ -4391,7 +4502,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);
@@ -4663,7 +4774,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;
 }
 
@@ -4675,7 +4786,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;
 }
 
@@ -4783,13 +4894,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);
   }
@@ -4847,7 +4958,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 {
@@ -4926,10 +5037,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);
@@ -4984,11 +5095,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;
@@ -5042,10 +5161,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);
@@ -5096,7 +5215,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;
@@ -5153,8 +5272,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;
@@ -5286,13 +5405,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);
   }
@@ -5582,7 +5701,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);
@@ -5591,7 +5710,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);
@@ -5600,7 +5719,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);
@@ -5609,7 +5728,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);
@@ -5645,25 +5764,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);
   }
@@ -5799,7 +5918,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;
@@ -5809,7 +5928,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;
 }
@@ -5817,12 +5936,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;
@@ -5898,13 +6017,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);
   }
@@ -5978,13 +6097,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);
   }
@@ -6144,7 +6263,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;
@@ -6199,8 +6318,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);
@@ -6223,8 +6342,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);
@@ -6253,13 +6372,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);
   }
@@ -6275,13 +6394,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);
   }
@@ -6297,13 +6416,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);
   }
@@ -6319,13 +6438,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);
   }
@@ -6341,13 +6460,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);
   }
@@ -6363,13 +6482,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);
   }
@@ -6385,13 +6504,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);
   }
@@ -6407,13 +6526,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);
   }
@@ -6429,13 +6548,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);
   }
@@ -6451,13 +6570,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);
   }
@@ -6473,13 +6592,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));
   }
@@ -6547,7 +6666,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;
@@ -6591,7 +6710,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 {
@@ -6602,7 +6721,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 {
@@ -6634,13 +6753,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);
   }
@@ -6682,13 +6801,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);
   }
@@ -6702,13 +6821,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);
   }
@@ -6785,13 +6904,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);
   }
@@ -6805,13 +6924,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);
   }
@@ -6976,28 +7095,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);
@@ -7026,13 +7145,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);
   }
@@ -7172,13 +7291,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);
   }
@@ -7476,12 +7595,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%);
 }
 
@@ -7702,7 +7821,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);
@@ -7743,7 +7862,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 {
@@ -7755,7 +7874,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 {
@@ -7767,7 +7886,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 {
@@ -7842,7 +7961,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 {
@@ -7857,7 +7976,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 {
@@ -7872,7 +7991,7 @@
 }
 
 .seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
-  transform: scale(1)translateX(20px);
+  transform: scale(1) translateX(20px);
 }
 
 .seed-tabs__root {
@@ -7989,8 +8108,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 {
@@ -8009,8 +8128,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 {
@@ -8878,13 +8997,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);
   }
@@ -8899,13 +9018,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);
   }
@@ -8938,13 +9057,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);
   }
@@ -8959,13 +9078,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);
   }
@@ -9022,14 +9141,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));
   }
 }