better stylex setup

apps/docs/package.json

···
     "@react-types/shared": "^3.32.1",
     "@shikijs/rehype": "^3.13.0",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",
-    "@stylexjs/stylex": "^0.16.2",
+    "@stylexjs/stylex": "^0.17.0",
+    "@stylexjs/unplugin": "^0.17.0",
     "@tailwindcss/vite": "^4.1.16",
     "@tanstack/nitro-v2-vite-plugin": "^1.133.19",
     "@tanstack/react-devtools": "^0.7.8",
···
     "@tanstack/router-plugin": "^1.133.27",
     "@tldraw/editor": "^4.1.2",
     "@window-splitter/react": "^1.1.2",
+    "browserslist": "^4.28.0",
     "change-case": "catalog:",
     "dedent": "catalog:",
     "glob": "^11.0.3",
+    "lightningcss": "^1.30.2",
     "lucide-react": "^0.545.0",
     "magic-string": "^0.30.21",
     "react": "catalog:",
···
     "shiki": "^3.13.0",
     "tailwindcss": "^4.1.16",
     "tldraw": "^4.1.2",
-    "unplugin-stylex": "^0.5.5",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {

apps/docs/src/components/alert-dialog/index.tsx

···
 import { IconButton } from "../icon-button";
 import { spacing } from "../theme/spacing.stylex";
 import { StyleXComponentProps } from "../theme/types";
-import { typeramp } from "../theme/typography.stylex";
+import { fontSize, typeramp } from "../theme/typography.stylex";
 import { useDialogStyles } from "../theme/useDialogStyles";
 
 const styles = stylex.create({
···
     justifyContent: "space-between",
     paddingLeft: spacing["4"],
     paddingRight: spacing["4"],
+    paddingTop: spacing["2"],
+    fontSize: fontSize["lg"],
   },
   description: {
     paddingBottom: spacing["4"],
···
   style,
 }: AlertDialogHeaderProps) => {
   return (
-    <div {...stylex.props(styles.header, typeramp.heading5, style)}>
+    <div {...stylex.props(styles.header, style)}>
       <Heading>{children}</Heading>
       <IconButton label="Close" size="sm" variant="tertiary" slot="close">
         <X />

apps/docs/src/components/dialog/index.tsx

···
 import { uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
 import { Size, StyleXComponentProps } from "../theme/types";
-import { typeramp } from "../theme/typography.stylex";
+import { fontSize, typeramp } from "../theme/typography.stylex";
 import { useDialogStyles } from "../theme/useDialogStyles";
 const styles = stylex.create({
   dialog: {
···
     paddingBottom: spacing["2"],
     paddingLeft: spacing["4"],
     paddingRight: spacing["4"],
+    fontSize: fontSize["lg"],
 
     borderBottomColor: uiColor.border1,
     borderBottomStyle: "solid",
···
     paddingBottom: spacing["4"],
     paddingLeft: spacing["4"],
     paddingRight: spacing["4"],
-    paddingTop: { default: 0, ":first-child": spacing["4"] },
+    paddingTop: spacing["4"],
   },
   footer: {
     display: "flex",
···
 
 export const DialogHeader = ({ children, style }: DialogHeaderProps) => {
   return (
-    <div {...stylex.props(styles.header, typeramp.heading5, style)}>
+    <div {...stylex.props(styles.header, style)}>
       <Heading>{children}</Heading>
       <IconButton label="Close" size="sm" variant="tertiary" slot="close">
         <X />

apps/docs/src/components/disclosure/index.tsx

···
 import * as stylex from "@stylexjs/stylex";
-import { ChevronDown, PanelBottom } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { use } from "react";
 import {
   Disclosure as AriaDisclosure,
···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
     flexDirection: "column",
   },
   title: {
-    alignItems: "center",
-    backgroundColor: {
-      default: "transparent",
-      ":is([data-hovered=true])": uiColor.component2,
-      ":is([data-pressed=true])": uiColor.component3,
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    padding: {
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
+      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
     },
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["2xl"],
     },
-    cornerShape: "squircle",
     borderWidth: 0,
+    gap: spacing["2"],
+    alignItems: "center",
+    backgroundColor: {
+      default: "transparent",
+      ":is([data-hovered=true])": uiColor.component2,
+      ":is([data-pressed=true])": uiColor.component3,
+    },
     color: uiColor.text1,
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: {
+      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
       ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
     },
     fontWeight: fontWeight["medium"],
-    gap: spacing["2"],
     justifyContent: "space-between",
-    padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
-      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
-    },
     textAlign: "left",
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
     width: "100%",
···
     pointerEvents: "none",
   },
   chevron: {
+    transition: {
+      default: "rotate 200ms ease-in-out",
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
     color: uiColor.text2,
     flexShrink: 0,
     rotate: {
       default: "0deg",
       ":is([aria-expanded=true] *)": "180deg",
-    },
-    transition: {
-      default: "rotate 200ms ease-in-out",
-      [mediaQueries.reducedMotion]: "none",
     },
   },
   panel: {
+    overflow: "clip",
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
+      ":is([data-size=lg] *)": fontSize["lg"],
       ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
-    height: "var(--disclosure-panel-height)",
-    overflow: "clip",
     transitionDuration: {
       default: animationDuration.default,
-      [mediaQueries.reducedMotion]: 0,
+      "@media (prefers-reduced-motion: reduce)": null,
     },
     transitionProperty: "height",
     transitionTimingFunction: "ease-in-out",
+    height: "var(--disclosure-panel-height)",
   },
   panelContent: {
     padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
       ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
     },
   },
 });

apps/docs/src/components/meter/index.tsx

···
 import { spacing } from "../theme/spacing.stylex";
 import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
 import { fontSize, lineHeight } from "../theme/typography.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
+    gridTemplateAreas: "'label value-label' 'bar bar'",
     alignItems: "center",
     display: "grid",
-    gap: spacing["2"],
-    gridTemplateAreas: "'label value-label' 'bar bar'",
   },
   label: {
     gridArea: "label",
   },
   bar: {
+    gridArea: "bar",
+    borderRadius: radius.full,
+    overflow: "hidden",
     backgroundColor: {
+      ":is([data-variant=critical] *)": criticalColor.component2,
       ":is([data-variant=primary] *)": primaryColor.component2,
       ":is([data-variant=secondary] *)": uiColor.component2,
       ":is([data-variant=success] *)": successColor.component2,
       ":is([data-variant=warning] *)": warningColor.component2,
-      ":is([data-variant=critical] *)": criticalColor.component2,
     },
-    borderRadius: radius.full,
     boxShadow: {
+      ":is([data-variant=critical] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=primary] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=secondary] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=success] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
-      ":is([data-variant=critical] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
     },
-    gridArea: "bar",
     height: {
-      ":is([data-size=sm] *)": spacing["1"],
+      ":is([data-size=lg] *)": spacing["3"],
       ":is([data-size=md] *)": spacing["2"],
-      ":is([data-size=lg] *)": spacing["3"],
+      ":is([data-size=sm] *)": spacing["1"],
     },
-    overflow: "hidden",
     width: "100%",
   },
 
   valueLabel: {
+    gridArea: "value-label",
     color: uiColor.text1,
     fontVariantNumeric: "tabular-nums",
-    gridArea: "value-label",
     justifySelf: "flex-end",
 
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["xs"],
-      ":is([data-size=md] *)": fontSize["sm"],
       ":is([data-size=lg] *)": fontSize["base"],
+      ":is([data-size=md] *)": fontSize["sm"],
+      ":is([data-size=sm] *)": fontSize["xs"],
     },
     lineHeight: {
-      ":is([data-size=sm] *)": lineHeight["xs"],
-      ":is([data-size=md] *)": lineHeight["sm"],
       ":is([data-size=lg] *)": lineHeight["base"],
+      ":is([data-size=md] *)": lineHeight["sm"],
+      ":is([data-size=sm] *)": lineHeight["xs"],
     },
   },
   fill: {
-    height: "100%",
     transform: "translateX(-100%)",
     transitionDuration: animationDuration.default,
     transitionProperty: "transform",
     transitionTimingFunction: "linear",
+    height: "100%",
     width: "100%",
 
     backgroundColor: {
+      ":is([data-variant=critical] *)": criticalColor.solid1,
       ":is([data-variant=primary] *)": primaryColor.solid1,
       ":is([data-variant=secondary] *)": uiColor.solid1,
       ":is([data-variant=success] *)": successColor.solid1,
       ":is([data-variant=warning] *)": warningColor.solid2,
-      ":is([data-variant=critical] *)": criticalColor.solid1,
     },
   },
   progress: (percentage: number) => ({

apps/docs/src/components/progress-bar/index.tsx

···
 import { SizeContext } from "../context";
 import { Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
+    gridTemplateAreas: "'label value-label' 'bar bar'",
     alignItems: "center",
     display: "grid",
-    gap: spacing["2"],
-    gridTemplateAreas: "'label value-label' 'bar bar'",
   },
   label: {
     gridArea: "label",
   },
   bar: {
-    backgroundColor: uiColor.component2,
+    gridArea: "bar",
     borderRadius: radius.full,
-    gridArea: "bar",
     overflow: "hidden",
+    backgroundColor: uiColor.component2,
     width: "100%",
 
     height: {
-      ":is([data-size=sm] *)": spacing["1"],
-      ":is([data-size=md] *)": spacing["2"],
       ":is([data-size=lg] *)": spacing["3"],
+      ":is([data-size=md] *)": spacing["2"],
+      ":is([data-size=sm] *)": spacing["1"],
     },
   },
   valueLabel: {
+    gridArea: "value-label",
     color: uiColor.text1,
     fontVariantNumeric: "tabular-nums",
-    gridArea: "value-label",
     justifySelf: "flex-end",
 
     fontSize: {
+      ":is([data-size=lg] *)": fontSize["base"],
+      ":is([data-size=md] *)": fontSize["sm"],
       ":is([data-size=sm] *)": fontSize["xs"],
-      ":is([data-size=md] *)": fontSize["sm"],
-      ":is([data-size=lg] *)": fontSize["base"],
     },
     lineHeight: {
-      ":is([data-size=sm] *)": lineHeight["xs"],
+      ":is([data-size=lg] *)": lineHeight["base"],
       ":is([data-size=md] *)": lineHeight["sm"],
-      ":is([data-size=lg] *)": lineHeight["base"],
+      ":is([data-size=sm] *)": lineHeight["xs"],
     },
   },
   fill: {
     backgroundColor: primaryColor.solid1,
-    height: "100%",
     transform: "translateX(-100%)",
     transitionDuration: animationDuration.default,
     transitionProperty: "none",
     transitionTimingFunction: "linear",
+    height: "100%",
     width: "100%",
   },
   progress: (percentage: number) => ({
     transform: `translateX(calc(${percentage.toString()}% - 100%))`,
   }),
   indeterminateFill: {
-    backgroundRepeat: "no-repeat",
+    animationDuration: "1s",
+    animationIterationCount: "infinite",
+    animationName: {
+      default: IndeterminateAnimation,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "linear",
     backgroundImage: `repeating-linear-gradient(
       45deg,
       ${primaryColor.solid1},
···
       ${primaryColor.border2} 20px,
       ${primaryColor.border2} 40px
     )`,
+    backgroundRepeat: "no-repeat",
     backgroundSize: "20%",
+    transformOrigin: "right",
     height: "100%",
-    animationName: {
-      default: IndeterminateAnimation,
-      [mediaQueries.reducedMotion]: "none",
-    },
-    animationDuration: "1s",
-    animationIterationCount: "infinite",
-    animationTimingFunction: "linear",
     width: "1000%",
-    transformOrigin: "right",
   },
 });
 

apps/docs/src/components/radio/index.tsx

···
 import { Flex } from "../flex";
 import { Description, FieldErrorMessage, Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { ui, primary } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2.5"],
     alignItems: {
       default: "center",
       ":has(p)": "flex-start",
     },
     display: "flex",
-    gap: spacing["2.5"],
-
     fontFamily: fontFamily["sans"],
     fontSize: fontSize["sm"],
     lineHeight: lineHeight["sm"],
···
 
     borderRadius: radius["full"],
     borderWidth: 2,
+    position: "relative",
     height: spacing["4"],
-    position: "relative",
     width: spacing["4"],
 
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color, border-color, color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
   },
   selectionIndicator: {
-    backgroundColor: "white",
     borderRadius: radius["full"],
+    backgroundColor: "white",
     height: spacing["2"],
     width: spacing["2"],
 
+    position: "absolute",
+    transform: "translate(-50%, -50%)",
     left: "50%",
-    position: "absolute",
     top: "50%",
-    transform: "translate(-50%, -50%)",
 
     animationDuration: animationDuration.fast,
     animationFillMode: "forwards",
     animationName: {
       default: scaleIn,
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     animationTimingFunction: "ease-in-out",
   },
···
     color: "white",
   },
   group: {
+    gap: spacing["3"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["3"],
   },
 });
 

apps/docs/src/components/segmented-control/index.tsx

···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { uiColor } from "../theme/semantic-color.stylex";
 import { shadow } from "../theme/shadow.stylex";
···
 
 const styles = stylex.create({
   group: {
+    padding: spacing["1"],
+    borderRadius: radius.lg,
+    gap: spacing["2"],
     alignItems: "center",
     backgroundColor: uiColor.component1,
-    borderRadius: radius.lg,
     boxShadow: "inset 0 0 10px 1px rgba(0, 0, 0, 0.1  )",
     boxSizing: "border-box",
     display: "flex",
-    gap: spacing["2"],
     height: {
+      ":is([data-size=lg])": spacing["11"],
+      ":is([data-size=md])": spacing["9"],
       ":is([data-size=sm])": spacing["7"],
-      ":is([data-size=md])": spacing["9"],
-      ":is([data-size=lg])": spacing["11"],
     },
-    padding: spacing["1"],
   },
   item: {
+    borderRadius: radius.md,
+    borderWidth: 0,
     alignItems: "center",
     backgroundColor: "transparent",
-    borderRadius: radius.md,
-    borderWidth: 0,
     boxSizing: "border-box",
     color: {
       default: uiColor.text1,
-      ":hover": uiColor.text2,
       ":is([data-selected])": uiColor.text2,
+      ":hover": uiColor.text2,
     },
     display: "flex",
     flexGrow: 1,
-    height: "100%",
     justifyContent: "center",
-    paddingBottom: spacing["1"],
-    paddingLeft: spacing["2"],
-    paddingRight: spacing["2"],
-    paddingTop: spacing["1"],
     position: "relative",
     zIndex: {
       default: 1,
       ":is([data-selected])": 0,
     },
+    height: "100%",
+    paddingBottom: spacing["1"],
+    paddingLeft: spacing["2"],
+    paddingRight: spacing["2"],
+    paddingTop: spacing["1"],
 
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   selectionIndicator: {
-    backgroundColor: uiColor.bgSubtle,
     borderRadius: radius.md,
+    backgroundColor: uiColor.bgSubtle,
     boxShadow: shadow.sm,
-    height: "100%",
-    left: 0,
     position: "absolute",
-    top: 0,
     transitionDuration: animationDuration.slow,
     transitionProperty: {
       default: "translate, width",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
+    zIndex: -1,
+    height: "100%",
+    left: 0,
+    top: 0,
     width: "100%",
-    zIndex: -1,
   },
 });
 

apps/docs/src/components/sidebar/index.tsx

···
 import * as stylex from "@stylexjs/stylex";
 import { ChevronRight } from "lucide-react";
 import { createContext, use, useId, useMemo } from "react";
+import { mergeProps, useHover, usePress } from "react-aria";
 import {
   Button,
   Disclosure,
···
 
 import { Flex } from "../flex";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
 import { StyleXComponentProps } from "../theme/types";
 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
 import { Text } from "../typography/text";
-import { mergeProps, useHover, usePress } from "react-aria";
 
 interface SidebarContextType {
   headerId: string;
···
 
 const styles = stylex.create({
   sidebar: {
+    gap: spacing["6"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["6"],
     paddingBottom: spacing["12"],
     paddingLeft: spacing["8"],
     paddingRight: spacing["8"],
···
     width: spacing["64"],
   },
   sidebarHeader: {
-    marginBottom: spacing["4"],
     padding: spacing["3"],
+    alignItems: "center",
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center",
+    marginBottom: spacing["4"],
   },
   sidebarHeaderLink: {
     textDecoration: "none",
···
     paddingRight: spacing["3"],
   },
   sidebarSectionList: {
-    display: "flex",
-    flexDirection: "column",
-    gap: spacing["1"],
     margin: 0,
     padding: 0,
+    gap: spacing["1"],
+    display: "flex",
+    flexDirection: "column",
   },
   sidebarItem: {
+    borderRadius: radius["md"],
+    listStyle: "none",
     textDecoration: "none",
     alignItems: "center",
     backgroundColor: {
···
       ":is([data-hovered=true])": uiColor.component2,
       ":is([data-pressed=true])": uiColor.component3,
     },
-    borderRadius: radius["md"],
     color: uiColor.text2,
     display: "flex",
-    height: spacing["8"],
     fontSize: fontSize["sm"],
-    listStyle: "none",
-    paddingLeft: spacing["3"],
-    paddingRight: spacing["3"],
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["8"],
+    paddingLeft: spacing["3"],
+    paddingRight: spacing["3"],
   },
   sidebarItemActive: {
     backgroundColor: {
···
     flexDirection: "column",
   },
   sidebarGroupButton: {
+    padding: 0,
+    borderWidth: 0,
+    gap: spacing["1.5"],
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     color: uiColor.text2,
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: fontSize["base"],
     fontWeight: fontWeight["medium"],
-    gap: spacing["1.5"],
+    textAlign: "left",
     marginLeft: `calc(${spacing["2.5"]} * -1)`,
-    padding: 0,
-    textAlign: "left",
     width: "100%",
   },
   chevronIcon: {
+    transition: "rotate 250ms",
     rotate: {
       default: "0deg",
       ":is([aria-expanded=true] *)": "90deg",
     },
-    transition: "rotate 250ms",
   },
   sidebarGroupPanel: {
-    height: "var(--disclosure-panel-height)",
     overflow: "clip",
     transition: {
       default: "height 250ms",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
+    height: "var(--disclosure-panel-height)",
   },
   sidebarGroupPanelContent: {
+    gap: spacing["4"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["4"],
     paddingTop: spacing["5"],
   },
 });

apps/docs/src/components/slider/index.tsx

···
     height: {
       ":is([data-orientation=horizontal] *)": spacing["1"],
       ":is([data-orientation=vertical] *)":
-        "calc(attr(data-progress type(<number>)) * 1%)",
+        "calc(attr(data-progress number) * 1%)",
     },
     width: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress type(<number>)) * 1%)",
+        "calc(attr(data-progress number) * 1%)",
       ":is([data-orientation=vertical] *)": spacing["1"],
     },
   },
···
     height: {
       ":is([data-orientation=horizontal] *)": spacing["1"],
       ":is([data-orientation=vertical] *)":
-        "calc(attr(data-progress-end type(<number>)) * 1% - attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
     },
     left: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-start number) * 1%)",
       ":is([data-orientation=vertical] *)": "50%",
     },
     top: {
       ":is([data-orientation=horizontal] *)": "50%",
       ":is([data-orientation=vertical] *)":
-        "calc(100% - attr(data-progress-end type(<number>)) * 1%)",
+        "calc(100% - attr(data-progress-end number) * 1%)",
     },
     width: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress-end type(<number>)) * 1% - attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
       ":is([data-orientation=vertical] *)": spacing["1"],
     },
   },

apps/docs/src/components/switch/index.tsx

···
 } from "react-aria-components";
 
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { shadow } from "../theme/shadow.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
     alignItems: "center",
     display: "flex",
-    gap: spacing["2"],
   },
   indicator: {
+    borderRadius: radius.full,
     backgroundColor: {
       default: uiColor.component3,
       ":is([data-selected=true] *)": primaryColor.solid1,
     },
-    borderRadius: radius.full,
     boxShadow: "inset 0 0 8px 1px rgba(0, 0, 0, 0.2)",
-    height: spacing["6"],
     opacity: {
       default: 1,
       ":is([data-disabled=true] *)": 0.5,
···
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["6"],
     width: spacing["10"],
   },
   thumb: {
-    backgroundColor: uiColor.bgSubtle,
     borderRadius: radius.full,
+    backgroundColor: uiColor.bgSubtle,
     boxShadow: shadow.lg,
     content: "''",
-    height: spacing["4"],
-    left: 0,
-    marginLeft: spacing["1"],
-    marginRight: spacing["1"],
     position: "absolute",
-    top: "50%",
     transform: {
       default: "translateY(-50%)",
       ":is([data-selected=true] *)": "translate(100%, -50%)",
···
     transitionDuration: animationDuration.fast,
     transitionProperty: "transform",
     transitionTimingFunction: "ease-in-out",
+    height: spacing["4"],
+    left: 0,
+    marginLeft: spacing["1"],
+    marginRight: spacing["1"],
+    top: "50%",
     width: spacing["4"],
   },
 });

apps/docs/src/components/tabs/index.tsx

···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
     flexDirection: "row",
   },
   tabList: {
+    gap: spacing["1"],
     alignItems: {
       ":is([data-orientation=horizontal])": "flex-start",
       ":is([data-orientation=vertical])": "stretch",
     },
+    display: "flex",
+    flexDirection: {
+      ":is([data-orientation=horizontal])": "row",
+      ":is([data-orientation=vertical])": "column",
+    },
+    position: "relative",
     borderBottomColor: {
       ":is([data-orientation=horizontal])": uiColor.border2,
       ":is([data-orientation=vertical])": "transparent",
···
       ":is([data-orientation=horizontal])": 0,
       ":is([data-orientation=vertical])": 1,
     },
-    display: "flex",
-    flexDirection: {
-      ":is([data-orientation=horizontal])": "row",
-      ":is([data-orientation=vertical])": "column",
-    },
-    gap: spacing["1"],
-    position: "relative",
   },
   tab: {
+    padding: {
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`,
+      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`,
+    },
+    borderWidth: 0,
+    outline: "none",
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     color: {
       default: uiColor.text1,
       ":is([data-hovered],[data-focused],[data-selected])": uiColor.text2,
···
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
       ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
     justifyContent: "center",
     opacity: {
       default: 1,
       ":is([data-disabled])": 0.5,
-    },
-    outline: "none",
-    padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`,
-      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`,
     },
     position: "relative",
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
   },
   selectionIndicator: {
     backgroundColor: "transparent",
+    position: "absolute",
+    transitionDuration: animationDuration.slow,
+    transitionProperty: {
+      default: "translate, width, height",
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    transitionTimingFunction: "ease-in-out",
     borderBottomColor: {
       default: "transparent",
       ":is([data-orientation=horizontal] > [data-selected] > *)":
···
       ":is([data-orientation=horizontal] *)": 0,
       ":is([data-orientation=vertical] *)": "unset",
     },
-    position: "absolute",
     right: {
       ":is([data-orientation=horizontal] *)": 0,
       ":is([data-orientation=vertical] *)": "0",
···
       ":is([data-orientation=horizontal] *)": "auto",
       ":is([data-orientation=vertical] *)": 0,
     },
-    transitionDuration: animationDuration.slow,
-    transitionProperty: {
-      default: "translate, width, height",
-      [mediaQueries.reducedMotion]: "none",
-    },
-    transitionTimingFunction: "ease-in-out",
     width: {
       ":is([data-orientation=horizontal] *)": "100%",
       ":is([data-orientation=vertical] *)": "auto",
     },
   },
   tabPanel: {
-    fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
-    },
-    outline: "none",
     padding: {
-      ":is([data-size=sm] *)": spacing["3"],
-      ":is([data-size=md] *)": spacing["4"],
       ":is([data-size=lg] *)": spacing["5"],
+      ":is([data-size=md] *)": spacing["4"],
+      ":is([data-size=sm] *)": spacing["3"],
+    },
+    outline: "none",
+    fontSize: {
+      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
   },
   focusRing: {

apps/docs/src/components/tag-group/index.tsx

···
 
 import { Description, ErrorMessage, Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   group: {
+    gap: spacing["2"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["2"],
   },
   list: {
     alignItems: "center",
···
     rowGap: spacing["2.5"],
   },
   tag: {
-    alignItems: "center",
-    backgroundColor: {
-      default: uiColor.component1,
-      ":is([data-hovered])": uiColor.component2,
-      ":is([data-pressed])": uiColor.component3,
-      ":is([data-selected])": primaryColor.component1,
-    },
     borderColor: {
       default: uiColor.border2,
       ":is([data-hovered])": uiColor.border3,
···
     borderRadius: radius.full,
     borderStyle: "solid",
     borderWidth: 1,
+    gap: spacing["1.5"],
+    alignItems: "center",
+    backgroundColor: {
+      default: uiColor.component1,
+      ":is([data-hovered])": uiColor.component2,
+      ":is([data-pressed])": uiColor.component3,
+      ":is([data-selected])": primaryColor.component1,
+    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered])": uiColor.text2,
···
     },
     cursor: "default",
     display: "flex",
-    gap: spacing["1.5"],
     justifyContent: "center",
     opacity: {
       ":is([data-disabled])": 0.5,
···
     paddingTop: spacing["1"],
   },
   removeButton: {
+    margin: 0,
+    padding: 0,
+    borderRadius: radius.full,
+    borderWidth: 0,
     alignItems: "center",
     backgroundColor: {
       default: "transparent",
       ":hover": uiColor.component2,
       ":active": uiColor.component3,
     },
-    borderRadius: radius.full,
-    borderWidth: 0,
     color: {
       default: uiColor.text1,
       ":hover": uiColor.text2,
     },
     display: "flex",
-    height: spacing["4"],
     justifyContent: "center",
-    margin: 0,
-    padding: 0,
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["4"],
     width: spacing["4"],
   },
 });

apps/docs/src/components/theme/media-queries.stylex.tsx

···
 import * as stylex from "@stylexjs/stylex";
 
-// eslint-disable-next-line @stylexjs/enforce-extension
-export const breakpoints = stylex.defineConsts({
-  sm: "@media (min-width: 40rem)",
-  md: "@media (min-width: 48rem)",
-  lg: "@media (min-width: 64rem)",
-  xl: "@media (min-width: 80rem)",
-  "2xl": "@media (min-width: 96rem)",
-});
-
-// eslint-disable-next-line @stylexjs/enforce-extension
 export const mediaQueries = stylex.defineConsts({
   reducedMotion: "@media (prefers-reduced-motion: reduce)",
   supportsSquircle: "@supports (corner-shape: squircle)",

apps/docs/src/components/theme/typography.stylex.tsx

···
 import * as stylex from "@stylexjs/stylex";
 
-import { breakpoints } from "./media-queries.stylex";
 import { spacing } from "./spacing.stylex";
 
 export const fontFamily = stylex.defineVars({
···
 });
 
 export const fontWeight = stylex.defineVars({
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900",
+  thin: stylex.types.number(100),
+  extralight: stylex.types.number(200),
+  light: stylex.types.number(300),
+  normal: stylex.types.number(400),
+  medium: stylex.types.number(500),
+  semibold: stylex.types.number(600),
+  bold: stylex.types.number(700),
+  extrabold: stylex.types.number(800),
+  black: stylex.types.number(900),
 });
 
 export const fontSize = stylex.defineVars({
···
 // eslint-disable-next-line @stylexjs/enforce-extension
 export const typeramp = stylex.create({
   heading1: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: {
       default: fontSize["4xl"],
-      [breakpoints["md"]]: fontSize["5xl"],
+      "@media (min-width: 48rem)": fontSize["5xl"],
     },
     // eslint-disable-next-line @stylexjs/valid-styles
     fontWeight: fontWeight["extrabold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.base,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading2: {
-    borderBottomWidth: 1,
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: {
       default: fontSize["3xl"],
-      [breakpoints["md"]]: fontSize["4xl"],
+      "@media (min-width: 48rem)": fontSize["4xl"],
     },
     // eslint-disable-next-line @stylexjs/valid-styles
-    fontWeight: fontWeight["semibold"],
+    fontWeight: fontWeight.semibold,
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
+    borderBottomWidth: 1,
   },
   heading3: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["2xl"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading4: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["xl"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading5: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["lg"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   body: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["base"] },
     lineHeight: lineHeight.base,
-    margin: 0,
   },
   smallBody: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["sm"] },
     lineHeight: lineHeight.base,
-    margin: 0,
   },
   label: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["sm"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
   },
   sublabel: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["xs"] },
     // eslint-disable-next-line @stylexjs/valid-styles
     fontWeight: fontWeight["medium"],
     lineHeight: lineHeight.sm,
-    margin: 0,
   },
 });

apps/docs/src/components/theme/useButtonStyles.ts

···
     boxShadow: shadow["xs"],
   },
   base: {
-    alignItems: "center",
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["full"],
     },
-    cornerShape: "squircle",
     borderStyle: "solid",
     borderWidth: 1,
+    gap: spacing["1"],
+    alignItems: "center",
     boxSizing: "border-box",
     display: "inline-flex",
     flexShrink: 0,
     fontFamily: fontFamily["sans"],
     fontWeight: fontWeight["medium"],
-    gap: spacing["1"],
     justifyContent: "center",
     opacity: {
       ":disabled": 0.5,
···
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   small: {
     fontSize: fontSize["xs"],
-    height: spacing["7"],
     lineHeight: lineHeight["xs"],
+    height: spacing["7"],
     paddingLeft: {
       default: spacing["2"],
     },
···
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["3.5"],
       pointerEvents: "none",
+      height: spacing["3.5"],
       width: spacing["3.5"],
     },
   },
   medium: {
-    fontSize: fontSize["sm"],
     gap: spacing["1.5"],
-    height: spacing["8"],
+    fontSize: fontSize["sm"],
     lineHeight: lineHeight["xs"],
+    height: spacing["8"],
     paddingLeft: {
       default: spacing["3"],
       ":has(svg+*)": spacing["2.5"],

apps/docs/src/components/theme/useCalendarStyles.ts

···
 
 const styles = stylex.create({
   cell: {
+    padding: spacing["1"],
     borderRadius: radius.md,
+    textDecoration: {
+      ":is([data-unavailable])": "line-through",
+    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
···
     opacity: {
       ":is([data-outside-visible-range],[data-unavailable])": 0.5,
     },
-    padding: spacing["1"],
     position: "relative",
     textAlign: "center",
-    textDecoration: {
-      ":is([data-unavailable])": "line-through",
-    },
     transitionDuration: animationDuration.fast,
     transitionProperty: "color",
     transitionTimingFunction: "ease-in-out",
+    zIndex: 0,
     width: spacing["8"],
-    zIndex: 0,
 
     "::before": {
+      inset: spacing["1"],
       content: "''",
-      inset: spacing["1"],
       position: "absolute",
       transitionDuration: animationDuration.fast,
       transitionProperty: "background-color",
···
     },
   },
   nonRangeCell: {
+    borderRadius: {
+      "::before": radius.md,
+    },
     backgroundColor: {
       ":is(*)::before": "transparent",
       ":is([data-hovered]):not([data-unavailable])::before": uiColor.component2,
···
       ":is([data-selected]):not([data-unavailable]):hover::before":
         primaryColor.component3,
     },
-    borderRadius: {
-      "::before": radius.md,
-    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
···
       ":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
         primaryColor.component3,
     },
+    color: {
+      default: uiColor.text1,
+      ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
+      ":is([data-selection-start],[data-selection-end])": primaryColor.text2,
+    },
     borderBottomLeftRadius: {
       ":is([data-selection-start],td:first-child > *)::before": radius.md,
     },
···
     borderTopRightRadius: {
       ":is([data-selection-end],td:last-child > *)::before": radius.md,
     },
-    color: {
-      default: uiColor.text1,
-      ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
-      ":is([data-selection-start],[data-selection-end])": primaryColor.text2,
-    },
     marginLeft: {
       ":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`,
     },
···
   headerCell: {
     fontSize: fontSize["sm"],
     fontWeight: fontWeight["medium"],
-    paddingBottom: spacing["1"],
     textAlign: "center",
+    paddingBottom: spacing["1"],
   },
   heading: {
+    margin: 0,
     fontSize: fontSize["lg"],
     fontWeight: fontWeight["semibold"],
-    margin: 0,
     textAlign: "center",
   },
   grid: {
     borderCollapse: "collapse",
   },
   wrapper: {
+    gap: spacing["3"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["3"],
   },
 });
 

apps/docs/src/components/theme/useDialogStyles.ts

···
 
 const styles = stylex.create({
   overlay: {
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    height: "var(--page-height)",
-    left: 0,
-    position: "absolute",
-    top: 0,
-    width: "100vw",
-    zIndex: 100,
-
     animationDuration: animationDuration.slow,
     animationName: {
       ":is([data-entering])": animations.fadeIn,
     },
     animationTimingFunction: "ease-in",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
     opacity: {
       default: 1,
       ":is([data-exiting])": 0,
     },
+    position: "absolute",
     transitionDuration: {
       ":is([data-exiting])": animationDuration.fast,
     },
     transitionProperty: "opacity",
     transitionTimingFunction: "ease-in-out",
+    zIndex: 100,
+    height: "var(--page-height)",
+    left: 0,
+    top: 0,
+    width: "100vw",
   },
   modal: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["lg"],
       "@supports (corner-shape: squircle)": radius["4xl"],
     },
-    cornerShape: "squircle",
+    outline: "none",
     boxShadow: shadow["lg"],
     display: "flex",
     flexDirection: "column",
+    position: "fixed",
+    translate: "-50% -50%",
     left: "50%",
     maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
-    outline: "none",
-    position: "fixed",
     top: "calc(var(--visual-viewport-height) / 2)",
-    translate: "-50% -50%",
 
     animationDuration: { ":is([data-entering])": "300ms" },
     animationName: { ":is([data-entering])": animations.zoomIn },
···
     },
   },
   dialog: {
+    outline: "none",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     minHeight: 0,
-    outline: "none",
   },
   size: (size: Size) => ({
     width: size === "sm" ? 400 : size === "md" ? 600 : 800,

apps/docs/src/components/theme/useInputStyles.ts

···
 
 const styles = stylex.create({
   field: {
+    gap: spacing["2"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["2"],
   },
   addon: {
     color: ui.textDim,
···
     minWidth: spacing["8"],
     paddingLeft: { ":first-child": spacing["0.5"] },
     paddingRight: {
-      ":last-child": spacing["2"],
       ":last-child:has(svg)": spacing["0.5"],
+      ":last-child": spacing["2"],
     },
 
+    gap: spacing["0.5"],
     alignItems: "center",
     display: "flex",
-    gap: spacing["0.5"],
     justifyContent: "center",
 
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   inputWrapper: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    padding: 0,
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["3xl"],
     },
-    cornerShape: "squircle",
     borderWidth: 0,
+    overflow: "hidden",
     boxSizing: "border-box",
     display: "flex",
     lineHeight: lineHeight["none"],
-    overflow: "hidden",
-    padding: 0,
   },
   input: {
+    borderWidth: 0,
+    outline: "none",
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     boxSizing: "border-box",
     color: {
       ":is(::placeholder,[data-placeholder])": uiColor.text1,
···
     flexGrow: 1,
     lineHeight: lineHeight["none"],
     minWidth: 0,
-    outline: "none",
 
     appearance: {
       "::-webkit-search-cancel-button": "none",
···
   primary: {
     borderColor: {
       default: uiColor.border2,
-      ":has([data-hovered]:not([data-invalid])": uiColor.border3,
-      ":focus": uiColor.solid1,
+      ":has([data-hovered]):not([data-invalid])": uiColor.border3,
       ":has([data-invalid])": criticalColor.border2,
+      ":focus": uiColor.solid1,
     },
     borderStyle: "solid",
     borderWidth: 1,

apps/docs/src/components/theme/useListBoxItemStyles.ts

···
     display: "flex",
     userSelect: "none",
 
+    outline: {
+      default: "none",
+      ":focus": "none",
+    },
     boxSizing: "border-box",
     fontWeight: {
       default: fontWeight["normal"],
       [":is([data-react-aria-pressable=true][data-selected=true])"]:
         fontWeight["medium"],
-    },
-    outline: {
-      default: "none",
-      ":focus": "none",
     },
     paddingBottom: spacing["0.5"],
     paddingLeft: spacing["1"],
···
   md: { minHeight: spacing["9"] },
   lg: { minHeight: spacing["12"] },
   itemInner: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    borderRadius: {
+      default: radius["md"],
+      "@supports (corner-shape: squircle)": radius["3xl"],
+    },
+    gap: spacing["3"],
     alignItems: "center",
     backgroundColor: {
       default: "transparent",
···
       [":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
         uiColor.component3,
     },
-    borderRadius: {
-      default: radius["md"],
-      "@supports (corner-shape: squircle)": radius["3xl"],
-    },
-    cornerShape: "squircle",
     boxSizing: "border-box",
     color: {
       default: uiColor.text2,
···
     },
     display: "flex",
     flexGrow: 1,
-    gap: spacing["3"],
+    transitionDuration: animationDuration.fast,
+    transitionProperty: "background-color",
+    transitionTimingFunction: "ease-in-out",
     paddingBottom: spacing["2"],
     paddingLeft: spacing["3"],
     paddingRight: spacing["3"],
     paddingTop: spacing["2"],
-    transitionDuration: animationDuration.fast,
-    transitionProperty: "background-color",
-    transitionTimingFunction: "ease-in-out",
   },
   smItemInner: {
-    fontSize: fontSize["xs"],
     gap: spacing["2"],
+    fontSize: fontSize["xs"],
     lineHeight: lineHeight["xs"],
     paddingBottom: spacing["1"],
     paddingTop: spacing["1"],
···
     marginTop: `calc(${spacing["2"]} * -1)`,
     minWidth: spacing["4"],
 
-    // eslint-disa le-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
+    // eslint-disable-next-line @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   label: {
+    gap: spacing["1.5"],
     color: {
       [":is([data-variant=destructive] *)"]: criticalColor.text1,
     },
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
-    gap: spacing["1.5"],
   },
 });
 

apps/docs/src/components/theme/usePopoverStyles.ts

···
 
 const styles = stylex.create({
   popover: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["3xl"],
     },
-    cornerShape: "squircle",
-    boxShadow: shadow["md"],
     outline: "none",
     overflow: "auto",
+    boxShadow: shadow["md"],
   },
   animation: {
     "--origin-x": {
···
       ":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`,
     },
     "--origin-y": {
-      ":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
       ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`,
+      ":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
     },
     opacity: {
       ":is([data-entering], [data-entering] > *)": 0,

apps/docs/src/examples/dialog/basic.tsx

···
 import { Button } from "@/components/button";
-import { Dialog, DialogHeader, DialogFooter } from "@/components/dialog";
+import {
+  Dialog,
+  DialogHeader,
+  DialogFooter,
+  DialogBody,
+} from "@/components/dialog";
+import { spacing } from "@/components/theme/spacing.stylex";
 import { Body } from "@/components/typography";
+import * as stylex from "@stylexjs/stylex";
 
 export function Basic() {
   return (
     <Dialog trigger={<Button>Open Dialog</Button>}>
       <DialogHeader>Dialog Title</DialogHeader>
-      <Body>This is the dialog content. You can put any content here.</Body>
+      <DialogBody>
+        <Body>This is the dialog content. You can put any content here.</Body>
+      </DialogBody>
       <DialogFooter>
         <Button variant="secondary">Cancel</Button>
         <Button>Confirm</Button>

apps/docs/src/examples/foundations/color.tsx

···
 import { Grid } from "@/components/grid";
 
 import { Flex } from "../../components/flex";
-import { amber } from "../../components/theme/colors/amber.stylex";
-import { blue } from "../../components/theme/colors/blue.stylex";
-import { bronze } from "../../components/theme/colors/bronze.stylex";
-import { brown } from "../../components/theme/colors/brown.stylex";
-import { crimson } from "../../components/theme/colors/crimson.stylex";
-import { cyan } from "../../components/theme/colors/cyan.stylex";
-import { gold } from "../../components/theme/colors/gold.stylex";
-import { grass } from "../../components/theme/colors/grass.stylex";
-import { gray } from "../../components/theme/colors/gray.stylex";
+// import { amber } from "../../components/theme/colors/amber.stylex";
+// import { blue } from "../../components/theme/colors/blue.stylex";
+// import { bronze } from "../../components/theme/colors/bronze.stylex";
+// import { brown } from "../../components/theme/colors/brown.stylex";
+// import { crimson } from "../../components/theme/colors/crimson.stylex";
+// import { cyan } from "../../components/theme/colors/cyan.stylex";
+// import { gold } from "../../components/theme/colors/gold.stylex";
+// import { grass } from "../../components/theme/colors/grass.stylex";
+// import { gray } from "../../components/theme/colors/gray.stylex";
 import { green } from "../../components/theme/colors/green.stylex";
-import { indigo } from "../../components/theme/colors/indigo.stylex";
-import { iris } from "../../components/theme/colors/iris.stylex";
-import { jade } from "../../components/theme/colors/jade.stylex";
-import { lime } from "../../components/theme/colors/lime.stylex";
-import { mauve } from "../../components/theme/colors/mauve.stylex";
-import { mint } from "../../components/theme/colors/mint.stylex";
-import { olive } from "../../components/theme/colors/olive.stylex";
+// import { indigo } from "../../components/theme/colors/indigo.stylex";
+// import { iris } from "../../components/theme/colors/iris.stylex";
+// import { jade } from "../../components/theme/colors/jade.stylex";
+// import { lime } from "../../components/theme/colors/lime.stylex";
+// import { mauve } from "../../components/theme/colors/mauve.stylex";
+// import { mint } from "../../components/theme/colors/mint.stylex";
+// import { olive } from "../../components/theme/colors/olive.stylex";
 import { orange } from "../../components/theme/colors/orange.stylex";
-import { pink } from "../../components/theme/colors/pink.stylex";
-import { plum } from "../../components/theme/colors/plum.stylex";
-import { purple } from "../../components/theme/colors/purple.stylex";
+// import { pink } from "../../components/theme/colors/pink.stylex";
+// import { plum } from "../../components/theme/colors/plum.stylex";
+// import { purple } from "../../components/theme/colors/purple.stylex";
 import { red } from "../../components/theme/colors/red.stylex";
-import { ruby } from "../../components/theme/colors/ruby.stylex";
-import { sage } from "../../components/theme/colors/sage.stylex";
-import { sand } from "../../components/theme/colors/sand.stylex";
-import { sky } from "../../components/theme/colors/sky.stylex";
+// import { ruby } from "../../components/theme/colors/ruby.stylex";
+// import { sage } from "../../components/theme/colors/sage.stylex";
+// import { sand } from "../../components/theme/colors/sand.stylex";
+// import { sky } from "../../components/theme/colors/sky.stylex";
 import { slate } from "../../components/theme/colors/slate.stylex";
-import { teal } from "../../components/theme/colors/teal.stylex";
-import { tomato } from "../../components/theme/colors/tomato.stylex";
-import { violet } from "../../components/theme/colors/violet.stylex";
+// import { teal } from "../../components/theme/colors/teal.stylex";
+// import { tomato } from "../../components/theme/colors/tomato.stylex";
+// import { violet } from "../../components/theme/colors/violet.stylex";
 import { yellow } from "../../components/theme/colors/yellow.stylex";
 import { spacing } from "../../components/theme/spacing.stylex";
 import { Text } from "../../components/typography/text";
···
 });
 
 const grays = [
-  { name: "gray", value: gray },
-  { name: "mauve", value: mauve },
+  // { name: "gray", value: gray },
+  // { name: "mauve", value: mauve },
   { name: "slate", value: slate },
-  { name: "sage", value: sage },
-  { name: "olive", value: olive },
-  { name: "sand", value: sand },
+  // { name: "sage", value: sage },
+  // { name: "olive", value: olive },
+  // { name: "sand", value: sand },
 ];
 
 const uiColors = [
-  { name: "tomato", value: tomato },
+  // { name: "tomato", value: tomato },
   { name: "red", value: red },
-  { name: "ruby", value: ruby },
-  { name: "crimson", value: crimson },
-  { name: "pink", value: pink },
-  { name: "plum", value: plum },
-  { name: "purple", value: purple },
-  { name: "violet", value: violet },
-  { name: "iris", value: iris },
-  { name: "indigo", value: indigo },
-  { name: "blue", value: blue },
-  { name: "cyan", value: cyan },
-  { name: "teal", value: teal },
-  { name: "jade", value: jade },
+  // { name: "ruby", value: ruby },
+  // { name: "crimson", value: crimson },
+  // { name: "pink", value: pink },
+  // { name: "plum", value: plum },
+  // { name: "purple", value: purple },
+  // { name: "violet", value: violet },
+  // { name: "iris", value: iris },
+  // { name: "indigo", value: indigo },
+  // { name: "blue", value: blue },
+  // { name: "cyan", value: cyan },
+  // { name: "teal", value: teal },
+  // { name: "jade", value: jade },
   { name: "green", value: green },
-  { name: "grass", value: grass },
-  { name: "bronze", value: bronze },
-  { name: "gold", value: gold },
-  { name: "brown", value: brown },
+  // { name: "grass", value: grass },
+  // { name: "bronze", value: bronze },
+  // { name: "gold", value: gold },
+  // { name: "brown", value: brown },
   { name: "orange", value: orange },
-  { name: "amber", value: amber },
+  // { name: "amber", value: amber },
   { name: "yellow", value: yellow },
-  { name: "lime", value: lime },
-  { name: "mint", value: mint },
-  { name: "sky", value: sky },
+  // { name: "lime", value: lime },
+  // { name: "mint", value: mint },
+  // { name: "sky", value: sky },
 ];
 
 export function GrayColors() {

apps/docs/src/lib/TableOfContents.tsx

···
 import * as stylex from "@stylexjs/stylex";
 import { createContext, use, useEffect, useState } from "react";
 
-import { Flex } from "@/components/flex";
-
 import { animationDuration } from "../components/theme/animations.stylex";
-import { mediaQueries } from "../components/theme/media-queries.stylex";
 import {
   primaryColor,
   uiColor,
···
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "color, border-left-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
 

apps/docs/src/routes/__root.tsx

···
+import "@/styles/styles.css";
+
 import * as stylex from "@stylexjs/stylex";
 import { TanStackDevtools } from "@tanstack/react-devtools";
 import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 
 import { ui } from "@/components/theme/semantic-color.stylex";
+
+if (import.meta.env.DEV) {
+  import("virtual:stylex:runtime");
+}
 
 const styles = stylex.create({
   body: {
···
         rel: "stylesheet",
         href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
       },
-    ],
+      import.meta.env.DEV
+        ? {
+            rel: "stylesheet",
+            href: "/virtual:stylex.css",
+          }
+        : null,
+    ].filter((i): i is NonNullable<typeof i> => i !== null),
   }),
 
   shellComponent: RootDocument,
···
       <head>
         <HeadContent />
       </head>
-      <script>{`
-        const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
-
-        if (localtColorScheme) {
-          document.body.style.colorScheme = localtColorScheme;
-        }
-      `}</script>
       <body {...stylex.props(ui.bg, ui.text, styles.body)}>
+        <script>{`
+          const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
+
+          if (localtColorScheme) {
+            document.body.style.colorScheme = localtColorScheme;
+          }
+        `}</script>
         {children}
         <TanStackDevtools
           config={{

apps/docs/src/routes/docs.$.tsx

···
 import { TableOfContents } from "@/lib/TableOfContents";
 
 import { animationDuration } from "../components/theme/animations.stylex";
-import { mediaQueries } from "../components/theme/media-queries.stylex";
 import { radius } from "../components/theme/radius.stylex";
 import { uiColor } from "../components/theme/semantic-color.stylex";
 import { spacing } from "../components/theme/spacing.stylex";
···
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "opacity",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
   },
···
   component: RouteComponent,
   loader: async ({ location }) => {
     return {
-      toc: await modules[location.pathname].then((mod) => mod.toc),
+      toc: await modules[location.pathname]?.then((mod) => mod.toc),
     };
   },
 });
···
           <Content components={components} />
         </Suspense>
       </div>
-      <TableOfContents toc={toc} />
+      {toc && <TableOfContents toc={toc} />}
     </Grid>
   );
 }

apps/docs/src/types/virtual.d.ts

···
 declare module "virtual:examples" {
   export const examples: Record<string, string>;
 }
+
+declare module "virtual:stylex:runtime" {
+  // Side-effect only module for StyleX runtime in development
+}

apps/docs/stylex.css

···
+@property --x-boxShadow { syntax: "*"; inherits: false;}
+@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
+@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
+@property --x-gridColumnStart { syntax: "*"; inherits: false;}
+@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
+@property --x-gridRowStart { syntax: "*"; inherits: false;}
+@property --x-gridRowEnd { syntax: "*"; inherits: false;}
+@property --x-aspectRatio { syntax: "*"; inherits: false;}
+@property --x-width { syntax: "*"; inherits: false;}
+@property --x---items-per-row { syntax: "*"; inherits: false;}
+@property --x-fontSize { syntax: "*"; inherits: false;}
+@property --x-1gfbyet { syntax: "*"; inherits: false;}
+@property --x-paddingRight { syntax: "*"; inherits: false;}
+@property --x-height { syntax: "*"; inherits: false;}
+@property --x-transform { syntax: "*"; inherits: false;}
+@property --x-paddingLeft { syntax: "*"; inherits: false;}
+@property --thin-xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 }
+@property --extralight-x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 }
+@property --light-x1xrohu8 { syntax: "<number>"; inherits: true; initial-value: 300 }
+@property --normal-xi6lnv8 { syntax: "<number>"; inherits: true; initial-value: 400 }
+@property --medium-x1tobmye { syntax: "<number>"; inherits: true; initial-value: 500 }
+@property --semibold-x1vekvjh { syntax: "<number>"; inherits: true; initial-value: 600 }
+@property --bold-x1nz9syw { syntax: "<number>"; inherits: true; initial-value: 700 }
+@property --extrabold-x70wtui { syntax: "<number>"; inherits: true; initial-value: 800 }
+@property --black-xdj5g3 { syntax: "<number>"; inherits: true; initial-value: 900 }
+@keyframes x1wc8ddo-B{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
+@keyframes x1yo5mx1-B{0%{transform:translate(-50%,-50%) scale(0);}100%{transform:translate(-50%,-50%) scale(1);}}
+@keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}}
+@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
+:root, .x15x7s49{--_0-xcffliq:0px;--_1-x1plbop:0.25rem;--_2-xsow7ju:0.5rem;--_3-x1a1riub:0.75rem;--_4-xgvn2um:1rem;--_5-x1pn3ufh:1.25rem;--_6-x109877l:1.5rem;--_7-x3ogwq2:1.75rem;--_8-x1do95gr:2rem;--_9-x58vtwt:2.25rem;--_10-xyoqvup:2.5rem;--_11-x11x3va4:2.75rem;--_12-xaxip2l:3rem;--_14-x18pvp2c:3.5rem;--_16-xnqsi2d:4rem;--_20-xbgtkw8:5rem;--_24-x8uq83j:6rem;--_28-x3c8utc:7rem;--_32-xxeew7j:8rem;--_36-x9ro48l:9rem;--_40-xlhyjhi:10rem;--_44-x4oqk9o:11rem;--_48-xc3zl6e:12rem;--_52-x66e183:13rem;--_56-x1k96jyh:14rem;--_60-xf930e:15rem;--_64-xhz114r:16rem;--_72-xgbkc4t:18rem;--_80-x12r4f45:20rem;--_96-x1mf07nc:24rem;--px-x1rrl3u8:1px;--_0_5-x1bnlq1y:0.125rem;--_1_5-x1llymyc:0.375rem;--_2_5-xmuc480:0.625rem;--_3_5-x1gotxl7:0.875rem;}
+:root, .x1rvy3a9{--_2xs-x1xzzr5o:0 1px rgb(0 0 0 / 0.05);--xs-x1e2w8h4:0 1px 2px 0 rgb(0 0 0 / 0.05);--sm-xeboudq:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--md-xf59ov0:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--lg-xgilsvr:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--xl-x1azhb21:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--_2xl-x1nhun0f:0 25px 50px -12px rgb(0 0 0 / 0.25);--none-xgllz1r:0 0 #0000;--inset-xe4eu4o:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetSm-xio3qbh:inset 0 0 4px 0 rgb(0 0 0 / 0.05);--insetMd-xx48ebj:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetLg-x19q2zjg:inset 0 0 8px 0 rgb(0 0 0 / 0.15);}
+:root, .x1vqb0uf{--bg-x11hz5ne:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-xk6jaqm:light-dark(#f9f9fb, #f9f9fb);--component1-x14nyoj8:light-dark(#f0f0f3, #f0f0f3);--component2-xx984p:light-dark(#e8e8ec, #e8e8ec);--component3-x1frjuvu:light-dark(#e0e1e6, #e0e1e6);--border1-x1xf4476:light-dark(#d9d9e0, #d9d9e0);--border2-x10iw3tt:light-dark(#cdced6, #cdced6);--border3-xq0e6t4:light-dark(#b9bbc6, #b9bbc6);--solid1-x1rohqqu:light-dark(#8b8d98, #8b8d98);--solid2-x27t3df:light-dark(#80838d, #80838d);--text1-x1340um9:light-dark(#60646c, #60646c);--text2-x19kn33k:light-dark(#1c2024, #1c2024);}
+:root, .x192maez{--bg-x151sc8w:var(--bg-x1gphzf2);--bgSubtle-x8mr634:var(--bgSubtle-x1jplh2x);--component1-x1rae15s:var(--component1-xrknle9);--component2-x1a2uij6:var(--component2-x12ntf8);--component3-x1g6ykoq:var(--component3-x1qvqun4);--border1-xs1aqk6:var(--border1-xdv3dhm);--border2-xdphg4n:var(--border2-xwn3lmr);--border3-xy1d7zd:var(--border3-xwig6mx);--solid1-xdodexi:var(--solid1-xp35zam);--solid2-xzgmc89:var(--solid2-xi399qe);--text1-xccyl1g:var(--text1-x1blb29e);--text2-x8ycaw:var(--text2-xx3kex6);--textContrast-xxxqvdi:white;}
+:root, .xxwjb7h{--bg-x175608s:var(--bg-xyifsjz);--bgSubtle-x1y9leuq:var(--bgSubtle-x2tkz45);--component1-x1sghgg8:var(--component1-xaivliz);--component2-x124xhl6:var(--component2-xgxkwj6);--component3-x1ejz5cj:var(--component3-x3872c4);--border1-xm7eg2j:var(--border1-x51i60m);--border2-x1kmnglg:var(--border2-x1lnuyuh);--border3-x1afn5qd:var(--border3-xqf689p);--solid1-x2pkv20:var(--solid1-x1m6a25n);--solid2-x4985y2:var(--solid2-x1o05zwi);--text1-xjn2lxg:var(--text1-x3r7y46);--text2-x1drysnq:var(--text2-x11v4dhp);--textContrast-x116zh0m:white;}
+:root, .x1nacpgj{--bg-x18rimo7:light-dark(#00c04004, #00de4505);--bgSubtle-x1qpayca:light-dark(#00a32f0b, #29f99d0b);--component1-xkt0b0i:light-dark(#00a43319, #22ff991e);--component2-x13zpfk5:light-dark(#00a83829, #11ff992d);--component3-x3c1f4h:light-dark(#019c393b, #2bffa23c);--border1-xmsez:light-dark(#00963c52, #44ffaa4b);--border2-x6ry4fz:light-dark(#00914071, #50fdac5e);--border3-x1xr1aty:light-dark(#00924ba4, #54ffad73);--solid1-xtnx0yx:light-dark(#008f4acf, #44ffa49e);--solid2-x1vqfbnw:light-dark(#008647d4, #43fea4ab);--text1-xkuh3uh:light-dark(#00713fde, #46fea5d4);--text2-x1i4rdgx:light-dark(#002616e6, #bbffd7f0);}
+:root, .x1ghv51{--bg-x1gphzf2:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-x1jplh2x:light-dark(#f9f9fb, #f9f9fb);--component1-xrknle9:light-dark(#f0f0f3, #f0f0f3);--component2-x12ntf8:light-dark(#e8e8ec, #e8e8ec);--component3-x1qvqun4:light-dark(#e0e1e6, #e0e1e6);--border1-xdv3dhm:light-dark(#d9d9e0, #d9d9e0);--border2-xwn3lmr:light-dark(#cdced6, #cdced6);--border3-xwig6mx:light-dark(#b9bbc6, #b9bbc6);--solid1-xp35zam:light-dark(#8b8d98, #8b8d98);--solid2-xi399qe:light-dark(#80838d, #80838d);--text1-x1blb29e:light-dark(#60646c, #60646c);--text2-xx3kex6:light-dark(#1c2024, #1c2024);}
+:root, .x1hdqnv5{--bg-x1jmar6b:var(--bg-x6re758);--bgSubtle-xvpzc41:var(--bgSubtle-x415v6g);--component1-x1gg3jrv:var(--component1-xp4d679);--component2-x1q29jlu:var(--component2-xk9ahtj);--component3-x3nfkm8:var(--component3-x4u0l1k);--border1-xdz3kzl:var(--border1-x1rbpmds);--border2-x7rqvo0:var(--border2-xfem4zx);--border3-x16mdiod:var(--border3-x1hu3pnx);--solid1-xnhvmlu:var(--solid1-x162hmff);--solid2-xlw47ga:var(--solid2-x1dlve8z);--text1-x1pj8xh0:var(--text1-x13j7ndk);--text2-xcv02bb:var(--text2-xpa4mfl);--textContrast-x1gt1e58:black;}
+:root, .x1eqhwi5{--bg-x1l89o2a:light-dark(#fbfefc, #fbfefc);--bgSubtle-xlq589s:light-dark(#f4fbf6, #f4fbf6);--component1-xoam46d:light-dark(#e6f6eb, #e6f6eb);--component2-xptpg9x:light-dark(#d6f1df, #d6f1df);--component3-x1bpgk6h:light-dark(#c4e8d1, #c4e8d1);--border1-x1m6eoqc:light-dark(#adddc0, #adddc0);--border2-x1s07flx:light-dark(#8eceaa, #8eceaa);--border3-x3z2k3q:light-dark(#5bb98b, #5bb98b);--solid1-x10d61hv:light-dark(#30a46c, #30a46c);--solid2-x1ks7zzp:light-dark(#2b9a66, #2b9a66);--text1-x1hos2s0:light-dark(#218358, #218358);--text2-xasqimf:light-dark(#193b2d, #193b2d);}
+:root, .x1jciiue{--bg-x1oix42s:var(--bg-x1l89o2a);--bgSubtle-x1eogh41:var(--bgSubtle-xlq589s);--component1-x1ui28u3:var(--component1-xoam46d);--component2-x1hhltqf:var(--component2-xptpg9x);--component3-x3irpq9:var(--component3-x1bpgk6h);--border1-x46gdic:var(--border1-x1m6eoqc);--border2-x1k67xy2:var(--border2-x1s07flx);--border3-x1kngkfb:var(--border3-x3z2k3q);--solid1-xmemhk6:var(--solid1-x10d61hv);--solid2-x1dbywqs:var(--solid2-x1ks7zzp);--text1-x253p4m:var(--text1-x1hos2s0);--text2-x1ew83cn:var(--text2-xasqimf);--textContrast-x1xz901g:white;}
+:root, .x1lw1t95{--bg-x1rxyl4a:var(--bg-x1sw4zc8);--bgSubtle-xmjz13d:var(--bgSubtle-x16ilu94);--component1-x43o0oh:var(--component1-xeaj9e7);--component2-xzjwbwe:var(--component2-x8ir5ts);--component3-xvwaia1:var(--component3-xdklm5y);--border1-x1d0hf4b:var(--border1-x6y5na3);--border2-x130p4o0:var(--border2-x9cla9k);--border3-x1lhdl2z:var(--border3-x1g5crwn);--solid1-x6o1eyi:var(--solid1-x1jiy1i7);--solid2-x1rgzn25:var(--solid2-x1lcgbx5);--text1-xc56m6b:var(--text1-x1g3lydx);--text2-x6gkmtf:var(--text2-x649ojl);--textContrast-xmd31bd:white;}
+:root, .x1tahuoi{--bg-x1sw4zc8:light-dark(#fefcfb, #fefcfb);--bgSubtle-x16ilu94:light-dark(#fff7ed, #fff7ed);--component1-xeaj9e7:light-dark(#ffefd6, #ffefd6);--component2-x8ir5ts:light-dark(#ffdfb5, #ffdfb5);--component3-xdklm5y:light-dark(#ffd19a, #ffd19a);--border1-x6y5na3:light-dark(#ffc182, #ffc182);--border2-x9cla9k:light-dark(#f5ae73, #f5ae73);--border3-x1g5crwn:light-dark(#ec9455, #ec9455);--solid1-x1jiy1i7:light-dark(#f76b15, #f76b15);--solid2-x1lcgbx5:light-dark(#ef5f00, #ef5f00);--text1-x1g3lydx:light-dark(#cc4e00, #cc4e00);--text2-x649ojl:light-dark(#582d1d, #582d1d);}
+:root, .xyxmmhb{--bg-x6qb2y7:light-dark(#00000000, #00005503);--bgSubtle-xz52aqz:light-dark(#d8f4f609, #00005506);--component1-x1ootxdk:light-dark(#ddeaf814, #0000330f);--component2-x1x5bo14:light-dark(#d3edf81d, #00002d17);--component3-x8x5exd:light-dark(#d9edfe25, #0009321f);--border1-xl5c3qb:light-dark(#d6ebfd30, #00002f26);--border2-x1snns10:light-dark(#d9edff40, #00062e32);--border3-x1b5487t:light-dark(#d9edff5d, #00083046);--solid1-xw7lcsf:light-dark(#dfebfd6d, #00051d74);--solid2-x1vuts7a:light-dark(#e5edfd7b, #00071b7f);--text1-x1qacqzu:light-dark(#f1f7feb5, #0007149f);--text2-x7xxkp7:light-dark(#fcfdffef, #000509e3);}
+:root, .x9qo77k{--bg-x6re758:light-dark(#fdfdf9, #fdfdf9);--bgSubtle-x415v6g:light-dark(#fefce9, #fefce9);--component1-xp4d679:light-dark(#fffab8, #fffab8);--component2-xk9ahtj:light-dark(#fff394, #fff394);--component3-x4u0l1k:light-dark(#ffe770, #ffe770);--border1-x1rbpmds:light-dark(#f3d768, #f3d768);--border2-xfem4zx:light-dark(#e4c767, #e4c767);--border3-x1hu3pnx:light-dark(#d5ae39, #d5ae39);--solid1-x162hmff:light-dark(#ffe629, #ffe629);--solid2-x1dlve8z:light-dark(#ffdc00, #ffdc00);--text1-x13j7ndk:light-dark(#9e6c00, #9e6c00);--text2-xpa4mfl:light-dark(#473b1f, #473b1f);}
+:root, .xxq1yzn{--bg-xa4n1ix:light-dark(#ff000003, #f4121209);--bgSubtle-xjwgibg:light-dark(#ff000008, #f22f3e11);--component1-x18qyhc9:light-dark(#f3000d14, #ff173f2d);--component2-x1532e8q:light-dark(#ff000824, #fe0a3b44);--component3-x1pajzzf:light-dark(#ff000632, #ff204756);--border1-xovqzn1:light-dark(#f8000442, #ff3e5668);--border2-xphtnsk:light-dark(#df000356, #ff536184);--border3-x16n4bma:light-dark(#d2000571, #ff5d61b0);--solid1-x1iik73w:light-dark(#db0007b7, #fe4e54e4);--solid2-x1j1wfyr:light-dark(#d10005c1, #ff6465eb);--text1-x8esa8k:light-dark(#c40006d3, #ff9592);--text2-x1bvq9d8:light-dark(#55000de8, #ffd1d9);}
+:root, .x4hfvnt{--bg-xde63gs:light-dark(#c0400004, #ec360007);--bgSubtle-x1jdsv4g:light-dark(#ff8e0012, #fe6d000e);--component1-xxoq9mm:light-dark(#ff9c0029, #fb6a0025);--component2-x1os2gnc:light-dark(#ff91014a, #ff590039);--component3-x1becyrv:light-dark(#ff8b0065, #ff61004a);--border1-xb79avr:light-dark(#ff81007d, #fd75045c);--border2-xq7p22b:light-dark(#ed6c008c, #ff832c75);--border3-x1jpklpn:light-dark(#e35f00aa, #fe84389d);--solid1-x1uqiz8q:light-dark(#f65e00ea, #fe6d15f7);--solid2-x1f48cqm:light-dark(#ef5f00, #ff801f);--text1-xqn6ccr:light-dark(#cc4e00, #ffa057);--text2-x143oi4e:light-dark(#431200e2, #ffe0c2);}
+:root, .x1sicsqz{--bg-xl687un:var(--bg-x11hz5ne);--bgSubtle-xi821rj:var(--bgSubtle-xk6jaqm);--component1-x11poo5x:var(--component1-x14nyoj8);--component2-x18xhj12:var(--component2-xx984p);--component3-x1isc7sq:var(--component3-x1frjuvu);--border1-x1en7ut4:var(--border1-x1xf4476);--border2-xavwyw3:var(--border2-x10iw3tt);--border3-xm42ywm:var(--border3-xq0e6t4);--solid1-x1yanih7:var(--solid1-x1rohqqu);--solid2-x1ba3nh8:var(--solid2-x27t3df);--text1-xb5nrd9:var(--text1-x1340um9);--text2-x1ztxw:var(--text2-x19kn33k);--textContrast-xk9atbi:white;}
+:root, .xv3w7a0{--bg-xo9m2b4:light-dark(#aaaa0006, #d1510004);--bgSubtle-xpnscu7:light-dark(#f4dd0016, #f9b4000b);--component1-xq65tlw:light-dark(#ffee0047, #ffaa001e);--component2-x1ujsea2:light-dark(#ffe3016b, #fdb70028);--component3-x1njakr4:light-dark(#ffd5008f, #febb0036);--border1-xgpgkv2:light-dark(#ebbc0097, #fec40046);--border2-xfy5k6m:light-dark(#d2a10098, #fdcb225c);--border3-x1bakgjo:light-dark(#c99700c6, #fdca327b);--solid1-xffo9u0:light-dark(#ffe100d6, #ffe629);--solid2-x10kpuhz:light-dark(#ffdc00, #ffff57);--text1-x1arwxzo:light-dark(#9e6c00, #fee949f5);--text2-x1330fsk:light-dark(#2e2000e0, #fef6baf6);}
+:root, .x1qw93q1{--bg-xvz4l1d:light-dark(#00005503, #00000000);--bgSubtle-x11wv3u2:light-dark(#00005506, #d8f4f609);--component1-xq1n77x:light-dark(#0000330f, #ddeaf814);--component2-x1pcqosl:light-dark(#00002d17, #d3edf81d);--component3-x2i1291:light-dark(#0009321f, #d9edfe25);--border1-xqh3mvu:light-dark(#00002f26, #d6ebfd30);--border2-xk8cw7k:light-dark(#00062e32, #d9edff40);--border3-x1aygav0:light-dark(#00083046, #d9edff5d);--solid1-xxfkrpm:light-dark(#00051d74, #dfebfd6d);--solid2-x1u1gfxn:light-dark(#00071b7f, #e5edfd7b);--text1-ximjy2m:light-dark(#0007149f, #f1f7feb5);--text2-x1tsbbhh:light-dark(#000509e3, #fcfdffef);}
+:root, .x1dct8vy{--bg-xyifsjz:light-dark(#fffcfc, #fffcfc);--bgSubtle-x2tkz45:light-dark(#fff7f7, #fff7f7);--component1-xaivliz:light-dark(#feebec, #feebec);--component2-xgxkwj6:light-dark(#ffdbdc, #ffdbdc);--component3-x3872c4:light-dark(#ffcdce, #ffcdce);--border1-x51i60m:light-dark(#fdbdbe, #fdbdbe);--border2-x1lnuyuh:light-dark(#f4a9aa, #f4a9aa);--border3-xqf689p:light-dark(#eb8e90, #eb8e90);--solid1-x1m6a25n:light-dark(#e5484d, #e5484d);--solid2-x1o05zwi:light-dark(#dc3e42, #dc3e42);--text1-x3r7y46:light-dark(#ce2c31, #ce2c31);--text2-x11v4dhp:light-dark(#641723, #641723);}
+:root, .x10ailbr{--none-x7rich4:1;--xs-xg4a8ug:0.8;--sm-x4pl0dv:1.25;--base-x17a3wz2:1.75;--lg-x1nt92rq:2;--xl-xyq6gpo:2.5;--_2xl-xnhvph2:3;--_3xl-x11fa68j:3.5;}
+:root, .x1hwhxn{--sans-x1htm3rl:'Inter', sans-serif;--serif-x9eavc5:Georgia, serif;--mono-x1tvxhun:Monaco, monospace;}
+:root, .xzy7lqw{--thin-xk6k0je:100;--extralight-x12edb6v:200;--light-x1xrohu8:300;--normal-xi6lnv8:400;--medium-x1tobmye:500;--semibold-x1vekvjh:600;--bold-x1nz9syw:700;--extrabold-x70wtui:800;--black-xdj5g3:900;}
+:root, .x668sbw{--tighter-x1x2i330:-0.05em;--tight-x18yt8gk:-0.025em;--normal-xb40a8v:0em;--wide-x143nt7w:0.025em;--wider-x1v3fezh:0.05em;--widest-xihocmh:0.1em;}
+:root, .x1ea6woo{--xs-x1vaen13:0.75rem;--sm-x1w27pzf:0.85rem;--base-xidomu0:1rem;--lg-x1hevvyd:1.125rem;--xl-x1vzl7l6:1.25rem;--_2xl-xq985z6:1.5rem;--_3xl-x1lstm7v:1.875rem;--_4xl-x4z03mz:2.25rem;--_5xl-x17lnkj2:3rem;--_6xl-x1m2s84k:3.75rem;--_7xl-xir39hh:4.5rem;--_8xl-xt70kky:6rem;--_9xl-xpyewce:8rem;}
+:root, .x12296y5{--xs-x1y0v5dr:0.125rem;--sm-xp4zkua:0.25rem;--md-x1o51v3i:0.375rem;--lg-x1011bts:0.5rem;--xl-x195otgw:0.75rem;--_2xl-xzsum9y:1rem;--_3xl-x1bwjc12:1.5rem;--_4xl-x1okofp6:2rem;--full-xmpdjt5:calc(infinity * 1px);}
+@media (color-gamut: p3){:root, .x1vqb0uf{--bg-x11hz5ne:light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074));--bgSubtle-xk6jaqm:light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105));--component1-x14nyoj8:light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145));--component2-xx984p:light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176));--component3-x1frjuvu:light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206));--border1-x1xf4476:light-dark(color(display-p3 0.85 0.852 0.876), color(display-p3 0.215 0.226 0.244));--border2-x10iw3tt:light-dark(color(display-p3 0.805 0.808 0.838), color(display-p3 0.265 0.28 0.302));--border3-xq0e6t4:light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409));--solid1-x1rohqqu:light-dark(color(display-p3 0.547 0.553 0.592), color(display-p3 0.415 0.431 0.463));--solid2-x27t3df:light-dark(color(display-p3 0.503 0.512 0.549), color(display-p3 0.469 0.483 0.514));--text1-x1340um9:light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728));--text2-x19kn33k:light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94));}}
+@media (color-gamut: p3){:root, .x1nacpgj{--bg-x18rimo7:light-dark(color(display-p3 0.024 0.757 0.267 / 0.016), color(display-p3 0 0.992 0.298 / 0.017));--bgSubtle-x1qpayca:light-dark(color(display-p3 0.024 0.565 0.129 / 0.036), color(display-p3 0.341 0.98 0.616 / 0.043));--component1-xkt0b0i:light-dark(color(display-p3 0.012 0.596 0.145 / 0.087), color(display-p3 0.376 0.996 0.655 / 0.114));--component2-x13zpfk5:light-dark(color(display-p3 0.008 0.588 0.145 / 0.142), color(display-p3 0.341 0.996 0.635 / 0.173));--component3-x3c1f4h:light-dark(color(display-p3 0.004 0.541 0.157 / 0.204), color(display-p3 0.408 1 0.678 / 0.232));--border1-xmsez:light-dark(color(display-p3 0.004 0.518 0.157 / 0.283), color(display-p3 0.475 1 0.706 / 0.29));--border2-x6ry4fz:light-dark(color(display-p3 0.004 0.486 0.165 / 0.389), color(display-p3 0.514 1 0.706 / 0.362));--border3-x1xr1aty:light-dark(color(display-p3 0 0.478 0.2 / 0.55), color(display-p3 0.529 1 0.718 / 0.442));--solid1-xtnx0yx:light-dark(color(display-p3 0 0.455 0.165 / 0.667), color(display-p3 0.502 0.996 0.682 / 0.61));--solid2-x1vqfbnw:light-dark(color(display-p3 0 0.416 0.153 / 0.691), color(display-p3 0.506 1 0.682 / 0.66));--text1-xkuh3uh:light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));--text2-x1i4rdgx:light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807));}}
+@media (color-gamut: p3){:root, .x1ghv51{--bg-x1gphzf2:light-dark(color(display-p3 0.067 0.067 0.074), color(display-p3 0.988 0.988 0.992));--bgSubtle-x1jplh2x:light-dark(color(display-p3 0.095 0.098 0.105), color(display-p3 0.976 0.976 0.984));--component1-xrknle9:light-dark(color(display-p3 0.13 0.135 0.145), color(display-p3 0.94 0.941 0.953));--component2-x12ntf8:light-dark(color(display-p3 0.156 0.163 0.176), color(display-p3 0.908 0.909 0.925));--component3-x1qvqun4:light-dark(color(display-p3 0.183 0.191 0.206), color(display-p3 0.88 0.881 0.901));--border1-xdv3dhm:light-dark(color(display-p3 0.215 0.226 0.244), color(display-p3 0.85 0.852 0.876));--border2-xwn3lmr:light-dark(color(display-p3 0.265 0.28 0.302), color(display-p3 0.805 0.808 0.838));--border3-xwig6mx:light-dark(color(display-p3 0.357 0.381 0.409), color(display-p3 0.727 0.733 0.773));--solid1-xp35zam:light-dark(color(display-p3 0.415 0.431 0.463), color(display-p3 0.547 0.553 0.592));--solid2-xi399qe:light-dark(color(display-p3 0.469 0.483 0.514), color(display-p3 0.503 0.512 0.549));--text1-x1blb29e:light-dark(color(display-p3 0.692 0.704 0.728), color(display-p3 0.379 0.392 0.421));--text2-xx3kex6:light-dark(color(display-p3 0.93 0.933 0.94), color(display-p3 0.113 0.125 0.14));}}
+@media (color-gamut: p3){:root, .x1eqhwi5{--bg-x1l89o2a:light-dark(color(display-p3 0.986 0.996 0.989), color(display-p3 0.062 0.083 0.071));--bgSubtle-xlq589s:light-dark(color(display-p3 0.963 0.983 0.967), color(display-p3 0.079 0.106 0.09));--component1-xoam46d:light-dark(color(display-p3 0.913 0.964 0.925), color(display-p3 0.1 0.173 0.133));--component2-xptpg9x:light-dark(color(display-p3 0.859 0.94 0.879), color(display-p3 0.115 0.229 0.166));--component3-x1bpgk6h:light-dark(color(display-p3 0.796 0.907 0.826), color(display-p3 0.147 0.282 0.206));--border1-x1m6eoqc:light-dark(color(display-p3 0.718 0.863 0.761), color(display-p3 0.185 0.338 0.25));--border2-x1s07flx:light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298));--border3-x3z2k3q:light-dark(color(display-p3 0.451 0.715 0.559), color(display-p3 0.27 0.479 0.351));--solid1-x10d61hv:light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442));--solid2-x1ks7zzp:light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474));--text1-x1hos2s0:light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));--text2-xasqimf:light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807));}}
+@media (color-gamut: p3){:root, .x1tahuoi{--bg-x1sw4zc8:light-dark(color(display-p3 0.995 0.988 0.985), color(display-p3 0.088 0.07 0.057));--bgSubtle-x16ilu94:light-dark(color(display-p3 0.994 0.968 0.934), color(display-p3 0.113 0.089 0.061));--component1-xeaj9e7:light-dark(color(display-p3 0.989 0.938 0.85), color(display-p3 0.189 0.12 0.056));--component2-x8ir5ts:light-dark(color(display-p3 1 0.874 0.687), color(display-p3 0.262 0.132 0));--component3-xdklm5y:light-dark(color(display-p3 1 0.821 0.583), color(display-p3 0.315 0.168 0.016));--border1-x6y5na3:light-dark(color(display-p3 0.975 0.767 0.545), color(display-p3 0.376 0.219 0.088));--border2-x9cla9k:light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));--border3-x1g5crwn:light-dark(color(display-p3 0.877 0.597 0.379), color(display-p3 0.601 0.359 0.201));--solid1-x1jiy1i7:light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));--solid2-x1lcgbx5:light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));--text1-x1g3lydx:light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));--text2-x649ojl:light-dark(color(display-p3 0.323 0.185 0.127), color(display-p3 0.98 0.883 0.775));}}
+@media (color-gamut: p3){:root, .xyxmmhb{--bg-x6qb2y7:light-dark(color(display-p3 0 0 0 / 0), color(display-p3 0.024 0.024 0.349 / 0.012));--bgSubtle-xz52aqz:light-dark(color(display-p3 0.875 0.992 1 / 0.034), color(display-p3 0.024 0.024 0.349 / 0.024));--component1-x1ootxdk:light-dark(color(display-p3 0.882 0.933 0.992 / 0.077), color(display-p3 0.004 0.004 0.204 / 0.059));--component2-x1x5bo14:light-dark(color(display-p3 0.882 0.953 0.996 / 0.111), color(display-p3 0.012 0.012 0.184 / 0.091));--component3-x8x5exd:light-dark(color(display-p3 0.878 0.929 0.996 / 0.145), color(display-p3 0.004 0.039 0.2 / 0.122));--border1-xl5c3qb:light-dark(color(display-p3 0.882 0.949 0.996 / 0.183), color(display-p3 0.008 0.008 0.165 / 0.15));--border2-x1snns10:light-dark(color(display-p3 0.882 0.929 1 / 0.246), color(display-p3 0.008 0.027 0.184 / 0.197));--border3-x1b5487t:light-dark(color(display-p3 0.871 0.937 1 / 0.361), color(display-p3 0.004 0.031 0.176 / 0.275));--solid1-xw7lcsf:light-dark(color(display-p3 0.898 0.937 1 / 0.42), color(display-p3 0.004 0.02 0.106 / 0.455));--solid2-x1vuts7a:light-dark(color(display-p3 0.918 0.945 1 / 0.475), color(display-p3 0.004 0.027 0.098 / 0.499));--text1-x1qacqzu:light-dark(color(display-p3 0.949 0.969 0.996 / 0.708), color(display-p3 0 0.02 0.063 / 0.62));--text2-x7xxkp7:light-dark(color(display-p3 0.988 0.992 1 / 0.937), color(display-p3 0 0.012 0.031 / 0.887));}}
+@media (color-gamut: p3){:root, .x9qo77k{--bg-x6re758:light-dark(color(display-p3 0.992 0.992 0.978), color(display-p3 0.078 0.069 0.047));--bgSubtle-x415v6g:light-dark(color(display-p3 0.995 0.99 0.922), color(display-p3 0.103 0.094 0.063));--component1-xp4d679:light-dark(color(display-p3 0.997 0.982 0.749), color(display-p3 0.168 0.137 0.039));--component2-xk9ahtj:light-dark(color(display-p3 0.992 0.953 0.627), color(display-p3 0.209 0.169 0));--component3-x4u0l1k:light-dark(color(display-p3 0.984 0.91 0.51), color(display-p3 0.255 0.209 0));--border1-x1rbpmds:light-dark(color(display-p3 0.934 0.847 0.474), color(display-p3 0.31 0.261 0.07));--border2-xfem4zx:light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135));--border3-x1hu3pnx:light-dark(color(display-p3 0.811 0.689 0.313), color(display-p3 0.497 0.42 0.182));--solid1-x162hmff:light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22));--solid2-x1dlve8z:light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456));--text1-x13j7ndk:light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));--text2-xpa4mfl:light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731));}}
+@media (color-gamut: p3){:root, .xxq1yzn{--bg-xa4n1ix:light-dark(color(display-p3 0.675 0.024 0.024 / 0.012), color(display-p3 0.984 0.071 0.071 / 0.03));--bgSubtle-xjwgibg:light-dark(color(display-p3 0.863 0.024 0.024 / 0.028), color(display-p3 0.996 0.282 0.282 / 0.055));--component1-x18qyhc9:light-dark(color(display-p3 0.792 0.008 0.008 / 0.075), color(display-p3 1 0.169 0.271 / 0.156));--component2-x1532e8q:light-dark(color(display-p3 1 0.008 0.008 / 0.134), color(display-p3 1 0.118 0.267 / 0.236));--component3-x1pajzzf:light-dark(color(display-p3 0.918 0.008 0.008 / 0.189), color(display-p3 1 0.212 0.314 / 0.303));--border1-xovqzn1:light-dark(color(display-p3 0.831 0.02 0.004 / 0.251), color(display-p3 1 0.318 0.38 / 0.374));--border2-xphtnsk:light-dark(color(display-p3 0.741 0.016 0.004 / 0.33), color(display-p3 1 0.4 0.424 / 0.475));--border3-x16n4bma:light-dark(color(display-p3 0.698 0.012 0.004 / 0.428), color(display-p3 1 0.431 0.431 / 0.635));--solid1-x1iik73w:light-dark(color(display-p3 0.749 0.008 0 / 0.675), color(display-p3 1 0.388 0.384 / 0.82));--solid2-x1j1wfyr:light-dark(color(display-p3 0.714 0.012 0 / 0.714), color(display-p3 1 0.463 0.447 / 0.853));--text1-x8esa8k:light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));--text2-x1bvq9d8:light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852));}}
+@media (color-gamut: p3){:root, .x4hfvnt{--bg-xde63gs:light-dark(color(display-p3 0.757 0.267 0.024 / 0.016), color(display-p3 0.961 0.247 0 / 0.022));--bgSubtle-x1jdsv4g:light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));--component1-xxoq9mm:light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));--component2-x1os2gnc:light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));--component3-x1becyrv:light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));--border1-xb79avr:light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));--border2-xq7p22b:light-dark(color(display-p3 0.839 0.408 0 / 0.514), color(display-p3 1 0.569 0.251 / 0.429));--border3-x1jpklpn:light-dark(color(display-p3 0.804 0.349 0 / 0.62), color(display-p3 1 0.584 0.302 / 0.572));--solid1-x1uqiz8q:light-dark(color(display-p3 0.878 0.314 0 / 0.8), color(display-p3 1 0.494 0.216 / 0.895));--solid2-x1f48cqm:light-dark(color(display-p3 0.843 0.29 0 / 0.836), color(display-p3 1 0.522 0.235 / 0.979));--text1-xqn6ccr:light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));--text2-x143oi4e:light-dark(color(display-p3 0.323 0.185 0.127), color(display-p3 0.98 0.883 0.775));}}
+@media (color-gamut: p3){:root, .xv3w7a0{--bg-xo9m2b4:light-dark(color(display-p3 0.675 0.675 0.024 / 0.024), color(display-p3 0.973 0.369 0 / 0.013));--bgSubtle-xpnscu7:light-dark(color(display-p3 0.953 0.855 0.008 / 0.079), color(display-p3 0.996 0.792 0 / 0.038));--component1-xq65tlw:light-dark(color(display-p3 0.988 0.925 0.004 / 0.251), color(display-p3 0.996 0.71 0 / 0.11));--component2-x1ujsea2:light-dark(color(display-p3 0.98 0.875 0.004 / 0.373), color(display-p3 0.996 0.741 0 / 0.152));--component3-x1njakr4:light-dark(color(display-p3 0.969 0.816 0.004 / 0.491), color(display-p3 0.996 0.765 0 / 0.202));--border1-xgpgkv2:light-dark(color(display-p3 0.875 0.71 0 / 0.526), color(display-p3 0.996 0.816 0.082 / 0.261));--border2-xfy5k6m:light-dark(color(display-p3 0.769 0.604 0 / 0.542), color(display-p3 1 0.831 0.263 / 0.345));--border3-x1bakgjo:light-dark(color(display-p3 0.725 0.549 0 / 0.687), color(display-p3 1 0.831 0.314 / 0.463));--solid1-xffo9u0:light-dark(color(display-p3 1 0.898 0 / 0.781), color(display-p3 1 0.922 0.22));--solid2-x10kpuhz:light-dark(color(display-p3 0.969 0.812 0 / 0.71), color(display-p3 1 1 0.455));--text1-x1arwxzo:light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));--text2-x1330fsk:light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731));}}
+@media (color-gamut: p3){:root, .x1qw93q1{--bg-xvz4l1d:light-dark(color(display-p3 0.024 0.024 0.349 / 0.012), color(display-p3 0 0 0 / 0));--bgSubtle-x11wv3u2:light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));--component1-xq1n77x:light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));--component2-x1pcqosl:light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));--component3-x2i1291:light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));--border1-xqh3mvu:light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));--border2-xk8cw7k:light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));--border3-x1aygav0:light-dark(color(display-p3 0.004 0.031 0.176 / 0.275), color(display-p3 0.871 0.937 1 / 0.361));--solid1-xxfkrpm:light-dark(color(display-p3 0.004 0.02 0.106 / 0.455), color(display-p3 0.898 0.937 1 / 0.42));--solid2-x1u1gfxn:light-dark(color(display-p3 0.004 0.027 0.098 / 0.499), color(display-p3 0.918 0.945 1 / 0.475));--text1-ximjy2m:light-dark(color(display-p3 0 0.02 0.063 / 0.62), color(display-p3 0.949 0.969 0.996 / 0.708));--text2-x1tsbbhh:light-dark(color(display-p3 0 0.012 0.031 / 0.887), color(display-p3 0.988 0.992 1 / 0.937));}}
+@media (color-gamut: p3){:root, .x1dct8vy{--bg-xyifsjz:light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067));--bgSubtle-x2tkz45:light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079));--component1-xaivliz:light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099));--component2-xgxkwj6:light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113));--component3-x3872c4:light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142));--border1-x51i60m:light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183));--border2-x1lnuyuh:light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236));--border3-xqf689p:light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297));--solid1-x1m6a25n:light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324));--solid2-x1o05zwi:light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387));--text1-x3r7y46:light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55));--text2-x11v4dhp:light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852));}}
+.--items-per-row-x1bgwy09{--items-per-row:var(--x---items-per-row)}
+.--progress-border-width-x1b7fzij{--progress-border-width:var(--_1-x1plbop)}
+.--toggle-button-group-gap-xpqjrd2{--toggle-button-group-gap:var(--_2-xsow7ju)}
+.--card-gap-x1w9yjgu:is([data-card-size=sm]){--card-gap:var(--_2-xsow7ju)}
+.--card-gap-x1nabd30:is([data-card-size=md]){--card-gap:var(--_6-x109877l)}
+.--card-gap-x1l22kzu:is([data-card-size=lg]){--card-gap:var(--_9-x58vtwt)}
+.--card-x-padding-x2nykd4:is([data-card-size=sm]){--card-x-padding:var(--_2-xsow7ju)}
+.--card-x-padding-xyoqhrw:is([data-card-size=md]){--card-x-padding:var(--_6-x109877l)}
+.--card-x-padding-xeqfs28:is([data-card-size=lg]){--card-x-padding:var(--_9-x58vtwt)}
+.--card-y-padding-x1s63jwo:is([data-card-size=lg]){--card-y-padding:var(--_10-xyoqvup)}
+.--card-y-padding-xmmjuso:is([data-card-size=sm]){--card-y-padding:var(--_2-xsow7ju)}
+.--card-y-padding-x1d9o89m:is([data-card-size=md]){--card-y-padding:var(--_7-x3ogwq2)}
+.--origin-x-x1b8bcs2:is([data-placement=right],[data-placement=right] > *){--origin-x:calc(var(--_4-xgvn2um) * -1)}
+.--origin-x-x11jamwj:is([data-placement=left],[data-placement=left] > *){--origin-x:var(--_4-xgvn2um)}
+.--origin-y-xkt5zg6:is([data-placement=bottom],[data-placement=bottom] > *){--origin-y:calc(var(--_4-xgvn2um) * -1)}
+.--origin-y-x1qkz1vz:is([data-placement=top],[data-placement=top] > *){--origin-y:var(--_4-xgvn2um)}
+.--origin-xp3o6i3:is([data-placement=right]){--origin:translateX(-4px)}
+.--origin-x1wfptxb:is([data-placement=left]){--origin:translateX(4px)}
+.--origin-x1gg9rhx:is([data-placement=bottom]){--origin:translateY(-4px)}
+.--origin-xqt2xo2:is([data-placement=top]){--origin:translateY(4px)}
+.--progress-size-xzv23kb:is([data-size=lg] *){--progress-size:var(--_10-xyoqvup)}
+.--progress-size-x1mc7m0b:is([data-size=sm] *){--progress-size:var(--_4-xgvn2um)}
+.--progress-size-xbwumww:is([data-size=md] *){--progress-size:var(--_8-x1do95gr)}
+.gridArea-x19dv8yz:not(#\#){grid-area:action}
+.gridArea-x1iynvfu:not(#\#){grid-area:bar}
+.gridArea-x19tbii3:not(#\#){grid-area:description}
+.gridArea-xxwd7sb:not(#\#){grid-area:label}
+.gridArea-xnyuz70:not(#\#){grid-area:title}
+.gridArea-xo3lhmp:not(#\#){grid-area:track}
+.gridArea-xilv4yv:not(#\#){grid-area:value-label}
+.gridTemplate-x1a6ub5m:not(#\#){grid-template:'title action'}
+.inset-x10a8y8t:not(#\#){inset:0}
+.margin-x1ghz6dp:not(#\#){margin:0}
+.padding-x7gbtqy:not(#\#){padding:.5rem}
+.padding-x1717udv:not(#\#){padding:0}
+.padding-x1tamke2:not(#\#){padding:16px}
+.padding-x1uz70x1:not(#\#){padding:1rem}
+.padding-x1uktvz8:not(#\#){padding:var(--_1-x1plbop)}
+.padding-x1mus72z:not(#\#){padding:var(--_2-xsow7ju)}
+.padding-x11nodoc:not(#\#){padding:var(--_3-x1a1riub)}
+.padding-xymjty3:not(#\#){padding:var(--_4-xgvn2um)}
+.padding-x1yao562:not(#\#){padding:var(--_6-x109877l)}
+.padding-xv88oc5:not(#\#){padding:var(--_8-x1do95gr)}
+.margin-xzcrhhs:is(*) pre:not(#\#){margin:0}
+.padding-x1fp8jo2:is(*) pre:not(#\#){padding:var(--_1-x1plbop)}
+.padding-x1stei55:is([data-size=sm] *):not(#\#){padding:var(--_2-xsow7ju) var(--_2_5-xmuc480)}
+.padding-xvljzth:is([data-size=sm] *):not(#\#){padding:var(--_2-xsow7ju) var(--_2-xsow7ju)}
+.padding-xdd3en7:is([data-size=md] *):not(#\#){padding:var(--_3-x1a1riub) var(--_3-x1a1riub)}
+.padding-xpe9v1p:is([data-size=md] *):not(#\#){padding:var(--_3-x1a1riub) var(--_4-xgvn2um)}
+.padding-xokpq8m:is([data-size=sm] *):not(#\#){padding:var(--_3-x1a1riub)}
+.padding-x1eixeqh:is([data-size=lg] *):not(#\#){padding:var(--_4-xgvn2um) var(--_4-xgvn2um)}
+.padding-x1462qbg:is([data-size=lg] *):not(#\#){padding:var(--_4-xgvn2um) var(--_5-x1pn3ufh)}
+.padding-xsz7bkx:is(*) pre:not(#\#){padding:var(--_4-xgvn2um)}
+.padding-xowlro6:is([data-size=md] *):not(#\#){padding:var(--_4-xgvn2um)}
+.padding-x11kw06r:is([data-size=lg] *):not(#\#){padding:var(--_5-x1pn3ufh)}
+.gridTemplate-xznk9rs:has([data-card-header-description]):not(#\#){grid-template:'title action' 'description action'}
+.borderColor-x9r1u3d:not(#\#):not(#\#){border-color:transparent}
+.borderColor-x1k39n6z:not(#\#):not(#\#){border-color:var(--border1-x1d0hf4b)}
+.borderColor-x1py3wlq:not(#\#):not(#\#){border-color:var(--border1-x1en7ut4)}
+.borderColor-xc465ie:not(#\#):not(#\#){border-color:var(--border1-x46gdic)}
+.borderColor-xfxcto8:not(#\#):not(#\#){border-color:var(--border1-xdz3kzl)}
+.borderColor-x13kk5ga:not(#\#):not(#\#){border-color:var(--border1-xm7eg2j)}
+.borderColor-xfo4zru:not(#\#):not(#\#){border-color:var(--border2-x130p4o0)}
+.borderColor-xs06tsl:not(#\#):not(#\#){border-color:var(--border2-x1k67xy2)}
+.borderColor-x10awtix:not(#\#):not(#\#){border-color:var(--border2-x1kmnglg)}
+.borderColor-xqcsr7z:not(#\#):not(#\#){border-color:var(--border2-x7rqvo0)}
+.borderColor-x1gsw6mb:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
+.borderColor-xa6stqc:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
+.borderColor-x2xmkrc:not(#\#):not(#\#){border-color:var(--component1-x11poo5x)}
+.borderColor-x6txe1r:not(#\#):not(#\#){border-color:var(--solid1-x6o1eyi)}
+.borderColor-x1e8wf2f:not(#\#):not(#\#){border-color:var(--solid2-x1rgzn25)}
+.borderColor-x1nvupfo:not(#\#):not(#\#){border-color:white}
+.borderRadius-x2u8bby:not(#\#):not(#\#){border-radius:0}
+.borderRadius-x16rqkct:not(#\#):not(#\#){border-radius:50%}
+.borderRadius-x1gb8ofl:not(#\#):not(#\#){border-radius:var(--full-xmpdjt5)}
+.borderRadius-xuoujax:not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
+.borderRadius-x1i993ju:not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
+.borderRadius-xf80l99:not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
+.borderStyle-xbsl7fq:not(#\#):not(#\#){border-style:dashed}
+.borderStyle-x1y0btm7:not(#\#):not(#\#){border-style:solid}
+.borderWidth-xc342km:not(#\#):not(#\#){border-width:0}
+.borderWidth-xmkeg23:not(#\#):not(#\#){border-width:1px}
+.borderWidth-xdh2fpr:not(#\#):not(#\#){border-width:2px}
+.borderWidth-x1dixmfi:not(#\#):not(#\#){border-width:var(--progress-border-width)}
+.flex-x12lumcd:not(#\#):not(#\#){flex:1 1 auto}
+.gap-xou54vl:not(#\#):not(#\#){gap:16px}
+.gap-x1h4iudz:not(#\#):not(#\#){gap:2rem}
+.gap-x1rzw5jd:not(#\#):not(#\#){gap:32px}
+.gap-x167g77z:not(#\#):not(#\#){gap:8px}
+.gap-x1bb112x:not(#\#):not(#\#){gap:var(--_0_5-x1bnlq1y)}
+.gap-x2waoly:not(#\#):not(#\#){gap:var(--_1_5-x1llymyc)}
+.gap-x1k9mv0v:not(#\#):not(#\#){gap:var(--_1-x1plbop)}
+.gap-x1ywmbtt:not(#\#):not(#\#){gap:var(--_10-xyoqvup)}
+.gap-x1boramg:not(#\#):not(#\#){gap:var(--_11-x11x3va4)}
+.gap-xjd99v6:not(#\#):not(#\#){gap:var(--_12-xaxip2l)}
+.gap-xndfpl2:not(#\#):not(#\#){gap:var(--_14-x18pvp2c)}
+.gap-x1911wsy:not(#\#):not(#\#){gap:var(--_16-xnqsi2d)}
+.gap-xedfus0:not(#\#):not(#\#){gap:var(--_2_5-xmuc480)}
+.gap-x1j4zcgc:not(#\#):not(#\#){gap:var(--_2-xsow7ju)}
+.gap-x8jda87:not(#\#):not(#\#){gap:var(--_20-xbgtkw8)}
+.gap-xtpq9fc:not(#\#):not(#\#){gap:var(--_24-x8uq83j)}
+.gap-x1wnq7ln:not(#\#):not(#\#){gap:var(--_28-x3c8utc)}
+.gap-x1ytesra:not(#\#):not(#\#){gap:var(--_3_5-x1gotxl7)}
+.gap-x1vor5f1:not(#\#):not(#\#){gap:var(--_3-x1a1riub)}
+.gap-x9x6ubb:not(#\#):not(#\#){gap:var(--_32-xxeew7j)}
+.gap-xp7vuhs:not(#\#):not(#\#){gap:var(--_36-x9ro48l)}
+.gap-xre4se3:not(#\#):not(#\#){gap:var(--_4-xgvn2um)}
+.gap-xek65v7:not(#\#):not(#\#){gap:var(--_40-xlhyjhi)}
+.gap-x1blu1u1:not(#\#):not(#\#){gap:var(--_44-x4oqk9o)}
+.gap-x1qoym1l:not(#\#):not(#\#){gap:var(--_48-xc3zl6e)}
+.gap-x1ewgtkp:not(#\#):not(#\#){gap:var(--_5-x1pn3ufh)}
+.gap-x1e2g7u1:not(#\#):not(#\#){gap:var(--_52-x66e183)}
+.gap-xxv4kv0:not(#\#):not(#\#){gap:var(--_56-x1k96jyh)}
+.gap-x4upvg0:not(#\#):not(#\#){gap:var(--_6-x109877l)}
+.gap-x1460p1j:not(#\#):not(#\#){gap:var(--_60-xf930e)}
+.gap-xuvm9qt:not(#\#):not(#\#){gap:var(--_64-xhz114r)}
+.gap-x11mtbcp:not(#\#):not(#\#){gap:var(--_7-x3ogwq2)}
+.gap-x1id0tnk:not(#\#):not(#\#){gap:var(--_72-xgbkc4t)}
+.gap-x6foxyh:not(#\#):not(#\#){gap:var(--_8-x1do95gr)}
+.gap-x1no0ltn:not(#\#):not(#\#){gap:var(--_80-x12r4f45)}
+.gap-x1mlfgta:not(#\#):not(#\#){gap:var(--_9-x58vtwt)}
+.gap-x1erfctr:not(#\#):not(#\#){gap:var(--_96-x1mf07nc)}
+.gap-x8fwt5u:not(#\#):not(#\#){gap:var(--card-gap)}
+.gap-x19e0sr3:not(#\#):not(#\#){gap:var(--toggle-button-group-gap)}
+.gridTemplateAreas-x1syeyrc:not(#\#):not(#\#){grid-template-areas:'label value-label' 'bar bar'}
+.gridTemplateAreas-xynonu2:not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
+.gridTemplateAreas-x1vftqdq:not(#\#):not(#\#){grid-template-areas:'track'}
+.listStyle-xe8uvvx:not(#\#):not(#\#){list-style:none}
+.outline-x1a2a7pz:not(#\#):not(#\#){outline:none}
+.overflow-xysyzu8:not(#\#):not(#\#){overflow:auto}
+.overflow-x7giv3:not(#\#):not(#\#){overflow:clip}
+.overflow-xb3r6kr:not(#\#):not(#\#){overflow:hidden}
+.overscrollBehavior-xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
+.textDecoration-x1r8a4m5:not(#\#):not(#\#){text-decoration:inherit}
+.textDecoration-xmqliwb:not(#\#):not(#\#){text-decoration:line-through}
+.textDecoration-x1hl2dhg:not(#\#):not(#\#){text-decoration:none}
+.transition-x1hhud1w:not(#\#):not(#\#){transition:height .25s}
+.transition-xkxqpla:not(#\#):not(#\#){transition:rotate .25s}
+.transition-xr2178u:not(#\#):not(#\#){transition:rotate .2s ease-in-out}
+@supports (corner-shape: squircle){.borderRadius-x1lluddf.borderRadius-x1lluddf:not(#\#):not(#\#){border-radius:var(--_2xl-xzsum9y)}}
+@supports (corner-shape: squircle){.borderRadius-xrrq4d1.borderRadius-xrrq4d1:not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderRadius-xw9u2bx.borderRadius-xw9u2bx:not(#\#):not(#\#){border-radius:var(--_4xl-x1okofp6)}}
+@supports (corner-shape: squircle){.borderRadius-x6qlbny.borderRadius-x6qlbny:not(#\#):not(#\#){border-radius:var(--full-xmpdjt5)}}
+.borderColor-x13lu68w:is(*) pre:not(#\#):not(#\#){border-color:var(--border1-x1en7ut4)}
+.borderColor-x3f55jo:is([data-selected]):not(#\#):not(#\#){border-color:var(--border3-x1lhdl2z)}
+.borderColor-x1eiwmf5:is([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
+.borderColor-xqq6sos:is([data-selected]):not(#\#):not(#\#)::after{border-color:var(--border3-xm42ywm)}
+.borderColor-xh16ylw:is([data-drop-target]):not(#\#):not(#\#){border-color:var(--solid1-x6o1eyi)}
+.borderRadius-x1t92zbi:is([data-size=lg]):not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
+.borderRadius-xebk0zn:is([data-size=lg] *):not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
+.borderRadius-x1yuwfv0:is(*) pre:not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
+.borderRadius-xsj6ar2:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
+.borderRadius-xaojaxi:is([data-size=md] *):not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
+.borderRadius-x1xma92x:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
+.borderRadius-x1rz1h0l:is([data-size=sm] *):not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
+.borderRadius-xerymwo:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--xl-x195otgw)}
+.borderStyle-xqya0cv:is(*) pre:not(#\#):not(#\#){border-style:solid}
+.borderStyle-x1d6f3g8:is([data-drop-target]):not(#\#):not(#\#){border-style:solid}
+.borderStyle-xwciwry:is([data-selected]):not(#\#):not(#\#)::after{border-style:solid}
+.borderWidth-x175w7g3:is(*) pre:not(#\#):not(#\#){border-width:0}
+.borderWidth-x1h53ki7:is(*) pre:not(#\#):not(#\#){border-width:1px}
+.borderWidth-xqwsx7m:is([data-selected]):not(#\#):not(#\#)::after{border-width:1px}
+.gap-x3qxcbn:is([data-size=sm]):not(#\#):not(#\#){gap:var(--_1-x1plbop)}
+.gap-x1i12q1p:is([data-orientation=vertical]):not(#\#):not(#\#){gap:var(--_2-xsow7ju)}
+.outline-x1wayld1:is([data-focus-visible] *):not(#\#):not(#\#){outline:2px solid var(--solid1-x1yanih7)}
+.textDecoration-x1meiurb:is([data-unavailable]):not(#\#):not(#\#){text-decoration:line-through}
+.textDecoration-x17pbne7:is([data-breadcrumb] *):not(#\#):not(#\#){text-decoration:none}
+.textDecoration-x1fyv82c:is([data-hovered]):not(#\#):not(#\#){text-decoration:underline}
+.borderColor-xrc801b:has([data-invalid]):not(#\#):not(#\#){border-color:var(--border2-x1kmnglg)}
+.borderColor-xtdwfp3:has([data-hovered]):not([data-invalid]):not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
+.gridTemplateAreas-xx842gn:has(label,[data-slider-output]):not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
+@supports (corner-shape: squircle){.borderRadius-xdq5phb.borderRadius-xdq5phb:is(*) pre:not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderRadius-x4arbgl.borderRadius-x4arbgl:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderRadius-x1sctp66.borderRadius-x1sctp66:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderRadius-xydlxy0.borderRadius-xydlxy0:is([data-size=lg]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderRadius-x1w2x00y.borderRadius-x1w2x00y:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
+.borderColor-x10hl8ol:hover:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
+.borderColor-x1jy64qq:hover:not(#\#):not(#\#){border-color:var(--border3-x16mdiod)}
+.borderColor-x1dprclh:hover:not(#\#):not(#\#){border-color:var(--border3-x1lhdl2z)}
+.borderColor-x8vuplx:hover:not(#\#):not(#\#){border-color:var(--border3-x3z2k3q)}
+.borderColor-x1nnb4vk:hover:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
+.borderColor-x9035ti:hover:not(#\#):not(#\#){border-color:var(--border3-xqf689p)}
+.borderColor-xlq0dt:hover:not(#\#):not(#\#){border-color:var(--component2-x18xhj12)}
+.borderColor-x1v4kup2:focus:not(#\#):not(#\#){border-color:var(--solid1-x1yanih7)}
+.outline-x1uvtmcs:focus:not(#\#):not(#\#){outline:none}
+.borderColor-xr9x1gx:active:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
+.borderColor-xzr5fyu:active:not(#\#):not(#\#){border-color:var(--component3-x1isc7sq)}
+@media (prefers-reduced-motion: reduce){.transition-x9kvfbb.transition-x9kvfbb:not(#\#):not(#\#){transition:none}}
+.alignContent-xc26acl:not(#\#):not(#\#):not(#\#){align-content:center}
+.alignContent-x4465f1:not(#\#):not(#\#):not(#\#){align-content:end}
+.alignContent-x1jpljmv:not(#\#):not(#\#):not(#\#){align-content:space-around}
+.alignContent-xcdzlcm:not(#\#):not(#\#):not(#\#){align-content:space-between}
+.alignContent-xmsuk3y:not(#\#):not(#\#):not(#\#){align-content:space-evenly}
+.alignContent-x10ukxgv:not(#\#):not(#\#):not(#\#){align-content:start}
+.alignItems-x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
+.alignItems-x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
+.alignItems-xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
+.alignItems-x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
+.alignItems-x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
+.animationDuration-xvjg3zp:not(#\#):not(#\#):not(#\#){animation-duration:1.7s}
+.animationDuration-x1q3qbx4:not(#\#):not(#\#):not(#\#){animation-duration:1s}
+.animationDuration-xaft12t:not(#\#):not(#\#):not(#\#){animation-duration:var(--default-x1seeabg)}
+.animationDuration-xzfl22l:not(#\#):not(#\#):not(#\#){animation-duration:var(--fast-x1gssecm)}
+.animationDuration-xry2d85:not(#\#):not(#\#):not(#\#){animation-duration:var(--slow-xghckaq)}
+.animationFillMode-x10e4vud:not(#\#):not(#\#):not(#\#){animation-fill-mode:forwards}
+.animationIterationCount-xa4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
+.animationName-x1aerksh:not(#\#):not(#\#):not(#\#){animation-name:x1wc8ddo-B}
+.animationName-x19gekol:not(#\#):not(#\#):not(#\#){animation-name:x1yf9xd4-B}
+.animationName-x1exzhgm:not(#\#):not(#\#):not(#\#){animation-name:x1yo5mx1-B}
+.animationName-x1e4sq93:not(#\#):not(#\#):not(#\#){animation-name:x72inym-B}
+.animationTimingFunction-x4hg4is:not(#\#):not(#\#):not(#\#){animation-timing-function:ease-in-out}
+.animationTimingFunction-xn0cd8s:not(#\#):not(#\#):not(#\#){animation-timing-function:ease-in}
+.animationTimingFunction-x1esw782:not(#\#):not(#\#):not(#\#){animation-timing-function:linear}
+.aspectRatio-x10y9f9r:not(#\#):not(#\#):not(#\#){aspect-ratio:var(--x-aspectRatio)}
+.backgroundColor-x1esc4pq:not(#\#):not(#\#):not(#\#){background-color:#14b8a6}
+.backgroundColor-xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)}
+.backgroundColor-xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
+.backgroundColor-xpt24m0:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x151sc8w)}
+.backgroundColor-x1k29844:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x175608s)}
+.backgroundColor-x1l4czcd:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1jmar6b)}
+.backgroundColor-x1cxuv9w:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1oix42s)}
+.backgroundColor-x63xxpn:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1rxyl4a)}
+.backgroundColor-x1r9drjd:not(#\#):not(#\#):not(#\#){background-color:var(--bg-xl687un)}
+.backgroundColor-x1p10r6x:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1eogh41)}
+.backgroundColor-xg427dp:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1y9leuq)}
+.backgroundColor-x1tez0uk:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xi821rj)}
+.backgroundColor-x1s411yl:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xmjz13d)}
+.backgroundColor-x11zz5ef:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xvpzc41)}
+.backgroundColor-x7nz34z:not(#\#):not(#\#):not(#\#){background-color:var(--border1-x1en7ut4)}
+.backgroundColor-x1vh6gzx:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
+.backgroundColor-xvf7uj2:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
+.backgroundColor-x1a2iaau:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
+.backgroundColor-x1fv4v9l:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1sghgg8)}
+.backgroundColor-x1nx5pi8:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ui28u3)}
+.backgroundColor-xyz3se4:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
+.backgroundColor-xy55pl3:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
+.backgroundColor-x1kr21eg:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-xclalfi:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
+.backgroundColor-xwxmetc:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
+.backgroundColor-xw3eyx6:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
+.backgroundColor-x74tuy1:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
+.backgroundColor-xkpi630:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-xmiexp3:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
+.backgroundColor-x1wopwzl:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
+.backgroundColor-xxm6bgo:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-xyxz66h:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1yanih7)}
+.backgroundColor-x1uus1jj:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x2pkv20)}
+.backgroundColor-xkg05a4:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
+.backgroundColor-x1ou224l:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xmemhk6)}
+.backgroundColor-xi0jere:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xnhvmlu)}
+.backgroundColor-x267pdx:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ba3nh8)}
+.backgroundColor-x5yh9jm:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1dbywqs)}
+.backgroundColor-x1vti4om:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
+.backgroundColor-xms3029:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x4985y2)}
+.backgroundColor-x1hn9kz4:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
+.backgroundColor-x12peec7:not(#\#):not(#\#):not(#\#){background-color:white}
+.backgroundImage-x1bl8eps:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(-80deg,transparent 0%,transparent 30%,var(--component3-x1isc7sq) 50%,transparent 70%,transparent 100%)}
+.backgroundImage-xs7eep8:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(135deg,var(--solid2-x1rgzn25) 0%,var(--text1-xc56m6b) 100%)}
+.backgroundImage-x1kafqu6:not(#\#):not(#\#):not(#\#){background-image:repeating-linear-gradient(45deg,var(--solid1-x6o1eyi),var(--solid1-x6o1eyi) 20px,var(--border2-x130p4o0) 20px,var(--border2-x130p4o0) 40px)}
+.backgroundRepeat-xiy17q3:not(#\#):not(#\#):not(#\#){background-repeat:no-repeat}
+.backgroundSize-x25l62i:not(#\#):not(#\#):not(#\#){background-size:100%}
+.backgroundSize-x12z9qec:not(#\#):not(#\#):not(#\#){background-size:20%}
+.borderCollapse-x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
+.borderSpacing-x1gukg7c:not(#\#):not(#\#):not(#\#){border-spacing:0}
+.boxShadow-xa2943:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 1px black,inset 0 0 0 1px black}
+.boxShadow-x85lyh1:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 10px 1px rgba(0,0,0,.1)}
+.boxShadow-xkc5vb6:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 8px 1px rgba(0,0,0,.2)}
+.boxShadow-x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
+.boxShadow-x1fguj3b:not(#\#):not(#\#):not(#\#){box-shadow:var(--insetSm-xio3qbh)}
+.boxShadow-xidusqm:not(#\#):not(#\#):not(#\#){box-shadow:var(--lg-xgilsvr)}
+.boxShadow-x19jlxt2:not(#\#):not(#\#):not(#\#){box-shadow:var(--md-xf59ov0)}
+.boxShadow-xt4x5a2:not(#\#):not(#\#):not(#\#){box-shadow:var(--sm-xeboudq)}
+.boxShadow-x1iotiob:not(#\#):not(#\#):not(#\#){box-shadow:var(--x-boxShadow)}
+.boxShadow-x160cbv3:not(#\#):not(#\#):not(#\#){box-shadow:var(--xs-x1e2w8h4)}
+.boxSizing-x9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
+.color-x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
+.color-x1g041ww:not(#\#):not(#\#):not(#\#){color:light-dark(white,black)}
+.color-x13p24mn:not(#\#):not(#\#):not(#\#){color:var(--solid1-x6o1eyi)}
+.color-xrykz3h:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1dbywqs)}
+.color-x1ji32hz:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1rgzn25)}
+.color-xvqu39i:not(#\#):not(#\#):not(#\#){color:var(--text1-x1pj8xh0)}
+.color-xyxuv7z:not(#\#):not(#\#):not(#\#){color:var(--text1-x253p4m)}
+.color-x17eu1j6:not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
+.color-xqle7yb:not(#\#):not(#\#):not(#\#){color:var(--text1-xc56m6b)}
+.color-xbhoie5:not(#\#):not(#\#):not(#\#){color:var(--text1-xccyl1g)}
+.color-x1t52da2:not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
+.color-xc1cpzf:not(#\#):not(#\#):not(#\#){color:var(--text2-x1drysnq)}
+.color-x1a78sfz:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ew83cn)}
+.color-x1x394q5:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-x1vmc86j:not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
+.color-xlv6qze:not(#\#):not(#\#):not(#\#){color:var(--text2-xcv02bb)}
+.color-x1n45ymj:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1gt1e58)}
+.color-x5xs1dj:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1xz901g)}
+.color-x1dc14gg:not(#\#):not(#\#):not(#\#){color:var(--textContrast-xk9atbi)}
+.color-x1pz8lci:not(#\#):not(#\#):not(#\#){color:var(--textContrast-xmd31bd)}
+.color-xfru5vu:not(#\#):not(#\#):not(#\#){color:var(--textDim-x17ce2fr)}
+.color-xagf5oq:not(#\#):not(#\#):not(#\#){color:var(--textDim-x1v8eiz3)}
+.color-x1awj2ng:not(#\#):not(#\#):not(#\#){color:white}
+.columnGap-xe2rson:not(#\#):not(#\#):not(#\#){column-gap:var(--_1_5-x1llymyc)}
+.containerType-x12h1iku:not(#\#):not(#\#):not(#\#){container-type:inline-size}
+.content-x14obwa1:not(#\#):not(#\#):not(#\#){content:''}
+.cornerShape-xa22041:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
+.cursor-xicojor:not(#\#):not(#\#):not(#\#){cursor:col-resize}
+.cursor-xt0e3qv:not(#\#):not(#\#):not(#\#){cursor:default}
+.cursor-x7eptgl:not(#\#):not(#\#):not(#\#){cursor:ew-resize}
+.cursor-x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
+.cursor-x1ed109x:not(#\#):not(#\#):not(#\#){cursor:text}
+.display-x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
+.display-xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
+.display-x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
+.display-xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
+.display-x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
+.display-x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
+.display-x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
+.fill-x9d69u1:not(#\#):not(#\#):not(#\#){fill:var(--bg-x151sc8w)}
+.fill-x1b0arvy:not(#\#):not(#\#):not(#\#){fill:var(--solid1-x6o1eyi)}
+.filter-x1j01woz:not(#\#):not(#\#):not(#\#){filter:drop-shadow(-0.5px -0.5px 0 var(--border2-xavwyw3)) drop-shadow(.5px -0.5px 0 var(--border2-xavwyw3)) drop-shadow(.5px .5px 0 var(--border2-xavwyw3)) drop-shadow(-0.5px .5px 0 var(--border2-xavwyw3)) drop-shadow(0px 1px 3px rgb(0 0 0 / .1)) drop-shadow(0 -1px 3px rgb(0 0 0 / .1))}
+.flexBasis-x1t1x2f9:not(#\#):not(#\#):not(#\#){flex-basis:0%}
+.flexBasis-xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
+.flexBasis-x199s2q5:not(#\#):not(#\#):not(#\#){flex-basis:calc((1 / var(--items-per-row)) * (100% - (var(--toggle-button-group-gap) * (var(--items-per-row) - 1))))}
+.flexDirection-x3ieub6:not(#\#):not(#\#):not(#\#){flex-direction:column-reverse}
+.flexDirection-xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
+.flexDirection-x15zctf7:not(#\#):not(#\#):not(#\#){flex-direction:row-reverse}
+.flexDirection-x1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
+.flexGrow-xo60xuc:not(#\#):not(#\#):not(#\#){flex-grow:.5}
+.flexGrow-x8m4toh:not(#\#):not(#\#):not(#\#){flex-grow:.75}
+.flexGrow-x1c4vz4f:not(#\#):not(#\#):not(#\#){flex-grow:0}
+.flexGrow-x1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}
+.flexShrink-x2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}
+.flexShrink-xs83m0k:not(#\#):not(#\#):not(#\#){flex-shrink:1}
+.flexWrap-x8hhl5t:not(#\#):not(#\#):not(#\#){flex-wrap:wrap-reverse}
+.flexWrap-x1a02dak:not(#\#):not(#\#):not(#\#){flex-wrap:wrap}
+.fontFamily-xjb2p0i:not(#\#):not(#\#):not(#\#){font-family:inherit}
+.fontFamily-x2ttkn5:not(#\#):not(#\#):not(#\#){font-family:var(--mono-x1tvxhun)}
+.fontFamily-x11qb04y:not(#\#):not(#\#):not(#\#){font-family:var(--sans-x1htm3rl)}
+.fontFamily-x1w7yfx3:not(#\#):not(#\#):not(#\#){font-family:var(--serif-x9eavc5)}
+.fontSize-x9wccx5:not(#\#):not(#\#):not(#\#){font-size:.95em}
+.fontSize-x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit}
+.fontSize-xakty5g:not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
+.fontSize-x6jg0rf:not(#\#):not(#\#):not(#\#){font-size:var(--_3xl-x1lstm7v)}
+.fontSize-x150pmqa:not(#\#):not(#\#):not(#\#){font-size:var(--_4xl-x4z03mz)}
+.fontSize-x1ftte9y:not(#\#):not(#\#):not(#\#){font-size:var(--_5xl-x17lnkj2)}
+.fontSize-xxlv6v8:not(#\#):not(#\#):not(#\#){font-size:var(--_6xl-x1m2s84k)}
+.fontSize-xhxc9j7:not(#\#):not(#\#):not(#\#){font-size:var(--_7xl-xir39hh)}
+.fontSize-x1e2b9oe:not(#\#):not(#\#):not(#\#){font-size:var(--_8xl-xt70kky)}
+.fontSize-xbd8w88:not(#\#):not(#\#):not(#\#){font-size:var(--_9xl-xpyewce)}
+.fontSize-x2nmluw:not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
+.fontSize-x1a9pdt8:not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
+.fontSize-x1m1vj2o:not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
+.fontSize-xdmh292:not(#\#):not(#\#):not(#\#){font-size:var(--x-fontSize)}
+.fontSize-xoa44ge:not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
+.fontSize-xcd8l7k:not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
+.fontVariantNumeric-xss6m8b:not(#\#):not(#\#):not(#\#){font-variant-numeric:tabular-nums}
+.fontWeight-x1s688f:not(#\#):not(#\#):not(#\#){font-weight:600}
+.fontWeight-x1pd3egz:not(#\#):not(#\#):not(#\#){font-weight:inherit}
+.fontWeight-xydkh8a:not(#\#):not(#\#):not(#\#){font-weight:var(--black-xdj5g3)}
+.fontWeight-xckyxiw:not(#\#):not(#\#):not(#\#){font-weight:var(--bold-x1nz9syw)}
+.fontWeight-x1gitv93:not(#\#):not(#\#):not(#\#){font-weight:var(--extrabold-x70wtui)}
+.fontWeight-xg3dpo2:not(#\#):not(#\#):not(#\#){font-weight:var(--extralight-x12edb6v)}
+.fontWeight-x152fs08:not(#\#):not(#\#):not(#\#){font-weight:var(--light-x1xrohu8)}
+.fontWeight-x1mggaxd:not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
+.fontWeight-xq9zzvo:not(#\#):not(#\#):not(#\#){font-weight:var(--normal-xi6lnv8)}
+.fontWeight-xotd7ge:not(#\#):not(#\#):not(#\#){font-weight:var(--semibold-x1vekvjh)}
+.fontWeight-x1v3qfzj:not(#\#):not(#\#):not(#\#){font-weight:var(--thin-xk6k0je)}
+.forcedColorAdjust-x1kzknox:not(#\#):not(#\#):not(#\#){forced-color-adjust:none}
+.gridColumnEnd-x5ha1vm:not(#\#):not(#\#):not(#\#){grid-column-end:var(--x-gridColumnEnd)}
+.gridColumnStart-x15kxzb9:not(#\#):not(#\#):not(#\#){grid-column-start:var(--x-gridColumnStart)}
+.gridRowEnd-x1f5yvw1:not(#\#):not(#\#):not(#\#){grid-row-end:var(--x-gridRowEnd)}
+.gridRowStart-x1cjrry:not(#\#):not(#\#):not(#\#){grid-row-start:var(--x-gridRowStart)}
+.gridTemplateColumns-xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
+.gridTemplateRows-x1xxtoay:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--x-gridTemplateRows)}
+.justifyContent-xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
+.justifyContent-x13a6bvl:not(#\#):not(#\#):not(#\#){justify-content:flex-end}
+.justifyContent-x1nhvcw1:not(#\#):not(#\#):not(#\#){justify-content:flex-start}
+.justifyContent-x1l1ennw:not(#\#):not(#\#):not(#\#){justify-content:space-around}
+.justifyContent-x1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
+.justifyContent-xaw8158:not(#\#):not(#\#):not(#\#){justify-content:space-evenly}
+.justifyItems-x1o2pa38:not(#\#):not(#\#):not(#\#){justify-items:center}
+.justifyItems-x4xo5sw:not(#\#):not(#\#):not(#\#){justify-items:end}
+.justifyItems-x619ttb:not(#\#):not(#\#):not(#\#){justify-items:start}
+.justifySelf-x15bdqvn:not(#\#):not(#\#):not(#\#){justify-self:flex-end}
+.letterSpacing-x4gjf66:not(#\#):not(#\#):not(#\#){letter-spacing:inherit}
+.letterSpacing-x7gaq66:not(#\#):not(#\#):not(#\#){letter-spacing:var(--normal-xb40a8v)}
+.letterSpacing-xl7fe40:not(#\#):not(#\#):not(#\#){letter-spacing:var(--tight-x18yt8gk)}
+.letterSpacing-x1tjqt9o:not(#\#):not(#\#):not(#\#){letter-spacing:var(--tighter-x1x2i330)}
+.letterSpacing-xvt0q65:not(#\#):not(#\#):not(#\#){letter-spacing:var(--wide-x143nt7w)}
+.letterSpacing-x4dkgjf:not(#\#):not(#\#):not(#\#){letter-spacing:var(--wider-x1v3fezh)}
+.letterSpacing-x13wu9bi:not(#\#):not(#\#):not(#\#){letter-spacing:var(--widest-xihocmh)}
+.lineHeight-x15bjb6t:not(#\#):not(#\#):not(#\#){line-height:inherit}
+.lineHeight-x1otes00:not(#\#):not(#\#):not(#\#){line-height:var(--_2xl-xnhvph2)}
+.lineHeight-x1djwuob:not(#\#):not(#\#):not(#\#){line-height:var(--_3xl-x11fa68j)}
+.lineHeight-xpteji4:not(#\#):not(#\#):not(#\#){line-height:var(--_8-x1do95gr)}
+.lineHeight-x1fj13bc:not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
+.lineHeight-xcui70o:not(#\#):not(#\#):not(#\#){line-height:var(--lg-x1nt92rq)}
+.lineHeight-x2wzbrm:not(#\#):not(#\#):not(#\#){line-height:var(--none-x7rich4)}
+.lineHeight-x1iix7l:not(#\#):not(#\#):not(#\#){line-height:var(--sm-x4pl0dv)}
+.lineHeight-x1ygbb9r:not(#\#):not(#\#):not(#\#){line-height:var(--xl-xyq6gpo)}
+.lineHeight-x46yr4d:not(#\#):not(#\#):not(#\#){line-height:var(--xs-xg4a8ug)}
+.listStyleType-x3yw8vx:not(#\#):not(#\#):not(#\#){list-style-type:decimal}
+.listStyleType-xtaz4m5:not(#\#):not(#\#):not(#\#){list-style-type:disc}
+.listStyleType-x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
+.objectFit-xl1xv1r:not(#\#):not(#\#):not(#\#){object-fit:cover}
+.objectPosition-x115dhu7:not(#\#):not(#\#):not(#\#){object-position:center}
+.opacity-xbyyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}
+.opacity-xg01cxk:not(#\#):not(#\#):not(#\#){opacity:0}
+.opacity-x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
+.outlineColor-x1vjhitx:not(#\#):not(#\#):not(#\#){outline-color:blue}
+.outlineColor-x1lu3twc:not(#\#):not(#\#):not(#\#){outline-color:var(--solid1-x6o1eyi)}
+.outlineOffset-x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
+.outlineStyle-xaatb59:not(#\#):not(#\#):not(#\#){outline-style:solid}
+.outlineWidth-x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
+.outlineWidth-x1qgsegg:not(#\#):not(#\#):not(#\#){outline-width:1px}
+.pointerEvents-x47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}
+.position-x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
+.position-xixxii4:not(#\#):not(#\#):not(#\#){position:fixed}
+.position-x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
+.position-x7wzq59:not(#\#):not(#\#):not(#\#){position:sticky}
+.resize-x8za3yd:not(#\#):not(#\#):not(#\#){resize:both}
+.resize-xtt52l0:not(#\#):not(#\#):not(#\#){resize:none}
+.rotate-x1gcftaf:not(#\#):not(#\#):not(#\#){rotate:0deg}
+.rowGap-xj49xfw:not(#\#):not(#\#):not(#\#){row-gap:var(--_2_5-xmuc480)}
+.shadow-xi4h4sd:not(#\#):not(#\#):not(#\#){shadow:var(--md-xf59ov0)}
+.textAlign-x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
+.textAlign-x16tdsg8:not(#\#):not(#\#):not(#\#){text-align:inherit}
+.textAlign-xdpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
+.textAlign-x1hr2gdg:not(#\#):not(#\#):not(#\#){text-align:right}
+.textDecorationLine-xujl8zx:not(#\#):not(#\#):not(#\#){text-decoration-line:underline}
+.textOverflow-xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
+.textTransform-x5ftkge:not(#\#):not(#\#):not(#\#){text-transform:inherit}
+.textUnderlineOffset-x1qlg3mc:not(#\#):not(#\#):not(#\#){text-underline-offset:var(--_1-x1plbop)}
+.touchAction-x5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}
+.transformOrigin-xcz5yhc:not(#\#):not(#\#):not(#\#){transform-origin:100%}
+.transformOrigin-xee5nap:not(#\#):not(#\#):not(#\#){transform-origin:right}
+.transform-x7p49u4:not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}
+.transform-x19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
+.transform-x5c49eg:not(#\#):not(#\#):not(#\#){transform:translate(-100%,-50%)}
+.transform-x11lhmoz:not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}
+.transform-x5i6ehr:not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
+.transform-xuuh30:not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}
+.transform-x1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
+.transform-xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
+.transitionDuration-x1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
+.transitionDuration-xpfv6me:not(#\#):not(#\#):not(#\#){transition-duration:var(--default-x1seeabg)}
+.transitionDuration-xx08pzc:not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
+.transitionDuration-xzr5fb6:not(#\#):not(#\#):not(#\#){transition-duration:var(--slow-xghckaq)}
+.transitionProperty-xfagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
+.transitionProperty-x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color}
+.transitionProperty-xts7igz:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color}
+.transitionProperty-x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
+.transitionProperty-xghmlwh:not(#\#):not(#\#):not(#\#){transition-property:color,border-left-color}
+.transitionProperty-xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
+.transitionProperty-xua3uq3:not(#\#):not(#\#):not(#\#){transition-property:height}
+.transitionProperty-x13b0p5u:not(#\#):not(#\#):not(#\#){transition-property:none}
+.transitionProperty-x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
+.transitionProperty-xwcsmn1:not(#\#):not(#\#):not(#\#){transition-property:transform,opacity}
+.transitionProperty-x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
+.transitionProperty-xkznf9o:not(#\#):not(#\#):not(#\#){transition-property:translate,width,height}
+.transitionProperty-x1mnhl27:not(#\#):not(#\#):not(#\#){transition-property:translate,width}
+.transitionTimingFunction-xz4gly6:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-in-out}
+.transitionTimingFunction-xcj1dhv:not(#\#):not(#\#):not(#\#){transition-timing-function:linear}
+.translate-x113ijq:not(#\#):not(#\#):not(#\#){translate:-50% -50%}
+.translate-xh1e3oa:not(#\#):not(#\#):not(#\#){translate:unset}
+.userSelect-x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
+.visibility-xlshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
+.whiteSpace-xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
+.zIndex-x8knxv4:not(#\#):not(#\#):not(#\#){z-index:-1}
+.zIndex-x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
+.zIndex-x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
+.zIndex-x11uqc5h:not(#\#):not(#\#):not(#\#){z-index:100}
+.zIndex-x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
+.alignItems-xoun3hd:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:center}
+.alignItems-x1wjcwka:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#){align-items:flex-start}
+.alignItems-xtpdso8:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:stretch}
+.animationDuration-xs2en9u:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-duration:.3s}
+.animationName-x1i605ls:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--fadeIn-x1jmpvsz)}
+.animationName-x4i2j9k:is([data-direction=bottom][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideInBottom-xe54f9n)}
+.animationName-x1ogfgie:is([data-direction=left][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideInLeft-xijpfl)}
+.animationName-xhx8o8z:is([data-direction=right][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideInRight-x1otygbt)}
+.animationName-xedw4zo:is([data-direction=top][data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideInTop-x1q5efi)}
+.animationName-x1sllcvh:is([data-direction=bottom][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideOutBottom-x1hjek28)}
+.animationName-x1phx78d:is([data-direction=left][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideOutLeft-x18nztzn)}
+.animationName-x1slukww:is([data-direction=right][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideOutRight-xft8bi2)}
+.animationName-x1tlo8ge:is([data-direction=top][data-exiting]):not(#\#):not(#\#):not(#\#){animation-name:var(--slideOutTop-xi8gqyr)}
+.animationName-xfv8cg2:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--zoomIn-xe8tyo6)}
+.animationTimingFunction-xyfghb2:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}
+.backgroundColor-x6yz6ea:is(*):not(#\#):not(#\#):not(#\#)::before{background-color:transparent}
+.backgroundColor-x7yv93o:is([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border2-x130p4o0)}
+.backgroundColor-x1ccbx3t:is([data-hovered=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
+.backgroundColor-x1xgxvzy:is([data-resizing=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
+.backgroundColor-x1bwnevv:is([data-disabled=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
+.backgroundColor-xvlnlln:hover:not([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
+.backgroundColor-x1ymmlfe:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
+.backgroundColor-xty7e01:is([data-drop-target]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
+.backgroundColor-x1p3054l:is([data-selected]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
+.backgroundColor-x1azejus:is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component1-x43o0oh)}
+.backgroundColor-xhd8mbf:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
+.backgroundColor-xzckxse:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
+.backgroundColor-xj1svf1:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x1a4xmkr:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x3iekxc:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x15ownq4:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-xh32jup:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x1xa9zv7:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x2jfmnu:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-x18xhj12)}
+.backgroundColor-xsd57se:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
+.backgroundColor-xtgxwrx:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
+.backgroundColor-x1u4j5me:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
+.backgroundColor-x6d30c2:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
+.backgroundColor-xllbmhp:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
+.backgroundColor-x1q7fcaw:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
+.backgroundColor-xfnscv6:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
+.backgroundColor-xk7lcje:is([data-selected]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xzjwbwe)}
+.backgroundColor-x1l0anta:is([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xzjwbwe)}
+.backgroundColor-xkhw87q:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
+.backgroundColor-x174ku2b:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
+.backgroundColor-xbmc7h8:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-xibgg82:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-x1n9l9xn:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-x18u3sjz:is([data-dragging=true]):is([data-dragging=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-xvke1tl:is([data-react-aria-pressable=true]:not([data-disabled]):active *):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-x1w0eppo:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-x11hzcxw:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-x1isc7sq)}
+.backgroundColor-xfj0oy5:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
+.backgroundColor-xlnddd4:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
+.backgroundColor-x1qt1x9y:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
+.backgroundColor-x127wlr:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
+.backgroundColor-xfm9g3v:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x4u0l1k)}
+.backgroundColor-x120yizm:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-xgaer2l:is(:active,[data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-x9pex8s:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-xbhw3a7:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-x10vob7d:is([data-selected]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xvwaia1)}
+.backgroundColor-x1e0gckj:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xvwaia1)}
+.backgroundColor-xzrhb8f:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1yanih7)}
+.backgroundColor-x17491x2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x2pkv20)}
+.backgroundColor-x1aw4n5j:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
+.backgroundColor-x61hwtc:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
+.backgroundColor-x1ck3tfv:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
+.backgroundColor-xxpmrhf:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xmemhk6)}
+.backgroundColor-x2bbucx:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ba3nh8)}
+.backgroundColor-xdx23yb:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1dbywqs)}
+.backgroundColor-x1ukug4a:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
+.backgroundColor-x8b2kiq:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x4985y2)}
+.backgroundColor-xsfl4k6:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
+.backgroundColor-x1anma2h:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
+.backgroundImage-x1beqnot:is([data-disabled]):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--component2-x18xhj12),var(--component2-x18xhj12))!important}
+.borderBottomLeftWidth-xti2wqi:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#){border-bottom-left-width:0}
+.boxShadow-x19pap68:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
+.boxShadow-xf34dur:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
+.boxShadow-xe1oxu5:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
+.boxShadow-xdsxzvj:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
+.boxShadow-x10iyi2d:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
+.color-x1rssh9o:is([data-react-aria-pressable=true][data-disabled] *):not(#\#):not(#\#):not(#\#){color:var(--border3-xm42ywm)}
+.color-x1e3r2xt:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1pj8xh0)}
+.color-x17661w7:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x253p4m)}
+.color-x18y9v2v:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
+.color-xnfuzeh:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--text1-xb5nrd9)}
+.color-xl7gfqg:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
+.color-xr273q8:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
+.color-x3dk8ss:is([data-variant=destructive] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
+.color-x15gqzh4:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
+.color-xfg0ta2:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-x1gaf1qe:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-xis98h5:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-xjka5tq:is([data-hovered],[data-focused],[data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-xat45n7:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.color-x8zdt5v:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
+.color-x16entun:is([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
+.color-x1v12cwp:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text2-xcv02bb)}
+.color-x1cw8dt2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x116zh0m)}
+.color-x1juwwod:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1xz901g)}
+.cornerShape-x12tbmpm:is(*) pre:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
+.cursor-x1w11t6e:is([data-resizable-direction=left]):not(#\#):not(#\#):not(#\#){cursor:e-resize}
+.cursor-x1oooc6o:is([data-resizable-direction=both]):not(#\#):not(#\#):not(#\#){cursor:ew-resize}
+.cursor-x77jxow:is([data-hovered]):not(#\#):not(#\#):not(#\#){cursor:pointer}
+.cursor-x11wow30:is([data-panel-group-direction=vertical]):not(#\#):not(#\#):not(#\#){cursor:row-resize}
+.cursor-xewnasn:is([data-resizable-direction=right]):not(#\#):not(#\#):not(#\#){cursor:w-resize}
+.display-x16mfbck:is([data-splitter-type='handle']:hover > *):not(#\#):not(#\#):not(#\#){display:block}
+.display-x1h6jewf:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){display:flex}
+.display-x126me4j:is([data-breadcrumb]:last-child *):not(#\#):not(#\#):not(#\#){display:none}
+.filter-xece8kz:is([data-disabled]):not(#\#):not(#\#):not(#\#){filter:grayscale(1)}
+.flexDirection-x18ko33d:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){flex-direction:column}
+.flexDirection-xb5kijp:is([data-layout=stack]):not(#\#):not(#\#):not(#\#){flex-direction:column}
+.flexDirection-x158tx91:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#){flex-direction:row}
+.flexGrow-xmzpm4q:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#){flex-grow:1}
+.flexShrink-x1vnanun:is(*) svg:not(#\#):not(#\#):not(#\#){flex-shrink:0}
+.fontSize-xdi2y9l:is([data-card-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
+.fontSize-x1h5ralm:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
+.fontSize-x1a19hz7:is([data-size=lg]):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
+.fontSize-x175ohug:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
+.fontSize-x1py6ykt:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
+.fontSize-x1fkmo1y:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
+.fontSize-xiceyaw:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
+.fontSize-x1bzifm9:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
+.fontSize-x1ya0evx:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
+.fontSize-xonwjwx:is([data-size=xl] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
+.fontSize-xujovw0:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
+.fontSize-x1w3w1z:is([data-size=sm]):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
+.fontSize-x14nmpad:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
+.fontWeight-x12f8piz:is([data-react-aria-pressable=true][data-selected=true]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
+.fontWeight-x6i2wo5:is([data-current]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
+.lineHeight-xx24gj9:is(li *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
+.lineHeight-x1qqnixq:is(blockquote *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
+.lineHeight-x1g66cck:is([data-size=lg]):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
+.lineHeight-xygti73:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
+.lineHeight-x5ejvnn:is([data-size=md]):not(#\#):not(#\#):not(#\#){line-height:var(--sm-x4pl0dv)}
+.lineHeight-x1scf232:is([data-size=md] *):not(#\#):not(#\#):not(#\#){line-height:var(--sm-x4pl0dv)}
+.lineHeight-xnvsck6:is([data-size=sm]):not(#\#):not(#\#):not(#\#){line-height:var(--xs-xg4a8ug)}
+.lineHeight-x47360v:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){line-height:var(--xs-xg4a8ug)}
+.opacity-x1lxkrgy:is([disabled]):not(#\#):not(#\#):not(#\#){opacity:.3}
+.opacity-xxh3kiz:is([data-disabled]):not(#\#):not(#\#):not(#\#){opacity:.5}
+.opacity-xz45kkc:is([aria-disabled=true] *):not(#\#):not(#\#):not(#\#){opacity:.5}
+.opacity-x78oxnk:is([data-disabled=true] *):not(#\#):not(#\#):not(#\#){opacity:.5}
+.opacity-xc6n1n6:is([data-outside-visible-range],[data-unavailable]):not(#\#):not(#\#):not(#\#){opacity:.5}
+.opacity-x1xlq6hu:is([data-entering], [data-entering] > *):not(#\#):not(#\#):not(#\#){opacity:0}
+.opacity-x15h3uk9:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){opacity:0}
+.opacity-xo3lgda:is([data-entering]):not(#\#):not(#\#):not(#\#){opacity:0}
+.opacity-x1y3ytew:is([data-exiting]):not(#\#):not(#\#):not(#\#){opacity:0}
+.opacity-xdwziqs:is([data-heading-link]:hover *):not(#\#):not(#\#):not(#\#){opacity:1}
+.opacity-x127iuxr:is([data-focus-visible]):not(#\#):not(#\#):not(#\#){opacity:1}
+.opacity-x1f9km8m:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){opacity:1}
+.outlineColor-xyr3coy:is([data-selected]):not(#\#):not(#\#):not(#\#)::after{outline-color:white}
+.outlineOffset-x1goi28a:is([data-selected]):not(#\#):not(#\#):not(#\#)::after{outline-offset:-2px}
+.outlineStyle-xzo6rw9:is([data-selected]):not(#\#):not(#\#):not(#\#)::after{outline-style:solid}
+.outlineWidth-x1pxrnyt:is([data-selected]):not(#\#):not(#\#):not(#\#)::after{outline-width:2px}
+.pointerEvents-x19fw6na:is(*) svg:not(#\#):not(#\#):not(#\#){pointer-events:none}
+.pointerEvents-x19hqv7w:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){pointer-events:none}
+.rotate-xufvh4u:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:180deg}
+.rotate-x18ellfx:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:90deg}
+.transform-x140extk:is([data-placement=right] *):not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
+.transform-x1s861hk:is([data-placement=top] *):not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}
+.transform-xr9p1a1:is([data-placement=bottom] *):not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
+.transform-x1pjk68:is([data-placement=left] *):not(#\#):not(#\#):not(#\#){transform:rotate(90deg)}
+.transform-xk6zm71:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){transform:rotate(90deg)}
+.transform-x1ha5ii1:is([data-entering]):not(#\#):not(#\#):not(#\#){transform:scale(.9) var(--origin)}
+.transform-xfdjxlr:is([data-exiting]):not(#\#):not(#\#):not(#\#){transform:scale(.9) var(--origin)}
+.transform-x1ilsqch:is([data-entering], [data-entering] > *):not(#\#):not(#\#):not(#\#){transform:scale(.95) translate(var(--origin-x,0),var(--origin-y,0))}
+.transform-xxucve0:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){transform:scale(.95) translate(var(--origin-x,0),var(--origin-y,0))}
+.transform-x1a19u22:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){transform:translate(100%,-50%)}
+.transform-xet38jj:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#)::before{transform:translateX(-50%)}
+.transform-xvyvk38:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}
+.transform-xikjbfy:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}
+.transform-x19lgda6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#)::before{transform:translateY(-50%)}
+.transform-x174hktb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
+.transform-xa746um:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
+.transform-xm5um24:is([data-placement=top] *):not(#\#):not(#\#):not(#\#){transform:tranuiColorY(-50%) rotate(-45deg)}
+.transitionDuration-xgggp24:is([data-exiting]):not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
+.zIndex-xikqtj0:is([data-selected]):not(#\#):not(#\#):not(#\#){z-index:0}
+.alignItems-xkjcc5q:has(p):not(#\#):not(#\#):not(#\#){align-items:flex-start}
+.backgroundColor-x1ywip0:has(td:hover):not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xi821rj)}
+.color-x17u1pav:is([data-variant=critical] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x2pkv20)}
+.color-x1ok210x:is([data-variant=success] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xmemhk6)}
+.color-x1af8a7e:is([data-variant=warning] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xnhvmlu)}
+.backgroundColor-x1oqui1x:disabled:not(#\#):not(#\#):not(#\#){background-color:transparent}
+.backgroundColor-xcvjdaz:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
+.backgroundColor-xhe8pwl:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
+.backgroundColor-x9ustey:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1sghgg8)}
+.backgroundColor-x1dfs8j4:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ui28u3)}
+.backgroundColor-x1snhj8a:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
+.color-xnxeckx:disabled:not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
+.opacity-xijokvz:disabled:not(#\#):not(#\#):not(#\#){opacity:.5}
+.pointerEvents-xaqnwrm:disabled:not(#\#):not(#\#):not(#\#){pointer-events:none}
+.backgroundColor-x1byop2d:hover:not(#\#):not(#\#):not(#\#){background-color:rgba(255,255,255,.3)}
+.backgroundColor-x1tett1n:hover:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
+.backgroundColor-x1jqod2p:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
+.backgroundColor-xow2hbl:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
+.backgroundColor-x151gwij:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
+.backgroundColor-x11aw7u0:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
+.backgroundColor-xp87xln:hover:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
+.color-xjrurd6:hover:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
+.opacity-x1o7uuvo:hover:not(#\#):not(#\#):not(#\#){opacity:1}
+.outlineWidth-xat8dtc:focus:not(#\#):not(#\#):not(#\#){outline-width:1px}
+.backgroundColor-x174fhsx:active:not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
+.backgroundColor-x13w91gl:active:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
+.backgroundColor-x1jjjnae:active:not(#\#):not(#\#):not(#\#){background-color:var(--text1-xc56m6b)}
+@media (prefers-reduced-motion: reduce){.animationName-x1aquc0h.animationName-x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
+@media (min-width: 48rem){.fontSize-x1em9g14.fontSize-x1em9g14:not(#\#):not(#\#):not(#\#){font-size:var(--_4xl-x4z03mz)}}
+@media (min-width: 48rem){.fontSize-xd8xfak.fontSize-xd8xfak:not(#\#):not(#\#):not(#\#){font-size:var(--_5xl-x17lnkj2)}}
+@media (prefers-reduced-motion: reduce){.transitionProperty-x4wkmsb.transitionProperty-x4wkmsb:not(#\#):not(#\#):not(#\#){transition-property:none}}
+@container (min-width: 400px){.display-x1b4ekcc.display-x1b4ekcc:not(#\#):not(#\#):not(#\#){display:flex}}
+@container (min-width: 400px){.display-xr91lqn.display-xr91lqn:not(#\#):not(#\#):not(#\#){display:none}}
+.borderBottomColor-x16stqrj:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:transparent}
+.borderBottomColor-x4zo83h:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border1-x1en7ut4)}
+.borderBottomColor-xc7lc1u:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
+.borderBottomLeftRadius-xfrllxf:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
+.borderBottomLeftRadius-x19y7gkx:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--md-x1o51v3i)}
+.borderBottomRightRadius-xjppbhk:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:0}
+.borderBottomRightRadius-x1ww4vys:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--md-x1o51v3i)}
+.borderBottomStyle-x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
+.borderBottomWidth-x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
+.borderBottomWidth-xso031l:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
+.borderLeftColor-x80kmbg:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border1-x1en7ut4)}
+.borderLeftColor-x1nbwh4f:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border2-xavwyw3)}
+.borderLeftColor-xicfvt9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--borderDim-x1j89upv)}
+.borderLeftColor-x1iy1ygf:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--solid1-x6o1eyi)}
+.borderLeftStyle-x19ypqd9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-style:solid}
+.borderLeftWidth-xyj58a3:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
+.borderLeftWidth-xe0pwq:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:1px}
+.borderRightColor-xm0m5e5:not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
+.borderRightStyle-x32b0ac:not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
+.borderRightWidth-xgfja2r:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
+.borderRightWidth-xs1s249:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
+.borderTopColor-xdo11qm:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border1-x1en7ut4)}
+.borderTopColor-x1unxl75:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border2-xavwyw3)}
+.borderTopLeftRadius-x1ia1hqs:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
+.borderTopLeftRadius-xkvr9zc:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--md-x1o51v3i)}
+.borderTopRightRadius-x1a2w583:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
+.borderTopRightRadius-xpiszqg:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--md-x1o51v3i)}
+.borderTopStyle-x13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}
+.borderTopWidth-x972fbf:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
+.borderTopWidth-x178xt8z:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
+.bottom-x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-x19qnocw:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--_3-x1a1riub)}
+.bottom-x10yiizf:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--_4-xgvn2um)}
+.height-x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
+.height-x1dr59a3:not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}
+.height-xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
+.height-x1vd4hg5:not(#\#):not(#\#):not(#\#):not(#\#){height:300px}
+.height-x16nrsnc:not(#\#):not(#\#):not(#\#):not(#\#){height:400px}
+.height-xdd8jsf:not(#\#):not(#\#):not(#\#):not(#\#){height:52px}
+.height-x1xa6b72:not(#\#):not(#\#):not(#\#):not(#\#){height:700px}
+.height-x3urnb8:not(#\#):not(#\#):not(#\#):not(#\#){height:800px}
+.height-xt7dq6l:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
+.height-xfc2vd1:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
+.height-xrkkcas:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_12-xaxip2l)}
+.height-x140y8s0:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_16-xnqsi2d)}
+.height-x1gek4bg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2_5-xmuc480)}
+.height-x1tdiqgn:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
+.height-x1tmjr0p:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_32-xxeew7j)}
+.height-x1h8rqws:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
+.height-xlwbodq:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_40-xlhyjhi)}
+.height-xsi1db0:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_5-x1pn3ufh)}
+.height-x6bhkw4:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-xuupj4z:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
+.height-xk310vn:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_72-xgbkc4t)}
+.height-xcky1rk:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
+.height-xxdp216:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--disclosure-panel-height)}
+.height-x11shy6x:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--page-height)}
+.height-x166ztde:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--progress-size)}
+.height-x16ye13r:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x-height)}
+.left-xu96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-x1nrll8i:not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
+.left-xnacogl:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--_1-x1plbop)}
+.left-xz72ev6:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--_2-xsow7ju)}
+.marginBottom-xat24cr:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:0}
+.marginBottom-xyi6m4r:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:1rem}
+.marginBottom-xubxldh:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(var(--_1-x1plbop) * -1)}
+.marginBottom-x1yuevv8:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(var(--_2-xsow7ju) * -1)}
+.marginBottom-x153mvl1:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_1_5-x1llymyc)}
+.marginBottom-xuzbrib:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_12-xaxip2l)}
+.marginBottom-x3s77m2:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_4-xgvn2um)}
+.marginBottom-x1p6xj8o:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_5-x1pn3ufh)}
+.marginBottom-x11n9ykl:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_6-x109877l)}
+.marginBottom-x2ali7v:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_8-x1do95gr)}
+.marginLeft-x16jtila:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:calc(var(--_0_5-x1bnlq1y) * -1)}
+.marginLeft-xbxdmyg:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:calc(var(--_2_5-xmuc480) * -1)}
+.marginLeft-x140u6kw:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:calc(var(--_2-xsow7ju) * -1)}
+.marginLeft-xtib8b6:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:calc(var(--_3-x1a1riub) * -1)}
+.marginLeft-xvmb2fk:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--_1-x1plbop)}
+.marginLeft-xy28nsv:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--_2-xsow7ju)}
+.marginRight-x1yf7rl7:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:0}
+.marginRight-x94flzf:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:calc(var(--_0_5-x1bnlq1y) * -1)}
+.marginRight-xkx2q80:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:calc(var(--_2-xsow7ju) * -1)}
+.marginRight-x1qg4v5a:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:calc(var(--_3-x1a1riub) * -1)}
+.marginRight-x1051q95:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--_1-x1plbop)}
+.marginRight-x1nx9lg9:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--_4-xgvn2um)}
+.marginTop-xdj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
+.marginTop-xr1yuqi:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:auto}
+.marginTop-x1x4oqzj:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--_1-x1plbop) * -1)}
+.marginTop-x1xcu83e:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--_2-xsow7ju) * -1)}
+.marginTop-xxugbsv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_1_5-x1llymyc)}
+.marginTop-xj26ot3:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_12-xaxip2l)}
+.marginTop-xsjbwxm:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_16-xnqsi2d)}
+.marginTop-xkeb37j:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_4-xgvn2um)}
+.marginTop-x15z9wlt:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_5-x1pn3ufh)}
+.marginTop-x1u5uhqf:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_8-x1do95gr)}
+.maxHeight-x1oh82ff:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(var(--visual-viewport-height) * .8)}
+.maxWidth-x1mqrghp:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100ch}
+.minHeight-x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
+.minHeight-x6uqey6:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_12-xaxip2l)}
+.minHeight-x1bgdama:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_40-xlhyjhi)}
+.minHeight-xlqy7cr:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_7-x3ogwq2)}
+.minHeight-x1btrftn:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_8-x1do95gr)}
+.minHeight-x4fvrxy:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_9-x58vtwt)}
+.minWidth-xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
+.minWidth-x1sn4fs6:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--_4-xgvn2um)}
+.minWidth-x75xjn4:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--_60-xf930e)}
+.minWidth-xxqemk0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:var(--_8-x1do95gr)}
+.overflowY-x1odjw0f:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
+.paddingBottom-x18d9i69:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
+.paddingBottom-xkcyk3g:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_0_5-x1bnlq1y)}
+.paddingBottom-x1o6k5y8:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_1-x1plbop)}
+.paddingBottom-x16qb4in:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_12-xaxip2l)}
+.paddingBottom-x1o314:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_2-xsow7ju)}
+.paddingBottom-xbfpk89:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_20-xbgtkw8)}
+.paddingBottom-x1xi39lx:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_3-x1a1riub)}
+.paddingBottom-xnfycaw:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_4-xgvn2um)}
+.paddingBottom-x1p08vyf:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_6-x109877l)}
+.paddingLeft-x1uhho1l:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:0}
+.paddingLeft-x1bbsik7:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_0_5-x1bnlq1y)}
+.paddingLeft-x1kmr12f:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_1_5-x1llymyc)}
+.paddingLeft-x115zygv:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_1-x1plbop)}
+.paddingLeft-xlcfnap:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_10-xyoqvup)}
+.paddingLeft-x1b1v5c0:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_16-xnqsi2d)}
+.paddingLeft-x11rlpl4:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2_5-xmuc480)}
+.paddingLeft-x18qrpd6:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2-xsow7ju)}
+.paddingLeft-x16j2j4g:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-x8smes1:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
+.paddingLeft-x15ntmvy:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_6-x109877l)}
+.paddingLeft-x81jyg:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_8-x1do95gr)}
+.paddingLeft-xbc5pgh:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--card-x-padding)}
+.paddingLeft-x13e46o5:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x-paddingLeft)}
+.paddingRight-x1xpa7k:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:0}
+.paddingRight-x1k8k2k7:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1_5-x1llymyc)}
+.paddingRight-x19p030x:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
+.paddingRight-x1o9lhx6:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_16-xnqsi2d)}
+.paddingRight-x17i3xln:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2_5-xmuc480)}
+.paddingRight-x181basc:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.paddingRight-x6cyeea:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)}
+.paddingRight-x13a2dg3:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_4-xgvn2um)}
+.paddingRight-x1scv0vq:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_6-x109877l)}
+.paddingRight-x15wkd4u:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_8-x1do95gr)}
+.paddingRight-x1u8e7yt:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--card-x-padding)}
+.paddingRight-xwsd3xy:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x-paddingRight)}
+.paddingTop-xexx8yu:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:0}
+.paddingTop-x159zdv2:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_0_5-x1bnlq1y)}
+.paddingTop-x1n2t9di:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_1_5-x1llymyc)}
+.paddingTop-xevm68z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_1-x1plbop)}
+.paddingTop-xks1qye:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_12-xaxip2l)}
+.paddingTop-x1h4xhff:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_2-xsow7ju)}
+.paddingTop-x104xgb4:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_20-xbgtkw8)}
+.paddingTop-x1s6vlbb:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
+.paddingTop-x1noqrsl:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)}
+.paddingTop-x1k7s7hd:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_5-x1pn3ufh)}
+.paddingTop-xz418gm:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_6-x109877l)}
+.right-x3m8u43:not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-x1e3uvw1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--_3-x1a1riub)}
+.right-xjqvg7w:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--_4-xgvn2um)}
+.scrollMarginTop-x16864uc:not(#\#):not(#\#):not(#\#):not(#\#){scroll-margin-top:var(--_20-xbgtkw8)}
+.top-x13dri30:not(#\#):not(#\#):not(#\#):not(#\#){top:-0.01em}
+.top-x13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-xwa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
+.top-x1drkmrx:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--visual-viewport-height) / 2)}
+.top-x18vgj00:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--_1-x1plbop)}
+.top-x3l5brz:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--_2_5-xmuc480)}
+.top-x1fcu2lf:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--_3-x1a1riub)}
+.width-xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
+.width-x1udut9i:not(#\#):not(#\#):not(#\#):not(#\#){width:1000%}
+.width-xn9wirt:not(#\#):not(#\#):not(#\#):not(#\#){width:100vw}
+.width-x1y43apy:not(#\#):not(#\#):not(#\#):not(#\#){width:1200px}
+.width-x1lmkilm:not(#\#):not(#\#):not(#\#):not(#\#){width:1600px}
+.width-x13esg8c:not(#\#):not(#\#):not(#\#):not(#\#){width:2000px}
+.width-x16grhtn:not(#\#):not(#\#):not(#\#):not(#\#){width:220px}
+.width-xafpxmx:not(#\#):not(#\#):not(#\#):not(#\#){width:240px}
+.width-xfo62xy:not(#\#):not(#\#):not(#\#):not(#\#){width:2px}
+.width-x103aznp:not(#\#):not(#\#):not(#\#):not(#\#){width:300%}
+.width-xdzyupr:not(#\#):not(#\#):not(#\#):not(#\#){width:300px}
+.width-x1m258z3:not(#\#):not(#\#):not(#\#):not(#\#){width:320px}
+.width-xi55695:not(#\#):not(#\#):not(#\#):not(#\#){width:328px}
+.width-x1cvmir6:not(#\#):not(#\#):not(#\#):not(#\#){width:360px}
+.width-x1l2rt3b:not(#\#):not(#\#):not(#\#):not(#\#){width:400px}
+.width-x3hqpx7:not(#\#):not(#\#):not(#\#):not(#\#){width:50%}
+.width-xvue9z:not(#\#):not(#\#):not(#\#):not(#\#){width:500px}
+.width-xvni27:not(#\#):not(#\#):not(#\#):not(#\#){width:52px}
+.width-xycev2y:not(#\#):not(#\#):not(#\#):not(#\#){width:60%}
+.width-xhh3r5d:not(#\#):not(#\#):not(#\#):not(#\#){width:calc((var(--tree-item-level,0) - 1) * var(--_3-x1a1riub))}
+.width-x1unzbce:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(100% + var(--_2-xsow7ju) * 2)}
+.width-xeq5yr9:not(#\#):not(#\#):not(#\#):not(#\#){width:fit-content}
+.width-xzrvom6:not(#\#):not(#\#):not(#\#):not(#\#){width:min(100%,300px)}
+.width-x45bhuy:not(#\#):not(#\#):not(#\#):not(#\#){width:min(300px,60%)}
+.width-x1gvrpfw:not(#\#):not(#\#):not(#\#):not(#\#){width:min(300px,80%)}
+.width-x1dznjnj:not(#\#):not(#\#):not(#\#):not(#\#){width:min(80%,300px)}
+.width-xrn72xf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_0_5-x1bnlq1y)}
+.width-xe35rg9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_10-xyoqvup)}
+.width-x1ut46fo:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_12-xaxip2l)}
+.width-x1cyjp46:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_16-xnqsi2d)}
+.width-xae9cqk:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2_5-xmuc480)}
+.width-xnum6w6:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2-xsow7ju)}
+.width-x3v7y2w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
+.width-x5aj043:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_32-xxeew7j)}
+.width-x1iobu0p:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
+.width-x1ywvk1j:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_64-xhz114r)}
+.width-x9tbrr9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
+.width-xrstr7j:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--progress-size)}
+.width-xlvufjm:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--trigger-width)}
+.width-x5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}
+@supports (corner-shape: squircle){.borderBottomLeftRadius-x126c7c0.borderBottomLeftRadius-x126c7c0:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderBottomRightRadius-xcyha5d.borderBottomRightRadius-xcyha5d:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderTopLeftRadius-x8lfnw4.borderTopLeftRadius-x8lfnw4:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--_3xl-x1bwjc12)}}
+@supports (corner-shape: squircle){.borderTopRightRadius-xzsfayr.borderTopRightRadius-xzsfayr:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--_3xl-x1bwjc12)}}
+.borderBottomColor-xd1ie4z:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:transparent}
+.borderBottomColor-x1utxzx2:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
+.borderBottomColor-x12b2rmk:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
+.borderBottomColor-x94w7c5:is([data-orientation=horizontal] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--solid1-x6o1eyi)}
+.borderBottomLeftRadius-x7efh69:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
+.borderBottomLeftRadius-x1l931rc:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
+.borderBottomLeftRadius-x11hkhd3:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
+.borderBottomLeftRadius-x10fm8ce:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--lg-x1011bts)}
+.borderBottomLeftRadius-xwoh6l1:is([data-selection-start],td:first-child > *):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-left-radius:var(--md-x1o51v3i)}
+.borderBottomRightRadius-xsmum3n:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:0}
+.borderBottomRightRadius-xio9zp4:is(:not(:last-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:0}
+.borderBottomRightRadius-xn3byd1:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--lg-x1011bts)}
+.borderBottomRightRadius-x10l6qm4:is([data-selection-end],td:last-child > *):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-bottom-right-radius:var(--md-x1o51v3i)}
+.borderBottomStyle-xc9ovlk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:none}
+.borderBottomStyle-xeedzij:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
+.borderBottomStyle-x1n9d4a3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
+.borderBottomWidth-x15l4pgt:is([role=row]:last-child *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
+.borderBottomWidth-x1vqyp8j:is(:not(:last-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
+.borderBottomWidth-x7dc8i6:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
+.borderBottomWidth-x1ed0nfq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
+.borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
+.borderBottomWidth-x1t94y08:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
+.borderBottomWidth-x1t21ho3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:3px}
+.borderLeftWidth-x8b28c3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
+.borderLeftWidth-x7e6zi8:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
+.borderLeftWidth-x1g606n3:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:1px}
+.borderRightColor-xkuxz9x:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:transparent}
+.borderRightColor-xz94i59:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:transparent}
+.borderRightColor-x8t59l0:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
+.borderRightColor-x8pcx9o:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
+.borderRightColor-xrs3to8:is([data-orientation=vertical] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--solid1-x6o1eyi)}
+.borderRightStyle-x11n44ol:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:none}
+.borderRightStyle-x43d2xm:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:none}
+.borderRightStyle-x1ep6zql:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
+.borderRightStyle-x1n7zma2:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
+.borderRightWidth-xgzzm7r:is(:not(:last-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
+.borderRightWidth-x13nsbtr:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
+.borderRightWidth-x14zibg8:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
+.borderRightWidth-xmzihwk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
+.borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
+.borderRightWidth-x1n82x8c:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:3px}
+.borderTopLeftRadius-x1jrxlk3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
+.borderTopLeftRadius-x10dxjnd:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
+.borderTopLeftRadius-x14erhs3:is([data-selection-start],td:first-child > *):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-left-radius:var(--md-x1o51v3i)}
+.borderTopRightRadius-xt1km4f:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
+.borderTopRightRadius-x18bx6q4:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
+.borderTopRightRadius-xl3d9s7:is(:not(:last-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
+.borderTopRightRadius-x1sj05a8:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
+.borderTopRightRadius-x1pgoo9o:is([data-selection-end],td:last-child > *):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-right-radius:var(--md-x1o51v3i)}
+.borderTopWidth-x1fuzw2w:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
+.borderTopWidth-xe4pvmi:is(:not(:first-child))  *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
+.borderTopWidth-xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
+.bottom-xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
+.bottom-x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.bottom-xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
+.height-xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
+.height-xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
+.height-x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
+.height-x1e29dhg:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:100%}
+.height-x1ujwaxl:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
+.height-xa6wk7n:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}
+.height-xa90ixn:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
+.height-xgfdyuw:is([data-direction=top], [data-direction=bottom]):is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:320px}
+.height-xjwgx98:is([data-direction=top], [data-direction=bottom]):is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:600px}
+.height-x1i0w0n8:is([data-direction=top], [data-direction=bottom]):is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:800px}
+.height-x4isadb:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress number) * 1%)}
+.height-xqr7z5w:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)}
+.height-xdwu4s3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--_1-x1plbop)}
+.height-xnn4vh6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_1-x1plbop)}
+.height-xdjr7hi:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_1-x1plbop)}
+.height-xvgowgr:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
+.height-x1bj8b9x:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
+.height-x104b1j8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_11-x11x3va4)}
+.height-x1k9a9im:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_14-x18pvp2c)}
+.height-xe43mij:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
+.height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
+.height-x1dwj4yq:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3_5-x1gotxl7)}
+.height-xepgdy3:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
+.height-x6cp08u:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
+.height-x1fju72f:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
+.height-x1nk0t4g:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
+.height-x1ejewa8:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
+.height-xzmxqe9:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
+.height-x1ckmk8u:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-x413wr7:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
+.height-xflfpla:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
+.height-x8h21d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
+.height-xbkx42m:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
+.height-xl931vt:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
+.height-xwcq22m:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
+.height-xawfzw8:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
+.height-x1ym6ln2:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
+.height-xz9j5pl:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
+.left-x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
+.left-xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
+.left-x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%}
+.left-x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
+.left-xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)}
+.left-xjed1bz:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:unset}
+.marginBottom-x9c2n64:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(var(--_2-xsow7ju) * -1)}
+.marginBottom-x1acpxd3:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(var(--_3-x1a1riub) * -1)}
+.marginBottom-x1yqwghl:is(li *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_0-xcffliq)}
+.marginBottom-x10hd0vl:is(blockquote *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_0-xcffliq)}
+.marginBottom-xqvk9lr:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_1-x1plbop)}
+.marginBottom-xwmxh6r:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--_2-xsow7ju)}
+.marginLeft-x1drdkdw:is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#):not(#\#)::before{margin-left:calc(var(--_2-xsow7ju) * -1)}
+.marginLeft-x1mvsmej:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--_1-x1plbop)}
+.marginLeft-xbzrfa7:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--_2-xsow7ju)}
+.marginRight-x1v6vlb2:is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#):not(#\#)::before{margin-right:calc(var(--_2-xsow7ju) * -1)}
+.marginRight-xsrj4lo:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--_1-x1plbop)}
+.marginRight-x3neje5:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--_2-xsow7ju)}
+.marginTop-xvatmk5:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--_2-xsow7ju) * -1)}
+.marginTop-x13lbpgh:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(var(--_3-x1a1riub) * -1)}
+.marginTop-x1wxs10r:is(li *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_0-xcffliq)}
+.marginTop-x16lzv0x:is(blockquote *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_0-xcffliq)}
+.marginTop-xgh7tvm:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_1-x1plbop)}
+.marginTop-xfg1sq8:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--_2-xsow7ju)}
+.maxHeight-x1ettal:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){max-height:100vh}
+.maxHeight-x1aybang:is([data-direction=top], [data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100vh - var(--_8-x1do95gr))}
+.maxWidth-x601bgv:is([data-direction=top], [data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:100vw}
+.maxWidth-x1xioav0:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){max-width:calc(100vw - var(--_8-x1do95gr))}
+.minHeight-xmvt6du:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_10-xyoqvup)}
+.minHeight-xfhokl8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_10-xyoqvup)}
+.minHeight-x99y9gj:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_12-xaxip2l)}
+.minHeight-xg061xe:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_6-x109877l)}
+.minHeight-xl99ybt:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_8-x1do95gr)}
+.paddingBottom-x6sjm68:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_1-x1plbop)}
+.paddingBottom-xniqjlh:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_2-xsow7ju)}
+.paddingBottom-xn17ysx:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_2-xsow7ju)}
+.paddingBottom-xljj8os:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_3-x1a1riub)}
+.paddingBottom-xdhqxmq:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_3-x1a1riub)}
+.paddingBottom-x16hjl5o:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_4-xgvn2um)}
+.paddingLeft-x6qsi07:is(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:0}
+.paddingLeft-xv7dtq0:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_1-x1plbop)}
+.paddingLeft-xkluz58:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2_5-xmuc480)}
+.paddingLeft-xgc1uv4:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2-xsow7ju)}
+.paddingLeft-xck0eub:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2-xsow7ju)}
+.paddingLeft-x13txke7:is([data-table-size=md] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-x1izh1lq:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-x1yv1bkc:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-xhpkq72:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
+.paddingLeft-x1remayf:is([data-table-size=lg] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
+.paddingRight-x1ovgblk:last-child:has(svg):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_0_5-x1bnlq1y)}
+.paddingRight-xt1a0pi:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
+.paddingRight-xuusv2y:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
+.paddingRight-x1l70bhl:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
+.paddingRight-x1wn3puj:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2_5-xmuc480)}
+.paddingRight-xhqis6d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.paddingRight-xyc92g7:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.paddingRight-xooq7vc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.paddingRight-xzl3pht:is([data-table-size=md] *:not(:last-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)}
+.paddingRight-x1w258yr:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)}
+.paddingRight-xmwtj4t:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)}
+.paddingRight-x1er5lt3:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_4-xgvn2um)}
+.paddingRight-x1aw6fwa:is([data-table-size=lg] *:not(:last-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_4-xgvn2um)}
+.paddingTop-x18kutu2:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_1-x1plbop)}
+.paddingTop-x1tzt7i6:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_2-xsow7ju)}
+.paddingTop-x1xomi29:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_2-xsow7ju)}
+.paddingTop-x1xre27a:is([data-table-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
+.paddingTop-x1xm6zre:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
+.paddingTop-x1pdtiu9:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)}
+.right-x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0}
+.right-xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.right-x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
+.top-x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
+.top-xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
+.top-xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
+.top-xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
+.top-x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
+.top-xl8t2ac:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:calc(100% - attr(data-progress-end number) * 1%)}
+.width-xucb16f:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
+.width-x1j0uice:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
+.width-xhqp866:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:100%}
+.width-x1d46ikq:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
+.width-x67hbu9:is([data-direction=top], [data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){width:100vw}
+.width-xdip0o1:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
+.width-xebvyi3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
+.width-x3jquih:is([data-direction=left], [data-direction=right]):is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:320px}
+.width-x1ak4868:is([data-direction=left], [data-direction=right]):is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){width:600px}
+.width-x11sbvg8:is([data-direction=left], [data-direction=right]):is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){width:800px}
+.width-x16ouo39:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:auto}
+.width-x19s274e:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:calc(attr(data-progress number) * 1%)}
+.width-xbu4jqu:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)}
+.width-x16wso6y:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--_1-x1plbop)}
+.width-xk4ult:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_1-x1plbop)}
+.width-x3sirbn:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_10-xyoqvup)}
+.width-xjnrrc6:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_14-x18pvp2c)}
+.width-x88fgpr:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2-xsow7ju)}
+.width-xpxfstr:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3_5-x1gotxl7)}
+.width-x5dfxfh:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
+.width-x1f1f7ci:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
+.width-x9pq8ax:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
+.width-x1ika010:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
+.width-xx5h5ec:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
+.width-x1vjoq73:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
+.width-xw8vdjb:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
+.width-x17jvw3h:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
+.width-x9c0q0b:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
+.width-x10ou3qj:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_7-x3ogwq2)}
+.width-xn3cxqo:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
+.width-x1lby93s:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
+.width-xo8awbe:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
+.paddingLeft-xu53kqt:has(svg+*):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2_5-xmuc480)}
+.paddingLeft-xe3k1bx:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2-xsow7ju)}
+.paddingLeft-xizjdfb:has(svg+*):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-x22gwoe:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
+.paddingLeft-x1qm54lp:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
+.paddingRight-xkvdgk:has(button):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1_5-x1llymyc)}
+.paddingRight-x95aa3d:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.paddingRight-xbfp5r9:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)}
+.paddingRight-xgqucqf:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_4-xgvn2um)}
+.width-x15vyqus:has(svg:only-child):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_10-xyoqvup)}
+.width-xfmdrng:has(svg:only-child):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_7-x3ogwq2)}
+.width-x1nm162b:has(svg:only-child):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
+.borderTopLeftRadius-xqfgiaj:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--md-x1o51v3i)}
+.borderTopRightRadius-xq6bztk:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--md-x1o51v3i)}
+.paddingLeft-x1k9nibj:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_0_5-x1bnlq1y)}
+.paddingLeft-xok9p14:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x-1gfbyet)}
+.paddingTop-x17g1skl:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)}
+.paddingTop-xzc7y64:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--card-y-padding)}
+.borderBottomLeftRadius-x9jr2fx:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--md-x1o51v3i)}
+.borderBottomRightRadius-x1ug12hw:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--md-x1o51v3i)}
+.paddingBottom-xmampw0:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--card-y-padding)}
+.paddingRight-x1ycezwp:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)}
+.inset-xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
+.inset-xeqgs30:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:var(--_1-x1plbop)}
+.borderRadius-x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
+.borderRadius-xnpr4at:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:var(--full-xmpdjt5)}
+.borderRadius-x1a44610:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:var(--md-x1o51v3i)}
+.appearance-x1ad04t7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-cancel-button{appearance:none}
+.appearance-x1glnyev:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-decoration{appearance:none}
+.backgroundColor-x1og98oj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--border1-x1en7ut4)}
+.backgroundColor-x2ydo77:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
+.boxSizing-xx38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
+.color-x17pfzbs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--text1-xb5nrd9)}
+.content-x10tli2e:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:''}
+.content-x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
+.position-x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
+.position-x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
+.transitionDuration-xy2prys:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-duration:var(--fast-x1gssecm)}
+.transitionProperty-xxcwgru:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-property:background-color}
+.transitionTimingFunction-xn05597:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:ease-in-out}
+.zIndex-xy5mcqj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}
+.bottom-xhq5o37:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
+.left-x1wlytlt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
+.top-x1y3wzot:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
+.width-x1vgi0k:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:1px}

apps/docs/vite.config.ts

···
 import contentCollections from "@content-collections/vite";
+import browserslist from "browserslist";
 import mdx from "@mdx-js/rollup";
 import rehypeShiki, { RehypeShikiOptions } from "@shikijs/rehype";
 import withToc from "@stefanprobst/rehype-extract-toc";
···
 import { nitroV2Plugin } from "@tanstack/nitro-v2-vite-plugin";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
+import { browserslistToTargets } from "lightningcss";
 import { camelCase } from "change-case";
 import dedent from "dedent";
 import { glob } from "glob";
···
 import rehypeSlug from "rehype-slug";
 import remarkFrontmatter from "remark-frontmatter";
 import { codeToHtml } from "shiki";
-import stylexPlugin from "unplugin-stylex/vite";
+import stylexPlugin from "@stylexjs/unplugin";
 import { defineConfig, PluginOption } from "vite";
 import viteTsConfigPaths from "vite-tsconfig-paths";
 
···
 const config = defineConfig({
   plugins: [
     shiki(),
-    stylexPlugin(),
+    stylexPlugin.vite({
+      lightningcssOptions: {
+        targets: browserslistToTargets(browserslist("baseline 2024")),
+      },
+    }),
     nitroV2Plugin(),
     // this is the plugin that enables path aliases
     viteTsConfigPaths({

packages/eslint-config/package.json

···
   "dependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",
     "@eslint-react/eslint-plugin": "^2.2.3",
-    "@stylexjs/eslint-plugin": "^0.16.2",
+    "@stylexjs/eslint-plugin": "^0.17.0",
     "eslint-config-flat-gitignore": "^2.1.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import-x": "^4.16.1",

packages/hip-ui/src/components/alert-dialog/index.tsx

···
 import { IconButton } from "../icon-button";
 import { spacing } from "../theme/spacing.stylex";
 import { StyleXComponentProps } from "../theme/types";
-import { typeramp } from "../theme/typography.stylex";
+import { fontSize, typeramp } from "../theme/typography.stylex";
 import { useDialogStyles } from "../theme/useDialogStyles";
 
 const styles = stylex.create({
···
   },
   header: {
     alignItems: "center",
-    display: "flex",
     gap: spacing["2"],
-    height: spacing["8"],
+    display: "flex",
     justifyContent: "space-between",
+    height: spacing["8"],
     paddingLeft: spacing["4"],
     paddingRight: spacing["4"],
+    fontSize: fontSize["lg"],
+    paddingTop: spacing["2"],
   },
   description: {
     paddingBottom: spacing["4"],
···
     paddingTop: spacing["4"],
   },
   footer: {
-    display: "flex",
     gap: spacing["2"],
+    display: "flex",
     justifyContent: "flex-end",
     paddingBottom: spacing["2"],
     paddingLeft: spacing["4"],
···
   style,
 }: AlertDialogHeaderProps) => {
   return (
-    <div {...stylex.props(styles.header, typeramp.heading5, style)}>
+    <div {...stylex.props(styles.header, style)}>
       <Heading>{children}</Heading>
       <IconButton label="Close" size="sm" variant="tertiary" slot="close">
         <X />

packages/hip-ui/src/components/avatar/avatar-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
 };

packages/hip-ui/src/components/badge/badge-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
 };

packages/hip-ui/src/components/button-group/button-group-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     // TODO:
     // "button"

packages/hip-ui/src/components/button/button-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useButtonStyles.ts",
     "./context.ts",

packages/hip-ui/src/components/color-field/color-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/combobox/combobox-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
     "../theme/usePopoverStyles.ts",

packages/hip-ui/src/components/date-field/date-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/dialog/index.tsx

···
 import { uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
 import { Size, StyleXComponentProps } from "../theme/types";
-import { typeramp } from "../theme/typography.stylex";
+import { fontSize, typeramp } from "../theme/typography.stylex";
 import { useDialogStyles } from "../theme/useDialogStyles";
 const styles = stylex.create({
   dialog: {
···
   },
   header: {
     alignItems: "center",
-    display: "flex",
     gap: spacing["2"],
-    height: spacing["8"],
+    display: "flex",
     justifyContent: "space-between",
+    height: spacing["8"],
     paddingBottom: spacing["2"],
     paddingLeft: spacing["4"],
+    fontSize: fontSize["lg"],
     paddingRight: spacing["4"],
 
     borderBottomColor: uiColor.border1,
···
     paddingBottom: spacing["4"],
     paddingLeft: spacing["4"],
     paddingRight: spacing["4"],
-    paddingTop: { default: 0, ":first-child": spacing["4"] },
+    paddingTop: spacing["4"],
   },
   footer: {
-    display: "flex",
     gap: spacing["2"],
+    display: "flex",
     justifyContent: "flex-end",
     paddingBottom: spacing["2"],
     paddingLeft: spacing["4"],
···
 
 export const DialogHeader = ({ children, style }: DialogHeaderProps) => {
   return (
-    <div {...stylex.props(styles.header, typeramp.heading5, style)}>
+    <div {...stylex.props(styles.header, style)}>
       <Heading>{children}</Heading>
       <IconButton label="Close" size="sm" variant="tertiary" slot="close">
         <X />

packages/hip-ui/src/components/disclosure/disclosure-config.ts

···
     "../theme/typography.stylex.tsx",
     "../theme/radius.stylex.tsx",
     "../theme/animations.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../context.ts",
   ],
   dependencies: {
···
     "lucide-react": "^0.263.1",
   },
 };
-

packages/hip-ui/src/components/disclosure/index.tsx

···
 import * as stylex from "@stylexjs/stylex";
-import { ChevronDown, PanelBottom } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { use } from "react";
 import {
   Disclosure as AriaDisclosure,
···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
     flexDirection: "column",
   },
   title: {
-    alignItems: "center",
-    backgroundColor: {
-      default: "transparent",
-      ":is([data-hovered=true])": uiColor.component2,
-      ":is([data-pressed=true])": uiColor.component3,
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    padding: {
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
+      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
     },
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["2xl"],
     },
-    cornerShape: "squircle",
     borderWidth: 0,
+    gap: spacing["2"],
+    alignItems: "center",
+    backgroundColor: {
+      default: "transparent",
+      ":is([data-hovered=true])": uiColor.component2,
+      ":is([data-pressed=true])": uiColor.component3,
+    },
     color: uiColor.text1,
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: {
+      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
       ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
     },
     fontWeight: fontWeight["medium"],
-    gap: spacing["2"],
     justifyContent: "space-between",
-    padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
-      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
-    },
     textAlign: "left",
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
     width: "100%",
···
     pointerEvents: "none",
   },
   chevron: {
+    transition: {
+      default: "rotate 200ms ease-in-out",
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
     color: uiColor.text2,
     flexShrink: 0,
     rotate: {
       default: "0deg",
       ":is([aria-expanded=true] *)": "180deg",
-    },
-    transition: {
-      default: "rotate 200ms ease-in-out",
-      [mediaQueries.reducedMotion]: "none",
     },
   },
   panel: {
+    overflow: "clip",
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
+      ":is([data-size=lg] *)": fontSize["lg"],
       ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
-    height: "var(--disclosure-panel-height)",
-    overflow: "clip",
     transitionDuration: {
       default: animationDuration.default,
-      [mediaQueries.reducedMotion]: 0,
+      "@media (prefers-reduced-motion: reduce)": null,
     },
     transitionProperty: "height",
     transitionTimingFunction: "ease-in-out",
+    height: "var(--disclosure-panel-height)",
   },
   panelContent: {
     padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
       ":is([data-size=md] *)": `${spacing["3"]} ${spacing["3"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["4"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2"]}`,
     },
   },
 });

packages/hip-ui/src/components/icon-button/icon-button-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     // TODOD
     // "button"

packages/hip-ui/src/components/meter/index.tsx

···
 import { spacing } from "../theme/spacing.stylex";
 import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
 import { fontSize, lineHeight } from "../theme/typography.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
+    gridTemplateAreas: "'label value-label' 'bar bar'",
     alignItems: "center",
     display: "grid",
-    gap: spacing["2"],
-    gridTemplateAreas: "'label value-label' 'bar bar'",
   },
   label: {
     gridArea: "label",
   },
   bar: {
+    gridArea: "bar",
+    borderRadius: radius.full,
+    overflow: "hidden",
     backgroundColor: {
+      ":is([data-variant=critical] *)": criticalColor.component2,
       ":is([data-variant=primary] *)": primaryColor.component2,
       ":is([data-variant=secondary] *)": uiColor.component2,
       ":is([data-variant=success] *)": successColor.component2,
       ":is([data-variant=warning] *)": warningColor.component2,
-      ":is([data-variant=critical] *)": criticalColor.component2,
     },
-    borderRadius: radius.full,
     boxShadow: {
+      ":is([data-variant=critical] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=primary] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=secondary] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=success] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
       ":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
-      ":is([data-variant=critical] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
     },
-    gridArea: "bar",
     height: {
-      ":is([data-size=sm] *)": spacing["1"],
+      ":is([data-size=lg] *)": spacing["3"],
       ":is([data-size=md] *)": spacing["2"],
-      ":is([data-size=lg] *)": spacing["3"],
+      ":is([data-size=sm] *)": spacing["1"],
     },
-    overflow: "hidden",
     width: "100%",
   },
 
   valueLabel: {
+    gridArea: "value-label",
     color: uiColor.text1,
     fontVariantNumeric: "tabular-nums",
-    gridArea: "value-label",
     justifySelf: "flex-end",
 
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["xs"],
-      ":is([data-size=md] *)": fontSize["sm"],
       ":is([data-size=lg] *)": fontSize["base"],
+      ":is([data-size=md] *)": fontSize["sm"],
+      ":is([data-size=sm] *)": fontSize["xs"],
     },
     lineHeight: {
-      ":is([data-size=sm] *)": lineHeight["xs"],
-      ":is([data-size=md] *)": lineHeight["sm"],
       ":is([data-size=lg] *)": lineHeight["base"],
+      ":is([data-size=md] *)": lineHeight["sm"],
+      ":is([data-size=sm] *)": lineHeight["xs"],
     },
   },
   fill: {
-    height: "100%",
     transform: "translateX(-100%)",
     transitionDuration: animationDuration.default,
     transitionProperty: "transform",
     transitionTimingFunction: "linear",
+    height: "100%",
     width: "100%",
 
     backgroundColor: {
+      ":is([data-variant=critical] *)": criticalColor.solid1,
       ":is([data-variant=primary] *)": primaryColor.solid1,
       ":is([data-variant=secondary] *)": uiColor.solid1,
       ":is([data-variant=success] *)": successColor.solid1,
       ":is([data-variant=warning] *)": warningColor.solid2,
-      ":is([data-variant=critical] *)": criticalColor.solid1,
     },
   },
   progress: (percentage: number) => ({

packages/hip-ui/src/components/number-field/number-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/popover/popover-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
   dependencies: {

packages/hip-ui/src/components/progress-bar/index.tsx

···
 import { SizeContext } from "../context";
 import { Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
+    gridTemplateAreas: "'label value-label' 'bar bar'",
     alignItems: "center",
     display: "grid",
-    gap: spacing["2"],
-    gridTemplateAreas: "'label value-label' 'bar bar'",
   },
   label: {
     gridArea: "label",
   },
   bar: {
-    backgroundColor: uiColor.component2,
+    gridArea: "bar",
     borderRadius: radius.full,
-    gridArea: "bar",
     overflow: "hidden",
+    backgroundColor: uiColor.component2,
     width: "100%",
 
     height: {
-      ":is([data-size=sm] *)": spacing["1"],
-      ":is([data-size=md] *)": spacing["2"],
       ":is([data-size=lg] *)": spacing["3"],
+      ":is([data-size=md] *)": spacing["2"],
+      ":is([data-size=sm] *)": spacing["1"],
     },
   },
   valueLabel: {
+    gridArea: "value-label",
     color: uiColor.text1,
     fontVariantNumeric: "tabular-nums",
-    gridArea: "value-label",
     justifySelf: "flex-end",
 
     fontSize: {
+      ":is([data-size=lg] *)": fontSize["base"],
+      ":is([data-size=md] *)": fontSize["sm"],
       ":is([data-size=sm] *)": fontSize["xs"],
-      ":is([data-size=md] *)": fontSize["sm"],
-      ":is([data-size=lg] *)": fontSize["base"],
     },
     lineHeight: {
-      ":is([data-size=sm] *)": lineHeight["xs"],
+      ":is([data-size=lg] *)": lineHeight["base"],
       ":is([data-size=md] *)": lineHeight["sm"],
-      ":is([data-size=lg] *)": lineHeight["base"],
+      ":is([data-size=sm] *)": lineHeight["xs"],
     },
   },
   fill: {
     backgroundColor: primaryColor.solid1,
-    height: "100%",
     transform: "translateX(-100%)",
     transitionDuration: animationDuration.default,
     transitionProperty: "none",
     transitionTimingFunction: "linear",
+    height: "100%",
     width: "100%",
   },
   progress: (percentage: number) => ({
     transform: `translateX(calc(${percentage.toString()}% - 100%))`,
   }),
   indeterminateFill: {
-    backgroundRepeat: "no-repeat",
+    animationDuration: "1s",
+    animationIterationCount: "infinite",
+    animationName: {
+      default: IndeterminateAnimation,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "linear",
     backgroundImage: `repeating-linear-gradient(
       45deg,
       ${primaryColor.solid1},
···
       ${primaryColor.border2} 20px,
       ${primaryColor.border2} 40px
     )`,
+    backgroundRepeat: "no-repeat",
     backgroundSize: "20%",
+    transformOrigin: "right",
     height: "100%",
-    animationName: {
-      default: IndeterminateAnimation,
-      [mediaQueries.reducedMotion]: "none",
-    },
-    animationDuration: "1s",
-    animationIterationCount: "infinite",
-    animationTimingFunction: "linear",
     width: "1000%",
-    transformOrigin: "right",
   },
 });
 

packages/hip-ui/src/components/radio/index.tsx

···
 import { Flex } from "../flex";
 import { Description, FieldErrorMessage, Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { ui, primary } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2.5"],
     alignItems: {
       default: "center",
       ":has(p)": "flex-start",
     },
     display: "flex",
-    gap: spacing["2.5"],
-
     fontFamily: fontFamily["sans"],
     fontSize: fontSize["sm"],
     lineHeight: lineHeight["sm"],
···
 
     borderRadius: radius["full"],
     borderWidth: 2,
+    position: "relative",
     height: spacing["4"],
-    position: "relative",
     width: spacing["4"],
 
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color, border-color, color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
   },
   selectionIndicator: {
-    backgroundColor: "white",
     borderRadius: radius["full"],
+    backgroundColor: "white",
     height: spacing["2"],
     width: spacing["2"],
 
+    position: "absolute",
+    transform: "translate(-50%, -50%)",
     left: "50%",
-    position: "absolute",
     top: "50%",
-    transform: "translate(-50%, -50%)",
 
     animationDuration: animationDuration.fast,
     animationFillMode: "forwards",
     animationName: {
       default: scaleIn,
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     animationTimingFunction: "ease-in-out",
   },
···
     color: "white",
   },
   group: {
+    gap: spacing["3"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["3"],
   },
 });
 

packages/hip-ui/src/components/search-field/search-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/segmented-control/index.tsx

···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { uiColor } from "../theme/semantic-color.stylex";
 import { shadow } from "../theme/shadow.stylex";
···
 
 const styles = stylex.create({
   group: {
+    padding: spacing["1"],
+    borderRadius: radius.lg,
+    gap: spacing["2"],
     alignItems: "center",
     backgroundColor: uiColor.component1,
-    borderRadius: radius.lg,
     boxShadow: "inset 0 0 10px 1px rgba(0, 0, 0, 0.1  )",
     boxSizing: "border-box",
     display: "flex",
-    gap: spacing["2"],
     height: {
+      ":is([data-size=lg])": spacing["11"],
+      ":is([data-size=md])": spacing["9"],
       ":is([data-size=sm])": spacing["7"],
-      ":is([data-size=md])": spacing["9"],
-      ":is([data-size=lg])": spacing["11"],
     },
-    padding: spacing["1"],
   },
   item: {
+    borderRadius: radius.md,
+    borderWidth: 0,
     alignItems: "center",
     backgroundColor: "transparent",
-    borderRadius: radius.md,
-    borderWidth: 0,
     boxSizing: "border-box",
     color: {
       default: uiColor.text1,
-      ":hover": uiColor.text2,
       ":is([data-selected])": uiColor.text2,
+      ":hover": uiColor.text2,
     },
     display: "flex",
     flexGrow: 1,
-    height: "100%",
     justifyContent: "center",
-    paddingBottom: spacing["1"],
-    paddingLeft: spacing["2"],
-    paddingRight: spacing["2"],
-    paddingTop: spacing["1"],
     position: "relative",
     zIndex: {
       default: 1,
       ":is([data-selected])": 0,
     },
+    height: "100%",
+    paddingBottom: spacing["1"],
+    paddingLeft: spacing["2"],
+    paddingRight: spacing["2"],
+    paddingTop: spacing["1"],
 
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   selectionIndicator: {
-    backgroundColor: uiColor.bgSubtle,
     borderRadius: radius.md,
+    backgroundColor: uiColor.bgSubtle,
     boxShadow: shadow.sm,
-    height: "100%",
-    left: 0,
     position: "absolute",
-    top: 0,
     transitionDuration: animationDuration.slow,
     transitionProperty: {
       default: "translate, width",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
+    zIndex: -1,
+    height: "100%",
+    left: 0,
+    top: 0,
     width: "100%",
-    zIndex: -1,
   },
 });
 

packages/hip-ui/src/components/select/select-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
     "../theme/usePopoverStyles.ts",

packages/hip-ui/src/components/sidebar/index.tsx

···
 import * as stylex from "@stylexjs/stylex";
 import { ChevronRight } from "lucide-react";
 import { createContext, use, useId, useMemo } from "react";
+import { mergeProps, useHover, usePress } from "react-aria";
 import {
   Button,
   Disclosure,
···
 
 import { Flex } from "../flex";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
 import { StyleXComponentProps } from "../theme/types";
 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
 import { Text } from "../typography/text";
-import { mergeProps, useHover, usePress } from "react-aria";
 
 interface SidebarContextType {
   headerId: string;
···
 
 const styles = stylex.create({
   sidebar: {
+    gap: spacing["6"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["6"],
     paddingBottom: spacing["12"],
     paddingLeft: spacing["8"],
     paddingRight: spacing["8"],
···
     width: spacing["64"],
   },
   sidebarHeader: {
-    marginBottom: spacing["4"],
     padding: spacing["3"],
+    alignItems: "center",
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center",
+    marginBottom: spacing["4"],
   },
   sidebarHeaderLink: {
     textDecoration: "none",
···
     paddingRight: spacing["3"],
   },
   sidebarSectionList: {
-    display: "flex",
-    flexDirection: "column",
-    gap: spacing["1"],
     margin: 0,
     padding: 0,
+    gap: spacing["1"],
+    display: "flex",
+    flexDirection: "column",
   },
   sidebarItem: {
+    borderRadius: radius["md"],
+    listStyle: "none",
     textDecoration: "none",
     alignItems: "center",
     backgroundColor: {
···
       ":is([data-hovered=true])": uiColor.component2,
       ":is([data-pressed=true])": uiColor.component3,
     },
-    borderRadius: radius["md"],
     color: uiColor.text2,
     display: "flex",
-    height: spacing["8"],
     fontSize: fontSize["sm"],
-    listStyle: "none",
-    paddingLeft: spacing["3"],
-    paddingRight: spacing["3"],
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["8"],
+    paddingLeft: spacing["3"],
+    paddingRight: spacing["3"],
   },
   sidebarItemActive: {
     backgroundColor: {
···
     flexDirection: "column",
   },
   sidebarGroupButton: {
+    padding: 0,
+    borderWidth: 0,
+    gap: spacing["1.5"],
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     color: uiColor.text2,
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: fontSize["base"],
     fontWeight: fontWeight["medium"],
-    gap: spacing["1.5"],
+    textAlign: "left",
     marginLeft: `calc(${spacing["2.5"]} * -1)`,
-    padding: 0,
-    textAlign: "left",
     width: "100%",
   },
   chevronIcon: {
+    transition: "rotate 250ms",
     rotate: {
       default: "0deg",
       ":is([aria-expanded=true] *)": "90deg",
     },
-    transition: "rotate 250ms",
   },
   sidebarGroupPanel: {
-    height: "var(--disclosure-panel-height)",
     overflow: "clip",
     transition: {
       default: "height 250ms",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
+    height: "var(--disclosure-panel-height)",
   },
   sidebarGroupPanelContent: {
+    gap: spacing["4"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["4"],
     paddingTop: spacing["5"],
   },
 });

packages/hip-ui/src/components/slider/index.tsx

···
     height: {
       ":is([data-orientation=horizontal] *)": spacing["1"],
       ":is([data-orientation=vertical] *)":
-        "calc(attr(data-progress type(<number>)) * 1%)",
+        "calc(attr(data-progress number) * 1%)",
     },
     width: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress type(<number>)) * 1%)",
+        "calc(attr(data-progress number) * 1%)",
       ":is([data-orientation=vertical] *)": spacing["1"],
     },
   },
···
     height: {
       ":is([data-orientation=horizontal] *)": spacing["1"],
       ":is([data-orientation=vertical] *)":
-        "calc(attr(data-progress-end type(<number>)) * 1% - attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
     },
     left: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-start number) * 1%)",
       ":is([data-orientation=vertical] *)": "50%",
     },
     top: {
       ":is([data-orientation=horizontal] *)": "50%",
       ":is([data-orientation=vertical] *)":
-        "calc(100% - attr(data-progress-end type(<number>)) * 1%)",
+        "calc(100% - attr(data-progress-end number) * 1%)",
     },
     width: {
       ":is([data-orientation=horizontal] *)":
-        "calc(attr(data-progress-end type(<number>)) * 1% - attr(data-progress-start type(<number>)) * 1%)",
+        "calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
       ":is([data-orientation=vertical] *)": spacing["1"],
     },
   },

packages/hip-ui/src/components/switch/index.tsx

···
 } from "react-aria-components";
 
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { shadow } from "../theme/shadow.stylex";
···
 
 const styles = stylex.create({
   wrapper: {
+    gap: spacing["2"],
     alignItems: "center",
     display: "flex",
-    gap: spacing["2"],
   },
   indicator: {
+    borderRadius: radius.full,
     backgroundColor: {
       default: uiColor.component3,
       ":is([data-selected=true] *)": primaryColor.solid1,
     },
-    borderRadius: radius.full,
     boxShadow: "inset 0 0 8px 1px rgba(0, 0, 0, 0.2)",
-    height: spacing["6"],
     opacity: {
       default: 1,
       ":is([data-disabled=true] *)": 0.5,
···
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["6"],
     width: spacing["10"],
   },
   thumb: {
-    backgroundColor: uiColor.bgSubtle,
     borderRadius: radius.full,
+    backgroundColor: uiColor.bgSubtle,
     boxShadow: shadow.lg,
     content: "''",
-    height: spacing["4"],
-    left: 0,
-    marginLeft: spacing["1"],
-    marginRight: spacing["1"],
     position: "absolute",
-    top: "50%",
     transform: {
       default: "translateY(-50%)",
       ":is([data-selected=true] *)": "translate(100%, -50%)",
···
     transitionDuration: animationDuration.fast,
     transitionProperty: "transform",
     transitionTimingFunction: "ease-in-out",
+    height: spacing["4"],
+    left: 0,
+    marginLeft: spacing["1"],
+    marginRight: spacing["1"],
+    top: "50%",
     width: spacing["4"],
   },
 });

packages/hip-ui/src/components/switch/switch-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
 };

packages/hip-ui/src/components/tabs/index.tsx

···
 
 import { SizeContext } from "../context";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
     flexDirection: "row",
   },
   tabList: {
+    gap: spacing["1"],
     alignItems: {
       ":is([data-orientation=horizontal])": "flex-start",
       ":is([data-orientation=vertical])": "stretch",
     },
+    display: "flex",
+    flexDirection: {
+      ":is([data-orientation=horizontal])": "row",
+      ":is([data-orientation=vertical])": "column",
+    },
+    position: "relative",
     borderBottomColor: {
       ":is([data-orientation=horizontal])": uiColor.border2,
       ":is([data-orientation=vertical])": "transparent",
···
       ":is([data-orientation=horizontal])": 0,
       ":is([data-orientation=vertical])": 1,
     },
-    display: "flex",
-    flexDirection: {
-      ":is([data-orientation=horizontal])": "row",
-      ":is([data-orientation=vertical])": "column",
-    },
-    gap: spacing["1"],
-    position: "relative",
   },
   tab: {
+    padding: {
+      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`,
+      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`,
+      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`,
+    },
+    borderWidth: 0,
+    outline: "none",
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     color: {
       default: uiColor.text1,
       ":is([data-hovered],[data-focused],[data-selected])": uiColor.text2,
···
     display: "flex",
     fontFamily: fontFamily["sans"],
     fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
       ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
     justifyContent: "center",
     opacity: {
       default: 1,
       ":is([data-disabled])": 0.5,
-    },
-    outline: "none",
-    padding: {
-      ":is([data-size=sm] *)": `${spacing["2"]} ${spacing["2.5"]}`,
-      ":is([data-size=md] *)": `${spacing["3"]} ${spacing["4"]}`,
-      ":is([data-size=lg] *)": `${spacing["4"]} ${spacing["5"]}`,
     },
     position: "relative",
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
   },
   selectionIndicator: {
     backgroundColor: "transparent",
+    position: "absolute",
+    transitionDuration: animationDuration.slow,
+    transitionProperty: {
+      default: "translate, width, height",
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    transitionTimingFunction: "ease-in-out",
     borderBottomColor: {
       default: "transparent",
       ":is([data-orientation=horizontal] > [data-selected] > *)":
···
       ":is([data-orientation=horizontal] *)": 0,
       ":is([data-orientation=vertical] *)": "unset",
     },
-    position: "absolute",
     right: {
       ":is([data-orientation=horizontal] *)": 0,
       ":is([data-orientation=vertical] *)": "0",
···
       ":is([data-orientation=horizontal] *)": "auto",
       ":is([data-orientation=vertical] *)": 0,
     },
-    transitionDuration: animationDuration.slow,
-    transitionProperty: {
-      default: "translate, width, height",
-      [mediaQueries.reducedMotion]: "none",
-    },
-    transitionTimingFunction: "ease-in-out",
     width: {
       ":is([data-orientation=horizontal] *)": "100%",
       ":is([data-orientation=vertical] *)": "auto",
     },
   },
   tabPanel: {
-    fontSize: {
-      ":is([data-size=sm] *)": fontSize["sm"],
-      ":is([data-size=md] *)": fontSize["base"],
-      ":is([data-size=lg] *)": fontSize["lg"],
-    },
-    outline: "none",
     padding: {
-      ":is([data-size=sm] *)": spacing["3"],
-      ":is([data-size=md] *)": spacing["4"],
       ":is([data-size=lg] *)": spacing["5"],
+      ":is([data-size=md] *)": spacing["4"],
+      ":is([data-size=sm] *)": spacing["3"],
+    },
+    outline: "none",
+    fontSize: {
+      ":is([data-size=lg] *)": fontSize["lg"],
+      ":is([data-size=md] *)": fontSize["base"],
+      ":is([data-size=sm] *)": fontSize["sm"],
     },
   },
   focusRing: {

packages/hip-ui/src/components/tabs/tabs-config.ts

···
     "../theme/spacing.stylex.tsx",
     "../theme/typography.stylex.tsx",
     "../theme/radius.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/types.ts",
     "../context.ts",
   ],

packages/hip-ui/src/components/tag-group/index.tsx

···
 
 import { Description, ErrorMessage, Label } from "../label";
 import { animationDuration } from "../theme/animations.stylex";
-import { mediaQueries } from "../theme/media-queries.stylex";
 import { radius } from "../theme/radius.stylex";
 import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
 import { spacing } from "../theme/spacing.stylex";
···
 
 const styles = stylex.create({
   group: {
+    gap: spacing["2"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["2"],
   },
   list: {
     alignItems: "center",
···
     rowGap: spacing["2.5"],
   },
   tag: {
-    alignItems: "center",
-    backgroundColor: {
-      default: uiColor.component1,
-      ":is([data-hovered])": uiColor.component2,
-      ":is([data-pressed])": uiColor.component3,
-      ":is([data-selected])": primaryColor.component1,
-    },
     borderColor: {
       default: uiColor.border2,
       ":is([data-hovered])": uiColor.border3,
···
     borderRadius: radius.full,
     borderStyle: "solid",
     borderWidth: 1,
+    gap: spacing["1.5"],
+    alignItems: "center",
+    backgroundColor: {
+      default: uiColor.component1,
+      ":is([data-hovered])": uiColor.component2,
+      ":is([data-pressed])": uiColor.component3,
+      ":is([data-selected])": primaryColor.component1,
+    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered])": uiColor.text2,
···
     },
     cursor: "default",
     display: "flex",
-    gap: spacing["1.5"],
     justifyContent: "center",
     opacity: {
       ":is([data-disabled])": 0.5,
···
     paddingTop: spacing["1"],
   },
   removeButton: {
+    margin: 0,
+    padding: 0,
+    borderRadius: radius.full,
+    borderWidth: 0,
     alignItems: "center",
     backgroundColor: {
       default: "transparent",
       ":hover": uiColor.component2,
       ":active": uiColor.component3,
     },
-    borderRadius: radius.full,
-    borderWidth: 0,
     color: {
       default: uiColor.text1,
       ":hover": uiColor.text2,
     },
     display: "flex",
-    height: spacing["4"],
     justifyContent: "center",
-    margin: 0,
-    padding: 0,
     transitionDuration: animationDuration.fast,
     transitionProperty: {
       default: "background-color",
-      [mediaQueries.reducedMotion]: "none",
+      "@media (prefers-reduced-motion: reduce)": "none",
     },
     transitionTimingFunction: "ease-in-out",
+    height: spacing["4"],
     width: spacing["4"],
   },
 });

packages/hip-ui/src/components/text-area/text-area-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
   dependencies: {

packages/hip-ui/src/components/text-field/text-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/theme/media-queries.stylex.tsx

···
-import * as stylex from "@stylexjs/stylex";
-
-// eslint-disable-next-line @stylexjs/enforce-extension
-export const breakpoints = stylex.defineConsts({
-  sm: "@media (min-width: 40rem)",
-  md: "@media (min-width: 48rem)",
-  lg: "@media (min-width: 64rem)",
-  xl: "@media (min-width: 80rem)",
-  "2xl": "@media (min-width: 96rem)",
-});
-
-// eslint-disable-next-line @stylexjs/enforce-extension
-export const mediaQueries = stylex.defineConsts({
-  reducedMotion: "@media (prefers-reduced-motion: reduce)",
-  supportsSquircle: "@supports (corner-shape: squircle)",
-});

packages/hip-ui/src/components/theme/typography.stylex.tsx

···
 import * as stylex from "@stylexjs/stylex";
 
-import { breakpoints } from "./media-queries.stylex";
 import { spacing } from "./spacing.stylex";
 
 export const fontFamily = stylex.defineVars({
···
 });
 
 export const fontWeight = stylex.defineVars({
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900",
+  thin: stylex.types.number(100),
+  extralight: stylex.types.number(200),
+  light: stylex.types.number(300),
+  normal: stylex.types.number(400),
+  medium: stylex.types.number(500),
+  semibold: stylex.types.number(600),
+  bold: stylex.types.number(700),
+  extrabold: stylex.types.number(800),
+  black: stylex.types.number(900),
 });
 
 export const fontSize = stylex.defineVars({
···
 // eslint-disable-next-line @stylexjs/enforce-extension
 export const typeramp = stylex.create({
   heading1: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: {
       default: fontSize["4xl"],
-      [breakpoints["md"]]: fontSize["5xl"],
+      "@media (min-width: 48rem)": fontSize["5xl"],
     },
     // eslint-disable-next-line @stylexjs/valid-styles
     fontWeight: fontWeight["extrabold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.base,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading2: {
-    borderBottomWidth: 1,
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: {
       default: fontSize["3xl"],
-      [breakpoints["md"]]: fontSize["4xl"],
+      "@media (min-width: 48rem)": fontSize["4xl"],
     },
     // eslint-disable-next-line @stylexjs/valid-styles
-    fontWeight: fontWeight["semibold"],
+    fontWeight: fontWeight.semibold,
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
+    borderBottomWidth: 1,
   },
   heading3: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["2xl"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading4: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["xl"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   heading5: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["lg"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
     scrollMarginBlockStart: spacing["20"],
   },
   body: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["base"] },
     lineHeight: lineHeight.base,
-    margin: 0,
   },
   smallBody: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["sm"] },
     lineHeight: lineHeight.base,
-    margin: 0,
   },
   label: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["sm"] },
···
     fontWeight: fontWeight["semibold"],
     letterSpacing: tracking["tight"],
     lineHeight: lineHeight.sm,
-    margin: 0,
   },
   sublabel: {
+    margin: 0,
     // eslint-disable-next-line @stylexjs/valid-styles
     fontFamily: fontFamily["sans"],
     fontSize: { default: fontSize["xs"] },
     // eslint-disable-next-line @stylexjs/valid-styles
     fontWeight: fontWeight["medium"],
     lineHeight: lineHeight.sm,
-    margin: 0,
   },
 });

packages/hip-ui/src/components/theme/useButtonStyles.ts

···
     boxShadow: shadow["xs"],
   },
   base: {
-    alignItems: "center",
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["full"],
     },
-    cornerShape: "squircle",
     borderStyle: "solid",
     borderWidth: 1,
+    gap: spacing["1"],
+    alignItems: "center",
     boxSizing: "border-box",
     display: "inline-flex",
     flexShrink: 0,
     fontFamily: fontFamily["sans"],
     fontWeight: fontWeight["medium"],
-    gap: spacing["1"],
     justifyContent: "center",
     opacity: {
       ":disabled": 0.5,
···
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   small: {
     fontSize: fontSize["xs"],
-    height: spacing["7"],
     lineHeight: lineHeight["xs"],
+    height: spacing["7"],
     paddingLeft: {
       default: spacing["2"],
     },
···
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["3.5"],
       pointerEvents: "none",
+      height: spacing["3.5"],
       width: spacing["3.5"],
     },
   },
   medium: {
-    fontSize: fontSize["sm"],
     gap: spacing["1.5"],
-    height: spacing["8"],
+    fontSize: fontSize["sm"],
     lineHeight: lineHeight["xs"],
+    height: spacing["8"],
     paddingLeft: {
       default: spacing["3"],
       ":has(svg+*)": spacing["2.5"],

packages/hip-ui/src/components/theme/useCalendarStyles.ts

···
 
 const styles = stylex.create({
   cell: {
+    padding: spacing["1"],
     borderRadius: radius.md,
+    textDecoration: {
+      ":is([data-unavailable])": "line-through",
+    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
···
     opacity: {
       ":is([data-outside-visible-range],[data-unavailable])": 0.5,
     },
-    padding: spacing["1"],
     position: "relative",
     textAlign: "center",
-    textDecoration: {
-      ":is([data-unavailable])": "line-through",
-    },
     transitionDuration: animationDuration.fast,
     transitionProperty: "color",
     transitionTimingFunction: "ease-in-out",
+    zIndex: 0,
     width: spacing["8"],
-    zIndex: 0,
 
     "::before": {
+      inset: spacing["1"],
       content: "''",
-      inset: spacing["1"],
       position: "absolute",
       transitionDuration: animationDuration.fast,
       transitionProperty: "background-color",
···
     },
   },
   nonRangeCell: {
+    borderRadius: {
+      "::before": radius.md,
+    },
     backgroundColor: {
       ":is(*)::before": "transparent",
       ":is([data-hovered]):not([data-unavailable])::before": uiColor.component2,
···
       ":is([data-selected]):not([data-unavailable]):hover::before":
         primaryColor.component3,
     },
-    borderRadius: {
-      "::before": radius.md,
-    },
     color: {
       default: uiColor.text1,
       ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
···
       ":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before":
         primaryColor.component3,
     },
+    color: {
+      default: uiColor.text1,
+      ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
+      ":is([data-selection-start],[data-selection-end])": primaryColor.text2,
+    },
     borderBottomLeftRadius: {
       ":is([data-selection-start],td:first-child > *)::before": radius.md,
     },
···
     borderTopRightRadius: {
       ":is([data-selection-end],td:last-child > *)::before": radius.md,
     },
-    color: {
-      default: uiColor.text1,
-      ":is([data-hovered]):not([data-unavailable])": uiColor.text2,
-      ":is([data-selection-start],[data-selection-end])": primaryColor.text2,
-    },
     marginLeft: {
       ":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${spacing["2"]} * -1)`,
     },
···
   headerCell: {
     fontSize: fontSize["sm"],
     fontWeight: fontWeight["medium"],
-    paddingBottom: spacing["1"],
     textAlign: "center",
+    paddingBottom: spacing["1"],
   },
   heading: {
+    margin: 0,
     fontSize: fontSize["lg"],
     fontWeight: fontWeight["semibold"],
-    margin: 0,
     textAlign: "center",
   },
   grid: {
     borderCollapse: "collapse",
   },
   wrapper: {
+    gap: spacing["3"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["3"],
   },
 });
 

packages/hip-ui/src/components/theme/useDialogStyles.ts

···
 
 const styles = stylex.create({
   overlay: {
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    height: "var(--page-height)",
-    left: 0,
-    position: "absolute",
-    top: 0,
-    width: "100vw",
-    zIndex: 100,
-
     animationDuration: animationDuration.slow,
     animationName: {
       ":is([data-entering])": animations.fadeIn,
     },
     animationTimingFunction: "ease-in",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
     opacity: {
       default: 1,
       ":is([data-exiting])": 0,
     },
+    position: "absolute",
     transitionDuration: {
       ":is([data-exiting])": animationDuration.fast,
     },
     transitionProperty: "opacity",
     transitionTimingFunction: "ease-in-out",
+    zIndex: 100,
+    height: "var(--page-height)",
+    left: 0,
+    top: 0,
+    width: "100vw",
   },
   modal: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["lg"],
       "@supports (corner-shape: squircle)": radius["4xl"],
     },
-    cornerShape: "squircle",
+    outline: "none",
     boxShadow: shadow["lg"],
     display: "flex",
     flexDirection: "column",
+    position: "fixed",
+    translate: "-50% -50%",
     left: "50%",
     maxHeight: "calc(var(--visual-viewport-height) * 0.8)",
-    outline: "none",
-    position: "fixed",
     top: "calc(var(--visual-viewport-height) / 2)",
-    translate: "-50% -50%",
 
     animationDuration: { ":is([data-entering])": "300ms" },
     animationName: { ":is([data-entering])": animations.zoomIn },
···
     },
   },
   dialog: {
+    outline: "none",
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
     minHeight: 0,
-    outline: "none",
   },
   size: (size: Size) => ({
     width: size === "sm" ? 400 : size === "md" ? 600 : 800,

packages/hip-ui/src/components/theme/useInputStyles.ts

···
 
 const styles = stylex.create({
   field: {
+    gap: spacing["2"],
     display: "flex",
     flexDirection: "column",
-    gap: spacing["2"],
   },
   addon: {
     color: ui.textDim,
···
     minWidth: spacing["8"],
     paddingLeft: { ":first-child": spacing["0.5"] },
     paddingRight: {
-      ":last-child": spacing["2"],
       ":last-child:has(svg)": spacing["0.5"],
+      ":last-child": spacing["2"],
     },
 
+    gap: spacing["0.5"],
     alignItems: "center",
     display: "flex",
-    gap: spacing["0.5"],
     justifyContent: "center",
 
     // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   inputWrapper: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    padding: 0,
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["3xl"],
     },
-    cornerShape: "squircle",
     borderWidth: 0,
+    overflow: "hidden",
     boxSizing: "border-box",
     display: "flex",
     lineHeight: lineHeight["none"],
-    overflow: "hidden",
-    padding: 0,
   },
   input: {
+    borderWidth: 0,
+    outline: "none",
     alignItems: "center",
     backgroundColor: "transparent",
-    borderWidth: 0,
     boxSizing: "border-box",
     color: {
       ":is(::placeholder,[data-placeholder])": uiColor.text1,
···
     flexGrow: 1,
     lineHeight: lineHeight["none"],
     minWidth: 0,
-    outline: "none",
 
     appearance: {
       "::-webkit-search-cancel-button": "none",
···
   primary: {
     borderColor: {
       default: uiColor.border2,
-      ":has([data-hovered]:not([data-invalid])": uiColor.border3,
-      ":focus": uiColor.solid1,
+      ":has([data-hovered]):not([data-invalid])": uiColor.border3,
       ":has([data-invalid])": criticalColor.border2,
+      ":focus": uiColor.solid1,
     },
     borderStyle: "solid",
     borderWidth: 1,

packages/hip-ui/src/components/theme/useListBoxItemStyles.ts

···
     display: "flex",
     userSelect: "none",
 
+    outline: {
+      default: "none",
+      ":focus": "none",
+    },
     boxSizing: "border-box",
     fontWeight: {
       default: fontWeight["normal"],
       [":is([data-react-aria-pressable=true][data-selected=true])"]:
         fontWeight["medium"],
-    },
-    outline: {
-      default: "none",
-      ":focus": "none",
     },
     paddingBottom: spacing["0.5"],
     paddingLeft: spacing["1"],
···
   md: { minHeight: spacing["9"] },
   lg: { minHeight: spacing["12"] },
   itemInner: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
+    borderRadius: {
+      default: radius["md"],
+      "@supports (corner-shape: squircle)": radius["3xl"],
+    },
+    gap: spacing["3"],
     alignItems: "center",
     backgroundColor: {
       default: "transparent",
···
       [":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]:
         uiColor.component3,
     },
-    borderRadius: {
-      default: radius["md"],
-      "@supports (corner-shape: squircle)": radius["3xl"],
-    },
-    cornerShape: "squircle",
     boxSizing: "border-box",
     color: {
       default: uiColor.text2,
···
     },
     display: "flex",
     flexGrow: 1,
-    gap: spacing["3"],
+    transitionDuration: animationDuration.fast,
+    transitionProperty: "background-color",
+    transitionTimingFunction: "ease-in-out",
     paddingBottom: spacing["2"],
     paddingLeft: spacing["3"],
     paddingRight: spacing["3"],
     paddingTop: spacing["2"],
-    transitionDuration: animationDuration.fast,
-    transitionProperty: "background-color",
-    transitionTimingFunction: "ease-in-out",
   },
   smItemInner: {
-    fontSize: fontSize["xs"],
     gap: spacing["2"],
+    fontSize: fontSize["xs"],
     lineHeight: lineHeight["xs"],
     paddingBottom: spacing["1"],
     paddingTop: spacing["1"],
···
     marginTop: `calc(${spacing["2"]} * -1)`,
     minWidth: spacing["4"],
 
-    // eslint-disa le-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
+    // eslint-disable-next-line @stylexjs/valid-styles
     ":is(*) svg": {
       flexShrink: 0,
-      height: spacing["4"],
       pointerEvents: "none",
+      height: spacing["4"],
       width: spacing["4"],
     },
   },
   label: {
+    gap: spacing["1.5"],
     color: {
       [":is([data-variant=destructive] *)"]: criticalColor.text1,
     },
     display: "flex",
     flexDirection: "column",
     flexGrow: 1,
-    gap: spacing["1.5"],
   },
 });
 

packages/hip-ui/src/components/theme/usePopoverStyles.ts

···
 
 const styles = stylex.create({
   popover: {
+    // eslint-disable-next-line @stylexjs/valid-styles
+    cornerShape: "squircle",
     borderRadius: {
       default: radius["md"],
       "@supports (corner-shape: squircle)": radius["3xl"],
     },
-    cornerShape: "squircle",
-    boxShadow: shadow["md"],
     outline: "none",
     overflow: "auto",
+    boxShadow: shadow["md"],
   },
   animation: {
     "--origin-x": {
···
       ":is([data-placement=right],[data-placement=right] > *)": `calc(${spacing["4"]} * -1)`,
     },
     "--origin-y": {
-      ":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
       ":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${spacing["4"]} * -1)`,
+      ":is([data-placement=top],[data-placement=top] > *)": spacing["4"],
     },
     opacity: {
       ":is([data-entering], [data-entering] > *)": 0,

packages/hip-ui/src/components/time-field/time-field-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/toggle-button-group/toggle-button-group-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     // TODO:
     // "button"

packages/hip-ui/src/components/tooltip/tooltip-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
   ],
   dependencies: {

packages/hip-ui/src/components/tree/tree-config.ts

···
     "../theme/radius.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/typography.stylex.tsx",
-    "../theme/media-queries.stylex.tsx",
     "../theme/shadow.stylex.tsx",
     "../theme/useInputStyles.ts",
   ],

packages/hip-ui/src/components/typography/typography-config.ts

···
   name: "typography",
   filepath: "./index.tsx",
   hipDependencies: [
-    "../theme/media-queries.stylex.tsx",
     "../theme/semantic-color.stylex.tsx",
     "../theme/spacing.stylex.tsx",
     "../theme/typography.stylex.tsx",

pnpm-lock.yaml

···
       specifier: 3.9.2
       version: 3.9.2
     '@stylexjs/stylex':
-      specifier: 0.16.2
-      version: 0.16.2
+      specifier: 0.17.0
+      version: 0.17.0
     '@types/node':
       specifier: 24.9.1
       version: 24.9.1
···
         specifier: ^3.0.0
         version: 3.0.0
       '@stylexjs/stylex':
-        specifier: ^0.16.2
-        version: 0.16.2
+        specifier: ^0.17.0
+        version: 0.17.0
+      '@stylexjs/unplugin':
+        specifier: ^0.17.0
+        version: 0.17.0(unplugin@2.3.10)
       '@tailwindcss/vite':
         specifier: ^4.1.16
         version: 4.1.16(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
···
       '@window-splitter/react':
         specifier: ^1.1.2
         version: 1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      browserslist:
+        specifier: ^4.28.0
+        version: 4.28.0
       change-case:
         specifier: 'catalog:'
         version: 5.4.4
···
       glob:
         specifier: ^11.0.3
         version: 11.0.3
+      lightningcss:
+        specifier: ^1.30.2
+        version: 1.30.2
       lucide-react:
         specifier: ^0.545.0
         version: 0.545.0(react@19.2.0)
···
       tldraw:
         specifier: ^4.1.2
         version: 4.1.2(@types/react-dom@19.2.0(@types/react@19.2.0))(@types/react@19.2.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      unplugin-stylex:
-        specifier: ^0.5.5
-        version: 0.5.5(@stylexjs/stylex@0.16.2)(rollup@4.52.5)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       vite-tsconfig-paths:
         specifier: ^5.1.4
         version: 5.1.4(typescript@5.9.3)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
···
         version: link:../../packages/typescript-config
       '@stylexjs/stylex':
         specifier: 'catalog:'
-        version: 0.16.2
+        version: 0.17.0
       hip-ui:
         specifier: workspace:*
         version: link:../../packages/hip-ui
···
         version: 3.42.0(react@19.2.0)
       unplugin-stylex:
         specifier: ^0.5.5
-        version: 0.5.5(@stylexjs/stylex@0.16.2)(rollup@4.52.5)(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
+        version: 0.5.5(@stylexjs/stylex@0.17.0)(rollup@4.52.5)(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       waku:
         specifier: 0.26.1
         version: 0.26.1(@swc/helpers@0.5.17)(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@19.2.0(react@19.2.0))(react-server-dom-webpack@19.2.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(webpack@5.102.1))(react@19.2.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
···
         specifier: ^2.2.3
         version: 2.2.3(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@stylexjs/eslint-plugin':
-        specifier: ^0.16.2
-        version: 0.16.2
+        specifier: ^0.17.0
+        version: 0.17.0
       eslint-config-flat-gitignore:
         specifier: ^2.1.0
         version: 2.1.0(eslint@9.38.0(jiti@2.6.1))
···
         version: 3.32.1(react@19.2.0)
       '@stylexjs/stylex':
         specifier: 'catalog:'
-        version: 0.16.2
+        version: 0.17.0
       '@window-splitter/react':
         specifier: ^1.0.0
         version: 1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
···
   '@stylexjs/babel-plugin@0.16.2':
     resolution: {integrity: sha512-rnxEaAwZvg7WLjsKn1hYbTYXvRFRX6qisp+9JLrPY5cyzskh19k8sp+HiO8m2vTEvoScq1SC19fFzuiSXIRKbQ==}
 
-  '@stylexjs/eslint-plugin@0.16.2':
-    resolution: {integrity: sha512-7rAS8NjiPjKluOA2XInpyGimmVRiXzxYSCSf66P5ofjgluFXQUBdteojN6jvssiP25L5wwIN/su5nBXwHxhjeQ==}
+  '@stylexjs/babel-plugin@0.17.0':
+    resolution: {integrity: sha512-L3nVEo6vvpw5OUGR1SZTZvTzNAz0/1BTQgx1i78IkhvhnewC0Pe39b1GAKhv8uko7v5mz8zn4DEJ+MVsAN1qJA==}
+
+  '@stylexjs/eslint-plugin@0.17.0':
+    resolution: {integrity: sha512-h65BtIBJ6ieMKdvxFQWKGveFmCR7vhy0RPKNPBYGV4IxxnlKH/S2xtX7x/K44OLxXFmrrA2O8egXFLA+oJRLXQ==}
+
+  '@stylexjs/shared@0.17.0':
+    resolution: {integrity: sha512-iOyZfHV0rKbIUe+fdjwIFPb3a0SUSE5u+ADMrC/OF+QZeUncbng58MWHnbWo6yeg+4J6onBZIywiI/pJJ6rYUQ==}
 
   '@stylexjs/stylex@0.16.2':
     resolution: {integrity: sha512-nOInNL+F70hsI9fwxCTO8qnzhF8bQTvU4CeeqjAb7BtvAAryey6zBHJCJ7u94P8ES8suB9NOaPFr4DIxmr319Q==}
 
+  '@stylexjs/stylex@0.17.0':
+    resolution: {integrity: sha512-dgAmC7FFIObzwkPsLxXIzgOyueO+rwCVqWW0THMr0S/Hohu7Har2a5kls+PstSpS7CiVn4HJ4OfyYK0PyPbJfQ==}
+
+  '@stylexjs/unplugin@0.17.0':
+    resolution: {integrity: sha512-PnufOP3YUbIRDLJh0G4m2fJvrLUAPpX8fWOlbQNHXIBUWw0YFcfOJ96UH6kne32G8g5RVY5mTF5U+WrCsGWttg==}
+    peerDependencies:
+      unplugin: ^1.7.1
+
   '@swc/core-darwin-arm64@1.13.5':
     resolution: {integrity: sha512-lKNv7SujeXvKn16gvQqUQI5DdyY8v7xcoO3k06/FJbHJS90zEwZdQiMNRiqpYw/orU543tPaWgz7cIYWhbopiQ==}
     engines: {node: '>=10'}
···
     resolution: {integrity: sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==}
     hasBin: true
 
+  baseline-browser-mapping@2.8.30:
+    resolution: {integrity: sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==}
+    hasBin: true
+
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
···
 
   browserslist@4.27.0:
     resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  browserslist@4.28.0:
+    resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
···
 
   caniuse-lite@1.0.30001751:
     resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
+
+  caniuse-lite@1.0.30001756:
+    resolution: {integrity: sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
···
 
   electron-to-chromium@1.5.240:
     resolution: {integrity: sha512-OBwbZjWgrCOH+g6uJsA2/7Twpas2OlepS9uvByJjR2datRDuKGYeD+nP8lBBks2qnB7bGJNHDUx7c/YLaT3QMQ==}
+
+  electron-to-chromium@1.5.259:
+    resolution: {integrity: sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==}
 
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
···
   node-releases@2.0.26:
     resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}
 
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
   nopt@8.1.0:
     resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
     engines: {node: ^18.17.0 || >=20.5.0}
···
     dependencies:
       '@babel/compat-data': 7.28.5
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.27.0
+      browserslist: 4.28.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
···
     transitivePeerDependencies:
       - supports-color
 
-  '@stylexjs/eslint-plugin@0.16.2':
+  '@stylexjs/babel-plugin@0.17.0':
     dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      '@stylexjs/shared': 0.17.0
+      '@stylexjs/stylex': 0.17.0
+      postcss-value-parser: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@stylexjs/eslint-plugin@0.17.0':
+    dependencies:
+      '@stylexjs/shared': 0.17.0
       css-shorthand-expand: 1.2.0
       micromatch: 4.0.8
       postcss-value-parser: 4.2.0
 
+  '@stylexjs/shared@0.17.0': {}
+
   '@stylexjs/stylex@0.16.2':
     dependencies:
       css-mediaquery: 0.1.2
       invariant: 2.2.4
       styleq: 0.2.1
+
+  '@stylexjs/stylex@0.17.0':
+    dependencies:
+      css-mediaquery: 0.1.2
+      invariant: 2.2.4
+      styleq: 0.2.1
+
+  '@stylexjs/unplugin@0.17.0(unplugin@2.3.10)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@stylexjs/babel-plugin': 0.17.0
+      browserslist: 4.28.0
+      lightningcss: 1.30.2
+      unplugin: 2.3.10
+    transitivePeerDependencies:
+      - supports-color
 
   '@swc/core-darwin-arm64@1.13.5':
     optional: true
···
       vite: 7.1.5(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
       vitefu: 1.1.1(vite@7.1.5(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
 
-  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@bcoe/v8-coverage': 1.0.2
-      ast-v8-to-istanbul: 0.3.8
-      debug: 4.4.3
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6
-      istanbul-reports: 3.2.0
-      magic-string: 0.30.21
-      magicast: 0.3.5
-      std-env: 3.10.0
-      test-exclude: 7.0.1
-      tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitest/coverage-v8@3.2.4(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
···
   base64-js@1.5.1: {}
 
   baseline-browser-mapping@2.8.20: {}
+
+  baseline-browser-mapping@2.8.30: {}
 
   bidi-js@1.0.3:
     dependencies:
···
       node-releases: 2.0.26
       update-browserslist-db: 1.1.4(browserslist@4.27.0)
 
+  browserslist@4.28.0:
+    dependencies:
+      baseline-browser-mapping: 2.8.30
+      caniuse-lite: 1.0.30001756
+      electron-to-chromium: 1.5.259
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.28.0)
+
   buffer-crc32@1.0.0: {}
 
   buffer-from@1.1.2: {}
···
   camelcase@8.0.0: {}
 
   caniuse-lite@1.0.30001751: {}
+
+  caniuse-lite@1.0.30001756: {}
 
   ccount@2.0.1: {}
 
···
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.240: {}
+
+  electron-to-chromium@1.5.259: {}
 
   emoji-regex@10.6.0: {}
 
···
 
   node-releases@2.0.26: {}
 
+  node-releases@2.0.27: {}
+
   nopt@8.1.0:
     dependencies:
       abbrev: 3.0.1
···
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  unplugin-stylex@0.5.5(@stylexjs/stylex@0.16.2)(rollup@4.52.5)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)):
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
-      '@stylexjs/babel-plugin': 0.16.2
-      '@stylexjs/stylex': 0.16.2
-      '@types/node': 24.9.1
-      '@vitest/coverage-v8': 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
-      unplugin: 1.16.1
-    transitivePeerDependencies:
-      - '@vitest/browser'
-      - rollup
-      - supports-color
-      - vitest
-
-  unplugin-stylex@0.5.5(@stylexjs/stylex@0.16.2)(rollup@4.52.5)(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)):
+  unplugin-stylex@0.5.5(@stylexjs/stylex@0.17.0)(rollup@4.52.5)(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)):
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
···
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@stylexjs/babel-plugin': 0.16.2
-      '@stylexjs/stylex': 0.16.2
+      '@stylexjs/stylex': 0.17.0
       '@types/node': 24.9.1
       '@vitest/coverage-v8': 3.2.4(vitest@4.0.3(@types/debug@4.1.12)(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       unplugin: 1.16.1
···
   update-browserslist-db@1.1.4(browserslist@4.27.0):
     dependencies:
       browserslist: 4.27.0
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  update-browserslist-db@1.1.4(browserslist@4.28.0):
+    dependencies:
+      browserslist: 4.28.0
       escalade: 3.2.0
       picocolors: 1.1.1
 

pnpm-workspace.yaml

···
 catalog:
   "@react-stately/utils": 3.10.8
   "@react-types/overlays": 3.9.2
-  "@stylexjs/stylex": 0.16.2
+  "@stylexjs/stylex": 0.17.0
   "@types/node": 24.9.1
   "@types/react": 19.2.0
   "@types/react-dom": 19.2.0