/* uichemy-vl-single.css — generated from the local Next.js build by _raw/video-tutorials/extract.mjs */ .uc-vl{--font-zalando-sans:"Zalando Sans",sans-serif;font-family:var(--font-zalando-sans)} @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false; } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --uc-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --tw-border-spacing-x { syntax: ""; inherits: false; initial-value: 0; } @property --tw-border-spacing-y { syntax: ""; inherits: false; initial-value: 0; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-pan-x { syntax: "*"; inherits: false; } @property --tw-pan-y { syntax: "*"; inherits: false; } @property --tw-pinch-zoom { syntax: "*"; inherits: false; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){.uc-vl *, .uc-vl ::before, .uc-vl ::after, .uc-vl ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; --uc-angle: 0deg; }} .uc-vl, .uc-vl{ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-800: oklch(44.4% 0.177 26.899); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-amber-50: oklch(98.7% 0.022 95.277); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-800: oklch(44.8% 0.119 151.328); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-600: oklch(54.1% 0.281 293.009); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-900: oklch(21% 0.034 264.665); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: 4px; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --shadow-sm: 0 1px 2px 0 #1018280f; --shadow-md: 0 4px 2px -2px #1018280f; --shadow-lg: 0 4px 6px -2px #10182808; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; --blur-md: 12px; --blur-xl: 24px; --blur-2xl: 40px; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --font-zalando-sans: "Zalando Sans", sans-serif; --font-nanum-pen: "Nanum Pen Script", cursive; --color-sprout-color-primary-lightest: #fff1eb; --color-sprout-color-primary-lighter: #ffb89a; --color-sprout-color-primary: #fd6a35; --color-sprout-color-primary-darker: #cc4b23; --color-uc-dark: var(--color-sprout-color-background-dark); --color-uc-dark-card: var(--color-sprout-color-background-weaker-2); --color-sprout-color-secondary-lightest: #f2eeff; --color-sprout-color-secondary-lighter: #b8a9ff; --color-sprout-color-secondary: #5202fd; --color-sprout-color-background-weaker: #ffffff; --color-sprout-color-background-weaker-2: rgba(255, 255, 255, 0.1); --color-sprout-color-background-default: #f4f4f4; --color-sprout-color-background-stronger: #ebebeb; --color-sprout-color-background-strongest: #e3e3ed; --color-sprout-color-background-dark: #171717; --color-sprout-color-background-dark-2: #202020; --color-sprout-color-background-blue: #3600af; --color-sprout-color-text-default: #0a0a0a; --color-sprout-color-text-weaker: #737373; --color-sprout-color-text-weakest: #a3a3a3; --color-sprout-color-text-stronger: #171717; --color-sprout-color-text-disabled: #737373; --color-sprout-color-text-white: #ffffff; --color-sprout-color-border-weak: #e5e5e5; --color-sprout-color-border-default: #d4d4d4; --color-sprout-color-border-dark-weak: #737373; --color-sprout-color-border-dark-default: #404040; --color-sprout-color-success: #2ea343; --color-sprout-color-success-darker: #0a842a; --color-sprout-color-secondary-darker: #3600af; --color-sprout-color-error-lightest: #fff2ef; --color-sprout-color-error: #f65258; --color-primary: var(--primary); --color-secondary: var(--secondary); --color-accent: var(--accent); --color-titlelight: #0d0d0d; --color-neutral: #d6d6d6; --shadow-sprout-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sprout-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1); --radius-sprout-4: 4px; --radius-sprout-6: 6px; --radius-sprout-8: 8px; --radius-sprout-12: 12px; --radius-sprout-16: 16px; --radius-sprout-24: 24px; --radius-sprout-infinite: 9999px; --spacing-sprout-0: 0; --spacing-sprout-2: 2px; --spacing-sprout-4: 4px; --spacing-sprout-6: 6px; --spacing-sprout-8: 8px; --spacing-sprout-10: 10px; --spacing-sprout-12: 12px; --spacing-sprout-16: 16px; --spacing-sprout-20: 20px; --spacing-sprout-24: 24px; --spacing-sprout-32: 32px; --spacing-sprout-40: 40px; --spacing-sprout-48: 48px; --spacing-sprout-56: 56px; --spacing-sprout-64: 64px; --spacing-sprout-80: 80px; --color-border: var(--border); } .uc-vl *, .uc-vl ::after, .uc-vl ::before, .uc-vl ::backdrop, .uc-vl ::file-selector-button{ box-sizing: border-box; margin: 0px; padding: 0px; border: 0px solid; } .uc-vl, .uc-vl{ line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } .uc-vl h1, .uc-vl h2, .uc-vl h3, .uc-vl h4, .uc-vl h5, .uc-vl h6{ font-size: inherit; font-weight: inherit; } .uc-vl a{ color: inherit; text-decoration: inherit; } .uc-vl summary{ display: list-item; } .uc-vl ol, .uc-vl ul, .uc-vl menu{ list-style: none; } .uc-vl img, .uc-vl svg, .uc-vl video, .uc-vl canvas, .uc-vl audio, .uc-vl iframe, .uc-vl embed, .uc-vl object{ display: block; vertical-align: middle; } .uc-vl img, .uc-vl video{ max-width: 100%; height: auto; } .uc-vl button, .uc-vl input, .uc-vl select, .uc-vl optgroup, .uc-vl textarea, .uc-vl ::file-selector-button{ font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0px; background-color: transparent; opacity: 1; } .uc-vl ::file-selector-button{ margin-inline-end: 4px; } .uc-vl ::placeholder{ opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){.uc-vl ::placeholder{ color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(currentcolor, transparent); } }} .uc-vl ::-webkit-search-decoration{ appearance: none; } .uc-vl ::-webkit-date-and-time-value{ min-height: 1lh; text-align: inherit; } .uc-vl ::-webkit-datetime-edit{ display: inline-flex; } .uc-vl ::-webkit-datetime-edit-fields-wrapper{ padding: 0px; } .uc-vl ::-webkit-datetime-edit, .uc-vl ::-webkit-datetime-edit-year-field, .uc-vl ::-webkit-datetime-edit-month-field, .uc-vl ::-webkit-datetime-edit-day-field, .uc-vl ::-webkit-datetime-edit-hour-field, .uc-vl ::-webkit-datetime-edit-minute-field, .uc-vl ::-webkit-datetime-edit-second-field, .uc-vl ::-webkit-datetime-edit-millisecond-field, .uc-vl ::-webkit-datetime-edit-meridiem-field{ padding-block: 0px; } .uc-vl ::-webkit-calendar-picker-indicator{ line-height: 1; } .uc-vl button, .uc-vl input:where([type="button"], [type="reset"], [type="submit"]), .uc-vl ::file-selector-button{ appearance: button; } .uc-vl ::-webkit-inner-spin-button, .uc-vl ::-webkit-outer-spin-button{ height: auto; } .uc-vl *{ border-color: var(--border); outline-color: var(--ring); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--ring) 50%, transparent); } } .uc-vl, .uc-vl{ background-color: var(--background); color: var(--foreground); overflow-x: clip; max-width: 100%; } .uc-vl::-webkit-scrollbar, .uc-vl::-webkit-scrollbar{ width: 14px; background: transparent; } .uc-vl::-webkit-scrollbar-track, .uc-vl::-webkit-scrollbar-track{ background: transparent; } .uc-vl::-webkit-scrollbar-thumb, .uc-vl::-webkit-scrollbar-thumb{ background-color: rgb(176, 176, 176); border-radius: 9999px; border: 4px solid transparent; background-clip: content-box; min-height: 48px; } .uc-vl::-webkit-scrollbar-thumb:hover, .uc-vl::-webkit-scrollbar-thumb:hover{ background-color: rgb(138, 138, 138); } .uc-vl::-webkit-scrollbar-button:single-button, .uc-vl::-webkit-scrollbar-button:single-button{ background-repeat: no-repeat; background-position: center center; background-size: 8px auto; height: 14px; width: 14px; } .uc-vl::-webkit-scrollbar-button:single-button:vertical:decrement, .uc-vl::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image: url("data:image/svg+xml;utf8,"); } .uc-vl::-webkit-scrollbar-button:single-button:vertical:increment, .uc-vl::-webkit-scrollbar-button:single-button:vertical:increment{ background-image: url("data:image/svg+xml;utf8,"); } @supports not selector(::-webkit-scrollbar){.uc-vl, .uc-vl{ scrollbar-width: thin; scrollbar-color: rgb(176, 176, 176) transparent; }} html[data-scroll-locked] .uc-vl{ margin-right: 0px !important; } .uc-vl ::selection{ background-color: rgba(82, 2, 253, 0.18) !important; } .uc-vl .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0px; } .uc-vl .relative{ position: relative; } .uc-vl .min-w-0{ min-width: calc(var(--spacing) * 0); } .uc-vl .overflow-hidden{ overflow: hidden; } .uc-vl .border-\(length\:--border-beam-width\){ border-style: var(--tw-border-style); border-width: var(--border-beam-width); } .uc-vl .border-\[\#5202FD\]\/40{ border-color: color-mix(rgb(82, 2, 253) 40%, transparent 60%); } .uc-vl .border-\[\#5202fd\]\/40{ border-color: color-mix(rgb(82, 2, 253) 40%, transparent 60%); } .uc-vl .border-\[\#ff5a1f\]\/45{ border-color: color-mix(rgb(255, 90, 31) 45%, transparent 55%); } .uc-vl .border-\[\#ff5a1f\]\/60{ border-color: color-mix(rgb(255, 90, 31) 60%, transparent 40%); } .uc-vl .bg-\[\#0ae448\]\/\[\.16\]{ background-color: color-mix(rgb(10, 228, 72) 16%, transparent 84%); } .uc-vl .bg-\[\#0f1720\]\/20{ background-color: color-mix(rgb(15, 23, 32) 20%, transparent 80%); } .uc-vl .bg-\[\#00C070\]\/10{ background-color: color-mix(rgb(0, 192, 112) 10%, transparent 90%); } .uc-vl .bg-\[\#2EA343\]\/5{ background-color: color-mix(rgb(46, 163, 67) 5%, transparent 95%); } .uc-vl .bg-\[\#6D68FE\]\/10{ background-color: color-mix(rgb(109, 104, 254) 10%, transparent 90%); } .uc-vl .bg-\[\#6E5AFF\]\/5{ background-color: color-mix(rgb(110, 90, 255) 5%, transparent 95%); } .uc-vl .bg-\[\#5202FD\]\/10{ background-color: color-mix(rgb(82, 2, 253) 10%, transparent 90%); } .uc-vl .bg-\[\#5202FD\]\/\[0\.08\]{ background-color: color-mix(rgb(82, 2, 253) 8%, transparent 92%); } .uc-vl .bg-\[\#121212\]\/95{ background-color: color-mix(rgb(18, 18, 18) 95%, transparent 5%); } .uc-vl .bg-\[\#161616\]\/80{ background-color: color-mix(rgb(22, 22, 22) 80%, transparent 20%); } .uc-vl .bg-\[\#171717\]\/95{ background-color: color-mix(rgb(23, 23, 23) 95%, transparent 5%); } .uc-vl .bg-\[\#FD6A35\]\/10{ background-color: color-mix(rgb(253, 106, 53) 10%, transparent 90%); } .uc-vl .bg-\[\#FF6B35\]\/10{ background-color: color-mix(rgb(255, 107, 53) 10%, transparent 90%); } .uc-vl .bg-\[\#FF46C7\]\/10{ background-color: color-mix(rgb(255, 70, 199) 10%, transparent 90%); } .uc-vl .bg-\[\#fd6a35\]\/5{ background-color: color-mix(rgb(253, 106, 53) 5%, transparent 95%); } .uc-vl .bg-\[\#fd6a35\]\/\[\.28\]{ background-color: color-mix(rgb(253, 106, 53) 28%, transparent 72%); } .uc-vl .from-\[\#5202fd\]\/10{ --tw-gradient-from: color-mix(in oklab, #5202fd 10%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .uc-vl .via-\[\#5202FD\]\/70{ --tw-gradient-via: color-mix(in oklab, #5202FD 70%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .uc-vl .via-\[\#171717\]\/60{ --tw-gradient-via: color-mix(in oklab, #171717 60%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .uc-vl .via-\[\#FD6A35\]\/70{ --tw-gradient-via: color-mix(in oklab, #FD6A35 70%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .uc-vl .font-sans{ font-family: var(--font-sans); } .uc-vl .font-zalando-sans{ font-family: var(--font-zalando-sans); } .uc-vl .text-\[11px\]\/\[14px\]{ font-size: 11px; line-height: 14px; } .uc-vl .text-\[13px\]\/\[18px\]{ font-size: 13px; line-height: 18px; } .uc-vl .text-\[\#fbf7eb\]\/60{ color: color-mix(rgb(251, 247, 235) 60%, transparent 40%); } .uc-vl .text-\[\#fbf7eb\]\/70{ color: color-mix(rgb(251, 247, 235) 70%, transparent 30%); } .uc-vl .text-\[\#fbf7eb\]\/75{ color: color-mix(rgb(251, 247, 235) 75%, transparent 25%); } .uc-vl .antialiased{ -webkit-font-smoothing: antialiased; } .uc-vl .\!shadow-\[0_0_0_1px_rgba\(10\,10\,10\,\.06\)\,0_1px_2px_rgba\(10\,10\,10\,\.06\)\,0_6px_16px_-6px_rgba\(10\,10\,10\,\.12\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(10,10,10,.06)), 0 1px 2px var(--tw-shadow-color, rgba(10,10,10,.06)), 0 6px 16px -6px var(--tw-shadow-color, rgba(10,10,10,.12)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; } .uc-vl .shadow-\[-20px_-4px_20px_rgba\(0\,0\,0\,0\.09\)\,-5px_-1px_11px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: -20px -4px 20px var(--tw-shadow-color, rgba(0,0,0,0.09)), -5px -1px 11px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_0\.5px_var\(--om-border-default\)\,0_1px_2px_rgba\(0\,0\,0\,0\.06\)\]{ --tw-shadow: 0 0 0 0.5px var(--tw-shadow-color, var(--om-border-default)), 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.06)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1\.5px_var\(--om-text-primary\)\,0_2px_6px_rgba\(0\,0\,0\,0\.15\)\]{ --tw-shadow: 0 0 0 1.5px var(--tw-shadow-color, var(--om-text-primary)), 0 2px 6px var(--tw-shadow-color, rgba(0,0,0,0.15)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,\.05\)\,0_1px_1px_0_rgba\(0\,0\,0\,\.05\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,.05)), 0 1px 1px 0 var(--tw-shadow-color, rgba(0,0,0,.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1px_rgba\(0\,0\,0\,\.09\)\,0_1px_\.5px_0_rgba\(0\,0\,0\,\.02\)\,0_4px_2px_0_rgba\(0\,0\,0\,\.02\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,.09)), 0 1px .5px 0 var(--tw-shadow-color, rgba(0,0,0,.02)), 0 4px 2px 0 var(--tw-shadow-color, rgba(0,0,0,.02)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1px_rgba\(10\,10\,10\,\.06\)\,0_1px_2px_rgba\(10\,10\,10\,\.06\)\,0_6px_16px_-6px_rgba\(10\,10\,10\,\.12\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(10,10,10,.06)), 0 1px 2px var(--tw-shadow-color, rgba(10,10,10,.06)), 0 6px 16px -6px var(--tw-shadow-color, rgba(10,10,10,.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1px_rgba\(10\,10\,10\,0\.05\)\,0_4px_12px_rgba\(10\,10\,10\,0\.08\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(10,10,10,0.05)), 0 4px 12px var(--tw-shadow-color, rgba(10,10,10,0.08)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_0_0_1px_rgba\(10\,10\,10\,0\.05\)\,0_6px_16px_rgba\(10\,10\,10\,0\.10\)\]{ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(10,10,10,0.05)), 0 6px 16px var(--tw-shadow-color, rgba(10,10,10,0.10)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_1px_1px_0_rgba\(27\,27\,27\,\.2\)\,0_4px_34px_-5px_rgba\(27\,27\,27\,\.1\)\]{ --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgba(27,27,27,.2)), 0 4px 34px -5px var(--tw-shadow-color, rgba(27,27,27,.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_1px_3px_0_rgba\(0\,0\,0\,0\.1\)\,0_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_1px_3px_rgba\(0\,0\,0\,0\.1\)\,0_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_1px_3px_rgba\(166\,50\,68\,0\.3\)\,0_2px_6px_rgba\(166\,50\,68\,0\.18\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.12\)\]{ --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(166,50,68,0.3)), 0 2px 6px var(--tw-shadow-color, rgba(166,50,68,0.18)), inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_1px_3px_rgba\(180\,90\,30\,0\.35\)\,0_2px_6px_rgba\(180\,90\,30\,0\.2\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.15\)\]{ --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(180,90,30,0.35)), 0 2px 6px var(--tw-shadow-color, rgba(180,90,30,0.2)), inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.15)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_9px_18px_-3px_rgba\(0\,0\,0\,\.03\)\,0_18px_36px_-5px_rgba\(0\,0\,0\,\.04\)\]{ --tw-shadow: 0 9px 18px -3px var(--tw-shadow-color, rgba(0,0,0,.03)), 0 18px 36px -5px var(--tw-shadow-color, rgba(0,0,0,.04)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_9px_18px_-3px_rgba\(0\,0\,0\,\.03\)\,0_18px_36px_-5px_rgba\(0\,0\,0\,\.06\)\]{ --tw-shadow: 0 9px 18px -3px var(--tw-shadow-color, rgba(0,0,0,.03)), 0 18px 36px -5px var(--tw-shadow-color, rgba(0,0,0,.06)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_12px_32px_-12px_rgba\(0\,0\,0\,0\.12\)\,0_2px_6px_-2px_rgba\(0\,0\,0\,0\.06\)\]{ --tw-shadow: 0 12px 32px -12px var(--tw-shadow-color, rgba(0,0,0,0.12)), 0 2px 6px -2px var(--tw-shadow-color, rgba(0,0,0,0.06)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0_20px_25px_-5px_rgba\(0\,0\,0\,\.12\)\,0_8px_10px_-6px_rgba\(0\,0\,0\,\.1\)\]{ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgba(0,0,0,.12)), 0 8px 10px -6px var(--tw-shadow-color, rgba(0,0,0,.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_0px_0px_0\.34px_rgba\(0\,0\,0\,\.11\)\,0px_4px_9\.5px_rgba\(0\,0\,0\,\.28\)\]{ --tw-shadow: 0px 0px 0px 0.34px var(--tw-shadow-color, rgba(0,0,0,.11)), 0px 4px 9.5px var(--tw-shadow-color, rgba(0,0,0,.28)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\,0px_1px_3px_0px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0px 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 1px 3px 0px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_1px_3px_0px_rgba\(0\,0\,0\,0\.1\)\,0px_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_1px_3px_rgba\(0\,0\,0\,0\.1\)\,0px_1px_2px_-1px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_10px_15px_-3px_rgba\(0\,0\,0\,0\.1\)\,0px_4px_6px_-4px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0px 10px 15px -3px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 4px 6px -4px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .shadow-\[0px_20px_25px_-5px_rgba\(0\,0\,0\,0\.1\)\,0px_8px_10px_-6px_rgba\(0\,0\,0\,0\.1\)\]{ --tw-shadow: 0px 20px 25px -5px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 8px 10px -6px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .uc-vl .\[box-shadow\:0_0_0_1px_rgba\(0\,0\,0\,\.03\)\,0_2px_4px_rgba\(0\,0\,0\,\.05\)\,0_12px_24px_rgba\(0\,0\,0\,\.05\)\]{ box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 12px 24px; } .uc-vl .ring-\[\#2EA343\]\/10{ --tw-ring-color: color-mix(in oklab, #2EA343 10%, transparent); } .uc-vl .ring-\[\#6E5AFF\]\/10{ --tw-ring-color: color-mix(in oklab, #6E5AFF 10%, transparent); } .uc-vl .ring-\[\#6E5AFF\]\/20{ --tw-ring-color: color-mix(in oklab, #6E5AFF 20%, transparent); } .uc-vl .ring-\[\#ff5a1f\]\/15{ --tw-ring-color: color-mix(in oklab, #ff5a1f 15%, transparent); } .uc-vl .duration-\[400ms\]\!{ --tw-duration: 400ms !important; transition-duration: 400ms !important; } .uc-vl .ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\]\!{ --tw-ease: cubic-bezier(0.22,1,0.36,1) !important; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; } .uc-vl .group-hover\:bg-black\/3{ &:is(:where(.group):hover *) {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(0, 0, 0) 3%, transparent 97%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 3%, transparent); } } } } .uc-vl .group-hover\:bg-black\/5{ &:is(:where(.group):hover *) {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(0, 0, 0) 5%, transparent 95%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } } } .uc-vl .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8{ &:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) { padding-right: calc(var(--spacing) * 8); } } .uc-vl .group-has-data-\[size\=lg\]\/avatar-group\:size-10{ &:is(:where(.group\/avatar-group):has([data-size="lg"]) *) { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } } .uc-vl .group-has-data-\[size\=sm\]\/avatar-group\:size-6{ &:is(:where(.group\/avatar-group):has([data-size="sm"]) *) { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } } .uc-vl .group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden{ &:is(:where(.group\/input-group):has([data-slot="combobox-clear"]) *) { display: none; } } .uc-vl .group-has-data-\[slot\=message-footer\]\/message\:-translate-y-8{ &:is(:where(.group\/message):has([data-slot="message-footer"]) *) { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } } .uc-vl .group-has-data-\[variant\=ghost\]\/message\:px-0{ &:is(:where(.group\/message):has([data-variant="ghost"]) *) { padding-inline: calc(var(--spacing) * 0); } } .uc-vl .group-has-\[\[data-orientation\=horizontal\]\]\/field\:text-balance{ &:is(:where(.group\/field):has(:is([data-orientation="horizontal"])) *) { text-wrap: balance; } } .uc-vl .group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5{ &:is(:where(.group\/item):has(:is([data-slot="item-description"])) *) { --tw-translate-y: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } .uc-vl .group-has-\[\[data-slot\=item-description\]\]\/item\:self-start{ &:is(:where(.group\/item):has(:is([data-slot="item-description"])) *) { align-self: flex-start; } } .uc-vl .group-has-\[\>input\]\/input-group\:pt-2\.5{ &:is(:where(.group\/input-group):has(> input) *) { padding-top: calc(var(--spacing) * 2.5); } } .uc-vl .group-has-\[\>input\]\/input-group\:pb-2\.5{ &:is(:where(.group\/input-group):has(> input) *) { padding-bottom: calc(var(--spacing) * 2.5); } } .uc-vl .group-hover\/btn\:group-aria-pressed\/btn\:bg-accent{ &:is(:where(.group\/btn):hover *) {.uc-vl @media (hover: hover){ &:is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--accent); } } } } .uc-vl .group-data-\[align\=end\]\/bubble\:self-end{ &:is(:where(.group\/bubble)[data-align="end"] *) { align-self: flex-end; } } .uc-vl .group-data-\[align\=end\]\/message\:justify-end{ &:is(:where(.group\/message)[data-align="end"] *) { justify-content: flex-end; } } .uc-vl .group-data-\[align\=end\]\/message\:self-end{ &:is(:where(.group\/message)[data-align="end"] *) { align-self: flex-end; } } .uc-vl .group-data-\[checked\]\/cb\:border-0{ &:is(:where(.group\/cb)[data-checked] *) { border-style: var(--tw-border-style); border-width: 0px; } } .uc-vl .group-data-\[checked\]\/rd\:border-0{ &:is(:where(.group\/rd)[data-checked] *) { border-style: var(--tw-border-style); border-width: 0px; } } .uc-vl .group-data-\[disabled\=true\]\/field\:opacity-50{ &:is(:where(.group\/field)[data-disabled="true"] *) { opacity: 0.5; } } .uc-vl .group-data-\[disabled\=true\]\/input-group\:opacity-50{ &:is(:where(.group\/input-group)[data-disabled="true"] *) { opacity: 0.5; } } .uc-vl .group-data-\[focused\=true\]\/day\:relative{ &:is(:where(.group\/day)[data-focused="true"] *) { position: relative; } } .uc-vl .group-data-\[focused\=true\]\/day\:z-10{ &:is(:where(.group\/day)[data-focused="true"] *) { z-index: 10; } } .uc-vl .group-data-\[focused\=true\]\/day\:border-ring{ &:is(:where(.group\/day)[data-focused="true"] *) { border-color: var(--ring); } } .uc-vl .group-data-\[focused\=true\]\/day\:ring-\[3px\]{ &:is(:where(.group\/day)[data-focused="true"] *) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .uc-vl .group-data-\[focused\=true\]\/day\:ring-ring\/50{ &:is(:where(.group\/day)[data-focused="true"] *) {.uc-vl --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } } .uc-vl .group-data-\[indeterminate\]\/cb\:border-0{ &:is(:where(.group\/cb)[data-indeterminate] *) { border-style: var(--tw-border-style); border-width: 0px; } } .uc-vl .group-data-\[orientation\=horizontal\]\/tabs\:h-9{ &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) { height: calc(var(--spacing) * 9); } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:absolute{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { position: absolute; } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:top-3{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { top: calc(var(--spacing) * 3); } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:right-3{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { right: calc(var(--spacing) * 3); } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:w-full{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { width: 100%; } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:gap-1{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { gap: calc(var(--spacing) * 1); } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:px-1{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) { padding-inline: calc(var(--spacing) * 1); } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:h-fit{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) { height: fit-content; } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:w-full{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) { width: 100%; } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:flex-col{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) { flex-direction: column; } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:justify-start{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) { justify-content: flex-start; } } .uc-vl .group-data-\[size\=default\]\/avatar\:size-2\.5{ &:is(:where(.group\/avatar)[data-size="default"] *) { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); } } .uc-vl .group-data-\[size\=default\]\/switch\:size-4{ &:is(:where(.group\/switch)[data-size="default"] *) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .uc-vl .group-data-\[size\=lg\]\/avatar\:size-3{ &:is(:where(.group\/avatar)[data-size="lg"] *) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } .uc-vl .group-data-\[size\=sm\]\/alert-dialog-content\:grid{ &:is(:where(.group\/alert-dialog-content)[data-size="sm"] *) { display: grid; } } .uc-vl .group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2{ &:is(:where(.group\/alert-dialog-content)[data-size="sm"] *) { grid-template-columns: repeat(2, minmax(0px, 1fr)); } } .uc-vl .group-data-\[size\=sm\]\/attachment\:w-8{ &:is(:where(.group\/attachment)[data-size="sm"] *) { width: calc(var(--spacing) * 8); } } .uc-vl .group-data-\[size\=sm\]\/avatar\:size-2{ &:is(:where(.group\/avatar)[data-size="sm"] *) { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } } .uc-vl .group-data-\[size\=sm\]\/avatar\:text-xs{ &:is(:where(.group\/avatar)[data-size="sm"] *) { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .uc-vl .group-data-\[size\=sm\]\/switch\:size-3{ &:is(:where(.group\/switch)[data-size="sm"] *) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } .uc-vl .group-data-\[size\=xs\]\/attachment\:w-7{ &:is(:where(.group\/attachment)[data-size="xs"] *) { width: calc(var(--spacing) * 7); } } .uc-vl .group-data-\[size\=xs\]\/attachment\:rounded-md{ &:is(:where(.group\/attachment)[data-size="xs"] *) { border-radius: calc(var(--radius) - 2px); } } .uc-vl .group-data-\[state\=done\]\/attachment\:opacity-100{ &:is(:where(.group\/attachment)[data-state="done"] *) { opacity: 1; } } .uc-vl .group-data-\[state\=error\]\/attachment\:bg-destructive\/10{ &:is(:where(.group\/attachment)[data-state="error"] *) {.uc-vl background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--destructive) 10%, transparent); } } } .uc-vl .group-data-\[state\=error\]\/attachment\:text-destructive{ &:is(:where(.group\/attachment)[data-state="error"] *) { color: var(--destructive); } } .uc-vl .group-data-\[state\=error\]\/attachment\:text-destructive\/80{ &:is(:where(.group\/attachment)[data-state="error"] *) {.uc-vl color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--destructive) 80%, transparent); } } } .uc-vl .group-data-\[state\=idle\]\/attachment\:opacity-100{ &:is(:where(.group\/attachment)[data-state="idle"] *) { opacity: 1; } } .uc-vl .group-data-\[variant\=line\]\/tabs-list\:bg-transparent{ &:is(:where(.group\/tabs-list)[data-variant="line"] *) { background-color: transparent; } } .uc-vl .group-data-\[variant\=outline\]\/field-group\:-mb-2{ &:is(:where(.group\/field-group)[data-variant="outline"] *) { margin-bottom: calc(var(--spacing) * -2); } } .uc-vl .group-data-\[variant\=separator\]\/marker\:flex-none{ &:is(:where(.group\/marker)[data-variant="separator"] *) { flex: 0 0 auto; } } .uc-vl .group-data-\[variant\=separator\]\/marker\:text-center{ &:is(:where(.group\/marker)[data-variant="separator"] *) { text-align: center; } } .uc-vl .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block{ &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) { display: block; } } .uc-vl .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center{ &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) { text-align: center; } } .uc-vl .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center{ &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="top"] *) { text-align: center; } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:top-full{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { top: 100%; } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { margin-top: calc(var(--spacing) * 1.5); } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { overflow: hidden; } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { border-radius: calc(var(--radius) - 2px); } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:border{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { border-style: var(--tw-border-style); border-width: 1px; } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { background-color: var(--popover); } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { color: var(--popover-foreground); } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:shadow{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:duration-200{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) { --tw-duration: 200ms; transition-duration: 200ms; } } .uc-vl .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{ &:is(:where(.peer\/menu-button)[data-active="true"] ~ *) { color: var(--sidebar-accent-foreground); } } .uc-vl .peer-data-\[size\=default\]\/menu-button\:top-1\.5{ &:is(:where(.peer\/menu-button)[data-size="default"] ~ *) { top: calc(var(--spacing) * 1.5); } } .uc-vl .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{ &:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) { top: calc(var(--spacing) * 2.5); } } .uc-vl .peer-data-\[size\=sm\]\/menu-button\:top-1{ &:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) { top: calc(var(--spacing) * 1); } } .uc-vl .group-data-\[orientation\=horizontal\]\/tabs\:after\:inset-x-0{ &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {.uc-vl &::after{ content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } } } .uc-vl .group-data-\[orientation\=horizontal\]\/tabs\:after\:bottom-\[-5px\]{ &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {.uc-vl &::after{ content: var(--tw-content); bottom: -5px; } } } .uc-vl .group-data-\[orientation\=horizontal\]\/tabs\:after\:h-0\.5{ &:is(:where(.group\/tabs)[data-orientation="horizontal"] *) {.uc-vl &::after{ content: var(--tw-content); height: calc(var(--spacing) * 0.5); } } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:after\:inset-y-0{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {.uc-vl &::after{ content: var(--tw-content); inset-block: calc(var(--spacing) * 0); } } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:after\:-right-1{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {.uc-vl &::after{ content: var(--tw-content); right: calc(var(--spacing) * -1); } } } .uc-vl .group-data-\[orientation\=vertical\]\/tabs\:after\:w-0\.5{ &:is(:where(.group\/tabs)[data-orientation="vertical"] *) {.uc-vl &::after{ content: var(--tw-content); width: calc(var(--spacing) * 0.5); } } } .uc-vl .focus-within\:ring-ring\/50{ &:focus-within {.uc-vl --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } } .uc-vl .hover\:border-black\/20{ &:hover {.uc-vl @media (hover: hover){ border-color: color-mix(in srgb, rgb(0, 0, 0) 20%, transparent 80%); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } } } .uc-vl .hover\:border-white\/30{ &:hover {.uc-vl @media (hover: hover){ border-color: color-mix(in srgb, rgb(255, 255, 255) 30%, transparent 70%); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } } .uc-vl .hover\:bg-black\/5{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(0, 0, 0) 5%, transparent 95%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } } } .uc-vl .hover\:bg-black\/10{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(0, 0, 0) 10%, transparent 90%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 10%, transparent); } } } } .uc-vl .hover\:bg-black\/\[\.045\]{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(0, 0, 0) 4.5%, transparent 95.5%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 4.5%, transparent); } } } } .uc-vl .hover\:bg-destructive\/90{ &:hover {.uc-vl @media (hover: hover){ background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--destructive) 90%, transparent); } } } } .uc-vl .hover\:bg-muted\/50{ &:hover {.uc-vl @media (hover: hover){ background-color: var(--muted); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } } } .uc-vl .hover\:bg-primary\/90{ &:hover {.uc-vl @media (hover: hover){ background-color: var(--primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } } } .uc-vl .hover\:bg-secondary\/80{ &:hover {.uc-vl @media (hover: hover){ background-color: var(--secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); } } } } .uc-vl .hover\:bg-white\/60{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(255, 255, 255) 60%, transparent 40%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } } } .uc-vl .hover\:bg-white\/90{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(255, 255, 255) 90%, transparent 10%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } } } .uc-vl .hover\:bg-white\/\[0\.04\]{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(255, 255, 255) 4%, transparent 96%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 4%, transparent); } } } } .uc-vl .hover\:bg-white\/\[0\.13\]{ &:hover {.uc-vl @media (hover: hover){ background-color: color-mix(in srgb, rgb(255, 255, 255) 13%, transparent 87%); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 13%, transparent); } } } } .uc-vl .hover\:text-white\/70{ &:hover {.uc-vl @media (hover: hover){ color: color-mix(in srgb, rgb(255, 255, 255) 70%, transparent 30%); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } } .uc-vl .hover\:text-white\/80{ &:hover {.uc-vl @media (hover: hover){ color: color-mix(in srgb, rgb(255, 255, 255) 80%, transparent 20%); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } } .uc-vl .hover\:shadow-\[0_0_0_0\.5px_var\(--om-border-strong\)\,0_4px_10px_rgba\(0\,0\,0\,0\.12\)\]{ &:hover {.uc-vl @media (hover: hover){ --tw-shadow: 0 0 0 0.5px var(--tw-shadow-color, var(--om-border-strong)), 0 4px 10px var(--tw-shadow-color, rgba(0,0,0,0.12)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .uc-vl .focus-visible\:ring-destructive\/20{ &:focus-visible {.uc-vl --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } .uc-vl .focus-visible\:ring-ring\/50{ &:focus-visible {.uc-vl --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } } .uc-vl .has-focus\:ring-ring\/50{ &:has(:focus) {.uc-vl --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } } .uc-vl .has-aria-expanded\:bg-muted\/50{ &:has([aria-expanded="true"]) {.uc-vl background-color: var(--muted); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } } .uc-vl .has-aria-invalid\:ring-destructive\/20{ &:has([aria-invalid="true"]) {.uc-vl --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } .uc-vl .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50{ &:has(:is([data-slot="input-group-control"]:focus-visible)) {.uc-vl --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } } } .uc-vl .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20{ &:has(:is([data-slot][aria-invalid="true"])) {.uc-vl --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } .uc-vl .has-\[\>\[data-align\=block-end\]\]\:h-auto{ &:has(> [data-align="block-end"]) { height: auto; } } .uc-vl .has-\[\>\[data-align\=block-end\]\]\:flex-col{ &:has(> [data-align="block-end"]) { flex-direction: column; } } .uc-vl .has-\[\>\[data-align\=block-start\]\]\:h-auto{ &:has(> [data-align="block-start"]) { height: auto; } } .uc-vl .has-\[\>\[data-align\=block-start\]\]\:flex-col{ &:has(> [data-align="block-start"]) { flex-direction: column; } } .uc-vl .has-\[\>\[data-slot\=button-group\]\]\:gap-2{ &:has(> [data-slot="button-group"]) { gap: calc(var(--spacing) * 2); } } .uc-vl .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3{ &:has(> [data-slot="checkbox-group"]) { gap: calc(var(--spacing) * 3); } } .uc-vl .has-\[\>\[data-slot\=field-content\]\]\:items-start{ &:has(> [data-slot="field-content"]) { align-items: flex-start; } } .uc-vl .has-\[\>\[data-slot\=field\]\]\:w-full{ &:has(> [data-slot="field"]) { width: 100%; } } .uc-vl .has-\[\>\[data-slot\=field\]\]\:flex-col{ &:has(> [data-slot="field"]) { flex-direction: column; } } .uc-vl .has-\[\>\[data-slot\=field\]\]\:rounded-md{ &:has(> [data-slot="field"]) { border-radius: calc(var(--radius) - 2px); } } .uc-vl .has-\[\>\[data-slot\=field\]\]\:border{ &:has(> [data-slot="field"]) { border-style: var(--tw-border-style); border-width: 1px; } } .uc-vl .has-\[\>\[data-slot\=radio-group\]\]\:gap-3{ &:has(> [data-slot="radio-group"]) { gap: calc(var(--spacing) * 3); } } .uc-vl .aria-invalid\:ring-destructive\/20{ &[aria-invalid="true"] {.uc-vl --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } .uc-vl .group-data-\[align\=end\]\/message\:\*\:data-slot\:self-end{ &:is(:where(.group\/message)[data-align="end"] *) {.uc-vl :is(& > *){ &[data-slot] { align-self: flex-end; } } } } .uc-vl .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20{ &[data-active="true"] {.uc-vl &[aria-invalid="true"]{ --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } } .uc-vl .\*\:data-\[slot\=alert-description\]\:text-destructive\/90{ :is(& > *) {.uc-vl &[data-slot="alert-description"]{ color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--destructive) 90%, transparent); } } } } .uc-vl .\*\:data-\[slot\=bubble-content\]\:bg-destructive\/10{ :is(& > *) {.uc-vl &[data-slot="bubble-content"]{ background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); } } } } .uc-vl .\*\:data-\[slot\=input-group\]\:border-input\/30{ :is(& > *) {.uc-vl &[data-slot="input-group"]{ border-color: var(--input); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--input) 30%, transparent); } } } } .uc-vl .\*\:data-\[slot\=input-group\]\:bg-input\/30{ :is(& > *) {.uc-vl &[data-slot="input-group"]{ background-color: var(--input); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:\*\:data-\[slot\=spinner\]\:size-6\!{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) {.uc-vl :is(& > *){ &[data-slot="spinner"] { width: calc(var(--spacing) * 6) !important; height: calc(var(--spacing) * 6) !important; } } } } .uc-vl .data-\[state\=active\]\:\!bg-transparent{ &[data-state="active"] { background-color: transparent !important; } } .uc-vl .group-data-\[variant\=default\]\/tabs-list\:data-\[state\=active\]\:shadow-sm{ &:is(:where(.group\/tabs-list)[data-variant="default"] *) {.uc-vl &[data-state="active"]{ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #1018280f); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .uc-vl .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent{ &:is(:where(.group\/tabs-list)[data-variant="line"] *) {.uc-vl &[data-state="active"]{ background-color: transparent; } } } .uc-vl .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:shadow-none{ &:is(:where(.group\/tabs-list)[data-variant="line"] *) {.uc-vl &[data-state="active"]{ --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .uc-vl .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:after\:opacity-100{ &:is(:where(.group\/tabs-list)[data-variant="line"] *) {.uc-vl &[data-state="active"]{ &::after { content: var(--tw-content); opacity: 1; } } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="closed"]{ animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="closed"]{ --tw-exit-opacity: 0; } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="closed"]{ --tw-exit-scale: .95; } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="open"]{ animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="open"]{ --tw-enter-opacity: 0; } } } .uc-vl .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95{ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {.uc-vl &[data-state="open"]{ --tw-enter-scale: .95; } } } .uc-vl .data-\[variant\=destructive\]\:focus\:bg-destructive\/10{ &[data-variant="destructive"] {.uc-vl &:focus{ background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); } } } } .uc-vl .motion-reduce\:transition-none\!{ @media (prefers-reduced-motion: reduce) { transition-property: none !important; } } .uc-vl .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:items-start{ @container field-group (width >= 28rem) {.uc-vl &:has(> [data-slot="field-content"]){ align-items: flex-start; } } } .uc-vl .dark\:bg-destructive\/60{ &:is(.dark *) {.uc-vl background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--destructive) 60%, transparent); } } } .uc-vl .dark\:bg-input\/30{ &:is(.dark *) {.uc-vl background-color: var(--input); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--input) 30%, transparent); } } } .uc-vl .dark\:stroke-white\/10{ &:is(.dark *) {.uc-vl stroke: color-mix(in srgb, rgb(255, 255, 255) 10%, transparent 90%); @supports (color: color-mix(in lab, red, red)){ stroke: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .uc-vl .dark\:has-aria-invalid\:border-destructive\/50{ &:is(.dark *) {.uc-vl &:has([aria-invalid="true"]){ border-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); } } } } .uc-vl .dark\:has-aria-invalid\:ring-destructive\/40{ &:is(.dark *) {.uc-vl &:has([aria-invalid="true"]){ --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } } } .uc-vl .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40{ &:is(.dark *) {.uc-vl &:has(:is([data-slot][aria-invalid="true"])){ --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } } } .uc-vl .dark\:\*\:data-\[slot\=bubble-content\]\:bg-destructive\/20{ &:is(.dark *) {.uc-vl :is(& > *){ &[data-slot="bubble-content"] {.uc-vl background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } } } .uc-vl .dark\:data-\[state\=active\]\:bg-input\/30{ &:is(.dark *) {.uc-vl &[data-state="active"]{ background-color: var(--input); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } } } .uc-vl .dark\:data-\[state\=unchecked\]\:bg-input\/80{ &:is(.dark *) {.uc-vl &[data-state="unchecked"]{ background-color: var(--input); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input) 80%, transparent); } } } } .uc-vl .night\:border-white\/10{ &:is(.uc-night *) {.uc-vl border-color: color-mix(in srgb, rgb(255, 255, 255) 10%, transparent 90%); @supports (color: color-mix(in lab, red, red)){ border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .uc-vl .night\:border-white\/\[\.06\]{ &:is(.uc-night *) {.uc-vl border-color: color-mix(in srgb, rgb(255, 255, 255) 6%, transparent 94%); @supports (color: color-mix(in lab, red, red)){ border-color: color-mix(in oklab, var(--color-white) 6%, transparent); } } } .uc-vl .night\:border-white\/\[\.08\]{ &:is(.uc-night *) {.uc-vl border-color: color-mix(in srgb, rgb(255, 255, 255) 8%, transparent 92%); @supports (color: color-mix(in lab, red, red)){ border-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } .uc-vl .night\:bg-white\/20{ &:is(.uc-night *) {.uc-vl background-color: color-mix(in srgb, rgb(255, 255, 255) 20%, transparent 80%); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } } .uc-vl .night\:bg-white\/\[\.07\]{ &:is(.uc-night *) {.uc-vl background-color: color-mix(in srgb, rgb(255, 255, 255) 7%, transparent 93%); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent); } } } .uc-vl .night\:bg-white\/\[\.08\]{ &:is(.uc-night *) {.uc-vl background-color: color-mix(in srgb, rgb(255, 255, 255) 8%, transparent 92%); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--color-white) 8%, transparent); } } } .uc-vl .night\:text-white\/25{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255) 25%, transparent 75%); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 25%, transparent); } } } .uc-vl .night\:text-white\/35{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255) 35%, transparent 65%); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 35%, transparent); } } } .uc-vl .night\:text-white\/40{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255) 40%, transparent 60%); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 40%, transparent); } } } .uc-vl .night\:text-white\/50{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255), transparent); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } .uc-vl .night\:text-white\/70{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255) 70%, transparent 30%); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } .uc-vl .night\:text-white\/90{ &:is(.uc-night *) {.uc-vl color: color-mix(in srgb, rgb(255, 255, 255) 90%, transparent 10%); @supports (color: color-mix(in lab, red, red)){ color: color-mix(in oklab, var(--color-white) 90%, transparent); } } } .uc-vl .night\:ring-white\/\[\.10\]{ &:is(.uc-night *) {.uc-vl --tw-ring-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)){ --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } .uc-vl .\[\&_\*\]\:\!pointer-events-none{ & * { pointer-events: none !important; } } .uc-vl .\[\&_\*\]\:\!cursor-cell{ & * { cursor: cell !important; } } .uc-vl .\[\&_\*\]\:\!cursor-crosshair{ & * { cursor: crosshair !important; } } .uc-vl .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50{ & .recharts-cartesian-grid line[stroke="#ccc"] {.uc-vl stroke: var(--border); @supports (color: color-mix(in lab, red, red)){ stroke: color-mix(in oklab, var(--border) 50%, transparent); } } } .uc-vl .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent{ & .recharts-dot[stroke="#fff"] { stroke: transparent; } } .uc-vl .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border{ & .recharts-polar-grid [stroke="#ccc"] { stroke: var(--border); } } .uc-vl .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border{ & .recharts-reference-line [stroke="#ccc"] { stroke: var(--border); } } .uc-vl .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent{ & .recharts-sector[stroke="#fff"] { stroke: transparent; } } .uc-vl .\[\&_\[cmdk-group-heading\]\]\:px-2{ & [cmdk-group-heading] { padding-inline: calc(var(--spacing) * 2); } } .uc-vl .\[\&_\[cmdk-group-heading\]\]\:py-1\.5{ & [cmdk-group-heading] { padding-block: calc(var(--spacing) * 1.5); } } .uc-vl .\[\&_\[cmdk-group-heading\]\]\:text-xs{ & [cmdk-group-heading] { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } } .uc-vl .\[\&_\[cmdk-group-heading\]\]\:font-medium{ & [cmdk-group-heading] { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } } .uc-vl .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground{ & [cmdk-group-heading] { color: var(--muted-foreground); } } .uc-vl .\[\&_\[cmdk-group\]\]\:px-2{ & [cmdk-group] { padding-inline: calc(var(--spacing) * 2); } } .uc-vl .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0{ & [cmdk-group]:not([hidden]) ~ [cmdk-group] { padding-top: calc(var(--spacing) * 0); } } .uc-vl .\[\&_\[cmdk-input\]\]\:h-12{ & [cmdk-input] { height: calc(var(--spacing) * 12); } } .uc-vl .\[\&_\[cmdk-item\]\]\:px-2{ & [cmdk-item] { padding-inline: calc(var(--spacing) * 2); } } .uc-vl .\[\&_\[cmdk-item\]\]\:py-3{ & [cmdk-item] { padding-block: calc(var(--spacing) * 3); } } .uc-vl .\[\&_option\]\:\[direction\:ltr\]{ & option { direction: ltr; } } .uc-vl .data-\[direction\=start\]\:\[\&_svg\]\:rotate-180{ &[data-direction="start"] {.uc-vl & svg{ rotate: 180deg; } } } .uc-vl .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3{ & svg:not([class*="size-"]) { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } .uc-vl .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{ & svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .uc-vl .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6{ & svg:not([class*="size-"]) { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } } .uc-vl .group-data-\[orientation\=vertical\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6{ &:is(:where(.group\/attachment)[data-orientation="vertical"] *) {.uc-vl & svg:not([class*="size-"]){ width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } } } .uc-vl .group-data-\[size\=xs\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5{ &:is(:where(.group\/attachment)[data-size="xs"] *) {.uc-vl & svg:not([class*="size-"]){ width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } } } .uc-vl .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground{ & svg:not([class*="text-"]) { color: var(--muted-foreground); } } .uc-vl .\[\&\+\[data-slot\=item-content\]\]\:flex-none{ & + [data-slot="item-content"] { flex: 0 0 auto; } } .uc-vl .\[\&\:disabled\:not\(\[aria-busy\]\)\]\:opacity-50{ &:disabled:not([aria-busy]) { opacity: 0.5; } } .uc-vl .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0{ &:has([role="checkbox"]) { padding-right: calc(var(--spacing) * 0); } } .uc-vl .\[a\]\:hover\:bg-accent\/50{ &:is(a) {.uc-vl &:hover{ @media (hover: hover) {.uc-vl background-color: var(--accent); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } } } } .uc-vl .data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\!{ &[data-variant="destructive"] {.uc-vl :is(& > *){ &:is(svg) { color: var(--destructive) !important; } } } } .uc-vl .\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-8{ :is(& > *) {.uc-vl &:is(svg:not([class*="size-"])){ width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:relative{ & > [data-selected] + [role="option"]:not([data-selected]) { position: relative; } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:mt-2{ & > [data-selected] + [role="option"]:not([data-selected]) { margin-top: calc(var(--spacing) * 2); } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:before\:absolute{ & > [data-selected] + [role="option"]:not([data-selected]) {.uc-vl &::before{ content: var(--tw-content); position: absolute; } } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:before\:inset-x-0{ & > [data-selected] + [role="option"]:not([data-selected]) {.uc-vl &::before{ content: var(--tw-content); inset-inline: calc(var(--spacing) * 0); } } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:before\:-top-1{ & > [data-selected] + [role="option"]:not([data-selected]) {.uc-vl &::before{ content: var(--tw-content); top: calc(var(--spacing) * -1); } } } .uc-vl .\[\&\>\[data-selected\]\+\[role\=option\]\:not\(\[data-selected\]\)\]\:before\:border-t{ & > [data-selected] + [role="option"]:not([data-selected]) {.uc-vl &::before{ content: var(--tw-content); border-top-style: var(--tw-border-style); border-top-width: 1px; } } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--muted\)\,var\(--foreground\)_5\%\)\]{ & > [data-slot="bubble-content"]:is(button, a):hover {.uc-vl background-color: var(--muted); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklch,var(--muted),var(--foreground) 5%); } } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]{ & > [data-slot="bubble-content"]:is(button, a):hover {.uc-vl background-color: var(--secondary); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%); } } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.88_calc\(c\*0\.5\)_h\)\]{ & > [data-slot="bubble-content"]:is(button, a):hover { background-color: oklch(from var(--primary) 0.88 calc(c * 0.5) h); } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/20{ & > [data-slot="bubble-content"]:is(button, a):hover {.uc-vl background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--destructive) 20%, transparent); } } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-muted{ & > [data-slot="bubble-content"]:is(button, a):hover { background-color: var(--muted); } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-primary\/80{ & > [data-slot="bubble-content"]:is(button, a):hover {.uc-vl background-color: var(--primary); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--primary) 80%, transparent); } } } .uc-vl .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:text-foreground{ & > [data-slot="bubble-content"]:is(button, a):hover { color: var(--foreground); } } .uc-vl .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.35_calc\(c\*0\.5\)_h\)\]{ &:is(.dark *) {.uc-vl & > [data-slot="bubble-content"]:is(button, a):hover{ background-color: oklch(from var(--primary) 0.35 calc(c * 0.5) h); } } } .uc-vl .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/30{ &:is(.dark *) {.uc-vl & > [data-slot="bubble-content"]:is(button, a):hover{ background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--destructive) 30%, transparent); } } } } .uc-vl .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-input\/30{ &:is(.dark *) {.uc-vl & > [data-slot="bubble-content"]:is(button, a):hover{ background-color: var(--input); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } } } .uc-vl .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-muted\/50{ &:is(.dark *) {.uc-vl & > [data-slot="bubble-content"]:is(button, a):hover{ background-color: var(--muted); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } } } .uc-vl .\[\&\>\[data-slot\=field-group\]\]\:gap-4{ & > [data-slot="field-group"] { gap: calc(var(--spacing) * 4); } } .uc-vl .\[\&\>\[data-slot\=field-label\]\]\:flex-auto{ & > [data-slot="field-label"] { flex: 1 1 auto; } } .uc-vl .\@md\/field-group\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto{ @container field-group (width >= 28rem) {.uc-vl & > [data-slot="field-label"]{ flex: 1 1 auto; } } } .uc-vl .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md{ &:has(:is(select[aria-hidden="true"]:last-child)) {.uc-vl & > [data-slot="select-trigger"]:last-of-type{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } } } .uc-vl .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit{ & > [data-slot="select-trigger"]:not([class*="w-"]) { width: fit-content; } } .uc-vl .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]{ & > [role="checkbox"] { --tw-translate-y: 2px; translate: var(--tw-translate-x) var(--tw-translate-y); } } .uc-vl .has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px{ &:has(> [data-slot="field-content"]) {.uc-vl & > [role="checkbox"], .uc-vl & [role="radio"]{ margin-top: 1px; } } } .uc-vl .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px{ @container field-group (width >= 28rem) {.uc-vl &:has(> [data-slot="field-content"]){ & > [role="checkbox"], & [role="radio"] { margin-top: 1px; } } } } .uc-vl .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3{ &:has(> [data-align="block-end"]) {.uc-vl & > input{ padding-top: calc(var(--spacing) * 3); } } } .uc-vl .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3{ &:has(> [data-align="block-start"]) {.uc-vl & > input{ padding-bottom: calc(var(--spacing) * 3); } } } .uc-vl .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2{ &:has(> [data-align="inline-end"]) {.uc-vl & > input{ padding-right: calc(var(--spacing) * 2); } } } .uc-vl .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2{ &:has(> [data-align="inline-start"]) {.uc-vl & > input{ padding-left: calc(var(--spacing) * 2); } } } .uc-vl .group-has-data-\[size\=lg\]\/avatar-group\:\[\&\>svg\]\:size-5{ &:is(:where(.group\/avatar-group):has([data-size="lg"]) *) {.uc-vl & > svg{ width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } } } .uc-vl .group-has-data-\[size\=sm\]\/avatar-group\:\[\&\>svg\]\:size-3{ &:is(:where(.group\/avatar-group):has([data-size="sm"]) *) {.uc-vl & > svg{ width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } } } .uc-vl .group-data-\[size\=default\]\/avatar\:\[\&\>svg\]\:size-2{ &:is(:where(.group\/avatar)[data-size="default"] *) {.uc-vl & > svg{ width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } } } .uc-vl .group-data-\[size\=lg\]\/avatar\:\[\&\>svg\]\:size-2{ &:is(:where(.group\/avatar)[data-size="lg"] *) {.uc-vl & > svg{ width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } } } .uc-vl .group-data-\[size\=sm\]\/avatar\:\[\&\>svg\]\:hidden{ &:is(:where(.group\/avatar)[data-size="sm"] *) {.uc-vl & > svg{ display: none; } } } .uc-vl .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5{ & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } } .uc-vl .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{ & > svg:not([class*="size-"]) { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } } .uc-vl .\[\&\[list\]\:\:-webkit-calendar-picker-indicator\]\:hidden\!{ &[list]::-webkit-calendar-picker-indicator { display: none !important; } } .uc-vl .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20{ [data-slot="tooltip-content"] & {.uc-vl background-color: var(--background); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--background) 20%, transparent); } } } .uc-vl .dark\:\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/10{ &:is(.dark *) {.uc-vl [data-slot="tooltip-content"] &{ background-color: var(--background); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--background) 10%, transparent); } } } } .uc-vl .\[a\&\]\:hover\:bg-destructive\/90{ a& {.uc-vl &:hover{ @media (hover: hover) {.uc-vl background-color: var(--destructive); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--destructive) 90%, transparent); } } } } } .uc-vl .\[a\&\]\:hover\:bg-primary\/90{ a& {.uc-vl &:hover{ @media (hover: hover) {.uc-vl background-color: var(--primary); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } } } } .uc-vl .\[a\&\]\:hover\:bg-secondary\/90{ a& {.uc-vl &:hover{ @media (hover: hover) {.uc-vl background-color: var(--secondary); @supports (color: color-mix(in lab, red, red)){ background-color: color-mix(in oklab, var(--secondary) 90%, transparent); } } } } } html.lenis .uc-vl, html.lenis .uc-vl{ height: auto; } .uc-vl .lenis [data-lenis-prevent], .uc-vl .lenis [data-lenis-prevent-wheel], .uc-vl .lenis [data-lenis-prevent-touch], .uc-vl .lenis [data-lenis-prevent-vertical], .uc-vl .lenis [data-lenis-prevent-horizontal]{ overscroll-behavior: contain; } .uc-vl{ --radius: 0.625rem; --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --color-bg-sprout-color-secondary: #6a35ff; --color-bg-sprout-color-secondary-light: #7a4bff; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); } .uc-vl{ --uc-container-max: 1320px; --uc-gutter: 40px; --uc-section-y: 120px; --uc-space-1: 4px; --uc-space-2: 6px; --uc-space-3: 8px; --uc-space-4: 10px; --uc-space-5: 12px; --uc-space-6: 16px; --uc-space-8: 24px; --uc-space-12: 32px; --uc-col-narrow: 560px; --uc-col-wide: 880px; } @media (max-width: 1024px){.uc-vl{ --uc-gutter: 32px; }} @media (max-width: 768px){.uc-vl{ --uc-gutter: 20px; --uc-section-y: 72px; }} .uc-vl .ds-t18{ font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.18px; color: var(--color-sprout-color-text-default); } .uc-vl .ds-lead{ font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.18px; color: var(--color-sprout-color-text-weaker); } .uc-vl .ds-caption{ font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: -0.16px; color: var(--color-sprout-color-text-weaker); } .uc-vl{ --background: #f9f9fb; --foreground: #0f0635; --card: #ffffff; --card-foreground: #0f0635; --popover: #ffffff; --popover-foreground: #0f0635; --primary: #fd6a35; --primary-foreground: #ffffff; --secondary: #f1f1f7; --secondary-foreground: #0f0635; --muted: #f1f1f7; --muted-foreground: #737373; --accent: #fff1eb; --accent-foreground: #cc4b23; --destructive: #f65258; --border: #e5e5e5; --input: #d4d4d4; --ring: #fd6a35; --radius: 0.625rem; --chart-1: #fd6a35; --chart-2: #5202fd; --chart-3: #3600af; --chart-4: #ffb89a; --chart-5: #b8a9ff; --sidebar: #ffffff; --sidebar-foreground: #0f0635; --sidebar-primary: #fd6a35; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f1f1f7; --sidebar-accent-foreground: #0f0635; --sidebar-border: #e5e5e5; --sidebar-ring: #fd6a35; } .uc-vl .uc-scope, .uc-vl .uc-content, .uc-vl .uc-chrome, .uc-vl .uc-portal{ --uc-container-editorial: 1120px; --uc-col-brand: 300px; --uc-logo-height: 30px; --uc-footer-space: clamp(140px,20vw,260px); --uc-search-width: 360px; --uc-rail-width: 220px; --uc-rail-width-compact: 170px; --uc-space-56: 56px; --uc-space-64: 64px; --uc-space-80: 80px; --uc-text-display: 3.75rem; --uc-text-display-compact: 2.5rem; --uc-leading-display: 1.06; --uc-icon-sm: 1rem; --uc-icon-md: 1.25rem; --uc-icon-lg: 1.5rem; --uc-border-width: 1px; --uc-ring-width: 2px; --uc-shadow-selected: inset 0 0 0 var(--uc-ring-width) var(--uc-text-strong); --uc-sticky-offset: calc(var(--uc-space-48) * 2); --uc-z-sticky: 40; --uc-brand: #FD6A35; --uc-brand-on: #FFFFFF; --uc-success: #2EA343; --uc-success-on: #FFFFFF; --uc-danger: #F65258; --uc-danger-on: #FFFFFF; --uc-warning: #FFA940; --uc-warning-on: #171717; --uc-accent: #5202FD; --uc-accent-on: #FFFFFF; --uc-brand-border: rgba(253, 106, 53, 0.40); --uc-success-border: rgba(46, 163, 67, 0.40); --uc-danger-border: rgba(246, 82, 88, 0.40); --uc-warning-border: rgba(255, 169, 64, 0.42); --uc-accent-border: rgba(82, 2, 253, 0.40); --uc-brand-glow-hover: rgba(253, 106, 53, 0.08); --uc-brand-glow-press: rgba(253, 106, 53, 0.16); --uc-success-glow-hover: rgba(46, 163, 67, 0.08); --uc-success-glow-press: rgba(46, 163, 67, 0.16); --uc-danger-glow-hover: rgba(246, 82, 88, 0.08); --uc-danger-glow-press: rgba(246, 82, 88, 0.16); --uc-warning-glow-hover: rgba(255, 169, 64, 0.10); --uc-warning-glow-press: rgba(255, 169, 64, 0.18); --uc-accent-glow-hover: rgba(82, 2, 253, 0.08); --uc-accent-glow-press: rgba(82, 2, 253, 0.16); --uc-text-inverse: #FFFFFF; --uc-bg: var(--uc-surface-base); --uc-fg: var(--uc-text-strong); --uc-fg-muted: var(--uc-text-muted); --uc-card: var(--uc-surface-raised); --uc-card-fg: var(--uc-text-strong); --uc-muted: var(--uc-surface-sunken); --uc-elevated: var(--uc-surface-overlay); --uc-radius-0: 0; --uc-radius-2: 2px; --uc-radius-4: 4px; --uc-radius-6: 6px; --uc-radius-8: 8px; --uc-radius-12: 12px; --uc-radius-16: 16px; --uc-radius-24: 24px; --uc-radius-32: 32px; --uc-radius-infinite: 9999px; --uc-radius-xs: var(--uc-radius-4); --uc-radius-sm: var(--uc-radius-6); --uc-radius-md: var(--uc-radius-8); --uc-radius-lg: var(--uc-radius-12); --uc-radius-xl: var(--uc-radius-16); --uc-radius-pill: var(--uc-radius-infinite); --uc-space-0: 0; --uc-space-1: 1px; --uc-space-2: 2px; --uc-space-3: 3px; --uc-space-4: 4px; --uc-space-5: 5px; --uc-space-6: 6px; --uc-space-7: 7px; --uc-space-8: 8px; --uc-space-9: 9px; --uc-space-10: 10px; --uc-space-11: 11px; --uc-space-12: 12px; --uc-space-14: 14px; --uc-space-16: 16px; --uc-space-20: 20px; --uc-space-24: 24px; --uc-space-28: 28px; --uc-space-32: 32px; --uc-space-36: 36px; --uc-space-40: 40px; --uc-space-44: 44px; --uc-space-48: 48px; --uc-font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --uc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --uc-text-3xs: 0.5rem; --uc-text-2xs: 0.625rem; --uc-text-xs: 0.75rem; --uc-text-sm: 0.8125rem; --uc-text-base: 0.875rem; --uc-text-md: 1rem; --uc-text-lg: 1.125rem; --uc-text-xl: 1.25rem; --uc-text-2xl: 1.5rem; --uc-text-3xl: 1.875rem; --uc-weight-regular: 400; --uc-weight-medium: 500; --uc-weight-semibold: 600; --uc-leading-tight: 1.2; --uc-leading-snug: 1.35; --uc-leading-normal: 1.5; --uc-tracking-tight: -0.01em; --uc-tracking-normal: 0; --uc-tracking-wide: 0.02em; --uc-shadow-1: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.05); --uc-shadow-2: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.05), 0 2px 6px -1px oklch(0% 0 0 / 0.06); --uc-shadow-3: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.05), 0 6px 14px -3px oklch(0% 0 0 / 0.08); --uc-shadow-4: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 6px 12px -4px oklch(0% 0 0 / 0.06), 0 14px 28px -6px oklch(0% 0 0 / 0.10); --uc-shadow-5: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 12px 24px -8px oklch(0% 0 0 / 0.08), 0 28px 56px -12px oklch(0% 0 0 / 0.14); --uc-shadow-control: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 3px -1px rgba(0, 0, 0, 0.05); --uc-shadow-control-brand: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.06); --uc-shadow-control-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14); --uc-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 2px 4px -2px rgba(0, 0, 0, 0.04); --uc-shadow-raised: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px -1px rgba(0, 0, 0, 0.04); --uc-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03)); --uc-control-h-sm: 1.75rem; --uc-control-h-md: 2rem; --uc-control-h-lg: 2.5rem; --uc-dur-fast: 160ms; --uc-dur-base: 240ms; --uc-dur-slow: 340ms; --uc-dur-enter: 300ms; --uc-ease-standard: cubic-bezier(0.2, 0, 0, 1); --uc-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --uc-ease-exit: cubic-bezier(0.4, 0, 1, 1); --uc-z-dropdown: 1000; --uc-z-overlay: 1100; --uc-z-dialog: 1200; --uc-z-tooltip: 1300; } .uc-vl .uc-scope, .uc-vl .uc-content, .uc-vl .uc-portal, .uc-vl .uc-night .uc-force-light .uc-scope, .uc-vl .uc-night .uc-force-light .uc-content, .uc-vl .uc-night .uc-force-light .uc-portal{ --uc-surface-sunken: #F1F1F7; --uc-surface-base: #F9F9FB; --uc-surface-raised: #FFFFFF; --uc-surface-overlay: rgba(255, 255, 255, 0.10); --uc-surface-control: #FFFFFF; --uc-text-strong: #0A0A0A; --uc-text: #171717; --uc-text-muted: #737373; --uc-text-subtle: #A3A3A3; --uc-inverse-bg: #171717; --uc-inverse-fg: #FFFFFF; --uc-border-subtle: #E5E5E5; --uc-border: #D4D4D4; --uc-border-strong: #D4D4D4; --uc-ring: rgba(253, 106, 53, 0.50); --uc-brand-fg: #CC4B23; --uc-success-fg: #0A842A; --uc-danger-fg: #D12D37; --uc-warning-fg: #AA712B; --uc-accent-fg: #3600AF; --uc-brand-soft: #FFF1EB; --uc-success-soft: #E7FFE7; --uc-danger-soft: #FFF2EF; --uc-warning-soft: #FFEDD8; --uc-accent-soft: #F2EEFF; } .uc-vl .uc-chrome{ --uc-surface-sunken: #101010; --uc-surface-base: #171717; --uc-surface-raised: #202020; --uc-surface-overlay: #242424; --uc-surface-control: rgba(255, 255, 255, 0.05); --uc-text-strong: #FFFFFF; --uc-text: #A3A3A3; --uc-text-muted: #737373; --uc-text-subtle: #525252; --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #333333; --uc-border: #404040; --uc-border-strong: #525252; --uc-ring: rgba(253, 106, 53, 0.60); --uc-brand-fg: #FFB89A; --uc-success-fg: #A7EAAA; --uc-danger-fg: #FDC9C6; --uc-warning-fg: #FFC680; --uc-accent-fg: #B8A9FF; --uc-brand-soft: rgba(253, 106, 53, 0.18); --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-soft: rgba(82, 2, 253, 0.28); } .uc-vl .uc-scope, .uc-vl .uc-content, .uc-vl .uc-chrome{ font-family: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); background: var(--uc-surface-base); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } .uc-vl .uc-portal{ font-family: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); -webkit-font-smoothing: antialiased; } .uc-vl .uc-scope *, .uc-vl .uc-scope ::before, .uc-vl .uc-scope ::after, .uc-vl .uc-content *, .uc-vl .uc-content ::before, .uc-vl .uc-content ::after, .uc-vl .uc-chrome *, .uc-vl .uc-chrome ::before, .uc-vl .uc-chrome ::after, .uc-vl .uc-portal *, .uc-vl .uc-portal ::before, .uc-vl .uc-portal ::after{ box-sizing: border-box; } @media (prefers-reduced-motion: reduce){.uc-vl .uc-scope *, .uc-vl .uc-content *, .uc-vl .uc-chrome *, .uc-vl .uc-portal *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }} .uc-vl .Button_button__8M0Ui{ --_h: var(--uc-control-h-md); --_px: var(--uc-space-16); --_fs: var(--uc-text-base); display: inline-flex; align-items: center; justify-content: center; gap: var(--uc-space-8); height: var(--_h); padding: 0 var(--_px); font-family: var(--uc-font-sans); font-size: var(--_fs); font-weight: var(--uc-weight-medium); line-height: 1; white-space: nowrap; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--uc-radius-md); cursor: pointer; user-select: none; position: relative; isolation: isolate; transition: background var(--uc-dur-fast) var(--uc-ease-standard), box-shadow var(--uc-dur-fast) var(--uc-ease-standard), transform var(--uc-dur-fast) var(--uc-ease-standard), color var(--uc-dur-fast) var(--uc-ease-standard); } .uc-vl .Button_button__8M0Ui:focus-visible{ outline: 2px solid var(--uc-ring); outline-offset: 2px; } .uc-vl .Button_button__8M0Ui:active:not(:disabled){ transform: translateY(0.5px); } .uc-vl .Button_button__8M0Ui:disabled{ opacity: 0.5; cursor: not-allowed; box-shadow: none; } .uc-vl .Button_lg__7yGRs{ --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); } .uc-vl .Button_solid__hu289{ color: var(--uc-brand-on); background: var(--_fill, var(--uc-brand)); background-image: var(--uc-sheen); box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); } .uc-vl .Button_solid__hu289:hover:not(:disabled){ background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--uc-sheen); } .uc-vl .Button_solid__hu289:active:not(:disabled){ background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--uc-sheen); box-shadow: var(--uc-shadow-control-pressed); } .uc-vl .Button_brand__mVCH5{ --_fill: var(--uc-brand); --_fg: var(--uc-brand-fg); --_soft: var(--uc-brand-soft); --_border: var(--uc-brand-border); --_glow: var(--uc-brand-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .uc-vl .Badge_badge__aQT_j{ display: inline-flex; align-items: center; gap: var(--uc-space-4); height: 20px; padding: 0 var(--uc-space-8); border-radius: var(--uc-radius-pill); font-family: var(--uc-font-sans); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); line-height: 1; white-space: nowrap; } .uc-vl .Badge_md__ROJtx{ height: 24px; padding: 0 var(--uc-space-12); font-size: var(--uc-text-sm); } .uc-vl .Badge_outline__ZVBpQ{ color: var(--_fg, var(--uc-brand-fg)); background: transparent; box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)); } .uc-vl .Badge_neutral__5MCSy{ --_fill: var(--uc-text); --_on: var(--uc-text-inverse); --_fg: var(--uc-text-muted); --_soft: var(--uc-surface-sunken); --_border: var(--uc-border-strong); } .uc-vl .f2w{ --pg: #ffffff; --pg2: #f7f7f9; --tx: #0a0a0a; --txd: #525252; --txf: #a3a3a3; --acc: #fd6a35; --acc-dk: #171717; --acc-soft: #f4f4f4; --acc-line: #e7e7ea; --acc2: #c2410c; --acc2-solid: #c2410c; --cardbg: #ffffff; --cardbd: #e7e7ea; --line: #ebebeb; --mist: #f4f4f4; --ink: #0a0a0a; --coral: #f65258; --ease: cubic-bezier(0.22, 1, 0.36, 1); --r-chip: 10px; --r-btn: 12px; --r-card: 16px; --r-xl: 20px; position: relative; background: var(--pg); color: var(--tx); overflow-x: clip; transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), color 0.55s cubic-bezier(0.4, 0, 0.2, 1); } html:has(.f2w) .uc-vl, html:has(.f2w) .uc-vl, html:has(.f2w) .uc-vl{ background-color: rgb(255, 255, 255); } .uc-vl .f2w *{ box-sizing: border-box; } .uc-vl .f2w, .uc-vl .f2w .sec, .uc-vl .f2w .sec-head, .uc-vl .f2w .eyebrow, .uc-vl .f2w .accent-lemon, .uc-vl .f2w h1, .uc-vl .f2w h2, .uc-vl .f2w h3, .uc-vl .f2w p, .uc-vl .f2w li, .uc-vl .f2w .ds-fine, .uc-vl .f2w .faq2-eyebrow, .uc-vl .f2w .conv-eyebrow, .uc-vl .f2w .conv-title, .uc-vl .f2w .conv-sub{ transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), color 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce){.uc-vl .f2w, .uc-vl .f2w .sec, .uc-vl .f2w .sec-head, .uc-vl .f2w .eyebrow, .uc-vl .f2w .accent-lemon, .uc-vl .f2w h1, .uc-vl .f2w h2, .uc-vl .f2w h3, .uc-vl .f2w p, .uc-vl .f2w li, .uc-vl .f2w .ds-fine, .uc-vl .f2w .faq2-eyebrow, .uc-vl .f2w .conv-eyebrow, .uc-vl .f2w .conv-title, .uc-vl .f2w .conv-sub{ transition: none; }} @media (prefers-reduced-motion: reduce){.uc-vl .f2w{ transition: none; }} .uc-vl .f2w img{ max-width: 100%; } .uc-vl .f2w .sec{ position: relative; padding: 104px 0px; scroll-margin-top: 80px; } @media (max-width: 700px){.uc-vl .f2w .sec{ padding: 68px 0px; }} .uc-vl .f2w .sec h2{ font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; margin: 16px 0px 14px; text-wrap: balance; color: var(--tx); } @media (min-width: 768px){.uc-vl .f2w .sec h2{ font-size: 46px; line-height: 50px; }} @media (prefers-reduced-motion: reduce){.uc-vl .f2w .hero, .uc-vl .f2w .hero::before, .uc-vl .f2w .hero::after, .uc-vl .f2w .uic-orb, .uc-vl .f2w .scan-line, .uc-vl .f2w .scan-dot, .uc-vl .f2w .dfx-col.c3, .uc-vl .f2w .dfx-mark, .uc-vl .f2w .dfx-chip i.dot, .uc-vl .f2w .dfx-lbls em, .uc-vl .f2w [class*="mtn-"], .uc-vl .f2w .hf-h, .uc-vl .f2w .hf-f, .uc-vl .f2w .hf-ck, .uc-vl .f2w .hf-chip i.dot, .uc-vl .f2w .hf-lbls em, .uc-vl .f2w .term-scan, .uc-vl .f2w .pbx-tile, .uc-vl .f2w .rev-track, .uc-vl .f2w .logo-track, .uc-vl .f2w .demo-chip i, .uc-vl .f2w .scan-chip i{ animation: auto ease 0s 1 normal none running none !important; }} .uc-vl .f2w .pl-bleed{ padding-inline: var(--uc-gutter); } .uc-vl .f2w .pl-single{ padding-top: var(--pl-top-pad); --pl-head-size: 2.25rem; --pl-head-leading: 2.5rem; --pl-frame-min: 32rem; --pl-frame-max: 56rem; --pl-top-pad: 50px; --pl-more-size: 1.5rem; --pl-more-leading: 2rem; } .uc-vl .f2w .pl-grid{ --pl-plate-ratio: 8 / 5; --pl-motion: 340ms; --pl-motion-swap: 260ms; --pl-motion-loop: 1600ms; --pl-fade-w: 2rem; display: grid; grid-template-columns: minmax(0px, 1fr); gap: var(--spacing-sprout-8); } @media (min-width: 760px){.uc-vl .f2w .pl-grid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }} @media (min-width: 1160px){.uc-vl .f2w .pl-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }} @media (min-width: 1160px){.uc-vl .f2w [data-layout="topbar"] .pl-grid{ grid-template-columns: repeat(4, minmax(0px, 1fr)); }} .uc-vl .f2w .pl-card{ position: relative; animation: pl-card-in var(--pl-motion-swap) var(--ease); display: flex; min-width: 0px; flex-direction: column; gap: var(--spacing-sprout-12); padding: var(--spacing-sprout-4) var(--spacing-sprout-4) var(--spacing-sprout-0); border-radius: var(--radius-sprout-24); border: 0px; background: var(--color-sprout-color-background-default); } .uc-vl .f2w .pl-thumb{ position: relative; width: 100%; aspect-ratio: var(--pl-plate-ratio); border-radius: calc(var(--radius-sprout-24) - var(--spacing-sprout-4)); overflow: hidden; background: var(--color-sprout-color-background-dark); display: grid; place-items: center; color: var(--color-sprout-color-text-weaker); transition: color var(--pl-motion) var(--ease); } .uc-vl .f2w .pl-card:hover .pl-thumb{ color: var(--color-sprout-color-text-weakest); } .uc-vl .f2w .pl-thumb svg{ width: var(--spacing-sprout-32); height: var(--spacing-sprout-32); } .uc-vl .f2w .pl-card:hover .pl-thumb svg{ animation: pl-thumb-breathe var(--pl-motion-loop) var(--ease) infinite; } @media (prefers-reduced-motion: reduce){.uc-vl .f2w .pl-card:hover .pl-thumb svg{ animation: auto ease 0s 1 normal none running none; }} .uc-vl .f2w .pl-meta{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sprout-12); padding: var(--spacing-sprout-0) var(--spacing-sprout-16) var(--spacing-sprout-16); } .uc-vl .f2w .pl-title{ margin: var(--spacing-sprout-0); color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-cat{ margin: var(--spacing-sprout-2) var(--spacing-sprout-0) var(--spacing-sprout-0); } .uc-vl .f2w .pl-card-link{ position: absolute; inset: 0px; z-index: 1; border-radius: var(--radius-sprout-24); } .uc-vl .f2w .pl-card-link:focus-visible{ outline: 2px solid var(--color-sprout-color-primary); outline-offset: 2px; } .uc-vl .f2w .pl-meta{ position: relative; z-index: 2; } .uc-vl .f2w .pl-meta > .min-w-0{ pointer-events: none; } @media (prefers-reduced-motion: reduce){.uc-vl .f2w .pl-card{ animation: auto ease 0s 1 normal none running none; }} .uc-vl .f2w .pl-single{ --pl-split-preview: 78fr; --pl-split-side: 22fr; --pl-split-gap: var(--spacing-sprout-24); --pl-chrome-h: 2.8125rem; --pl-light-d: 0.75rem; --pl-url-max: 26rem; --pl-url-size: 0.8125rem; --pl-chrome-side: 10rem; --pl-fopt-size: 0.875rem; --pl-fopt-leading: 1.25rem; --pl-pill-dur: 240ms; --pl-pill-ease: cubic-bezier(0.3, 0, 0, 1); --pl-intro-max: 46rem; --pl-side-gap: var(--spacing-sprout-20); --pl-side-h-size: 1.125rem; --pl-side-h-leading: 1.5rem; --pl-row-size: 0.875rem; --pl-row-leading: 1.25rem; --pl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --pl-peek-size: 0.8125rem; --pl-peek-leading: 1.375rem; --pl-peek-lines: 5; --pl-peek-max: calc(var(--pl-peek-leading) * var(--pl-peek-lines)); --pl-modal-body-max: 26rem; --pl-scrim: rgba(0, 0, 0, 0.8); } .uc-vl .f2w .pl-hero{ display: flex; flex-direction: column; gap: var(--spacing-sprout-12); margin-bottom: var(--spacing-sprout-32); } .uc-vl .f2w .pl-crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sprout-4); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; } .uc-vl .f2w .pl-crumbs li{ display: inline-flex; align-items: center; gap: var(--spacing-sprout-4); } .uc-vl .f2w .pl-crumbs a, .uc-vl .f2w .pl-crumbs [aria-current]{ font-size: var(--pl-fopt-size); line-height: var(--pl-fopt-leading); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; } .uc-vl .f2w .pl-crumbs a{ color: var(--color-sprout-color-text-weaker); transition: color var(--pl-pill-dur) var(--pl-pill-ease); } .uc-vl .f2w .pl-crumbs a:hover{ color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-crumbs [aria-current]{ color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-crumb-sep{ width: var(--spacing-sprout-16); height: var(--spacing-sprout-16); flex: 0 0 auto; color: var(--color-sprout-color-text-weakest); } .uc-vl .f2w .pl-head-title{ margin: var(--spacing-sprout-0); font-size: var(--pl-head-size); line-height: var(--pl-head-leading); font-weight: 500; letter-spacing: -0.02em; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-split{ display: grid; grid-template-columns: minmax(0, var(--pl-split-preview)) minmax(0, var(--pl-split-side)); gap: var(--pl-split-gap); align-items: start; } .uc-vl .f2w .pl-side{ min-width: 0px; } .uc-vl .f2w .pl-side-card{ display: flex; flex-direction: column; gap: var(--spacing-sprout-4); padding: var(--spacing-sprout-4); border: 1px solid var(--color-sprout-color-border-weak); border-radius: var(--radius-sprout-16); background: var(--color-sprout-color-background-weaker); box-shadow: rgba(16, 24, 40, 0.04) 0px 1px 2px, rgba(16, 24, 40, 0.12) 0px 8px 24px -12px; } .uc-vl .f2w .pl-side-inner{ display: flex; flex-direction: column; gap: var(--spacing-sprout-4); padding: var(--spacing-sprout-4); border-radius: var(--radius-sprout-12); background: var(--color-sprout-color-background-weaker); box-shadow: inset 0 0 0 1px var(--color-sprout-color-border-weak); } .uc-vl .f2w .sec h2.pl-side-h{ margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-12) var(--spacing-sprout-12) var(--spacing-sprout-8); font-size: var(--pl-side-h-size); line-height: var(--pl-side-h-leading); font-weight: 500; letter-spacing: -0.01em; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-side-rows{ display: flex; flex-direction: column; gap: var(--spacing-sprout-8); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-8) var(--spacing-sprout-12); } .uc-vl .f2w .sl-side-rows{ gap: var(--spacing-sprout-12); } .uc-vl .f2w .pl-side-rows > div{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sprout-12); } .uc-vl .f2w .pl-side-rows dt, .uc-vl .f2w .pl-side-rows dd{ margin: var(--spacing-sprout-0); font-size: var(--pl-row-size); line-height: var(--pl-row-leading); } .uc-vl .f2w .pl-side-rows dt{ color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .pl-side-rows dd{ display: inline-flex; align-items: center; } .uc-vl .f2w .pl-side-val{ font-weight: 500; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .pl-side-builders{ display: flex; align-items: center; gap: var(--spacing-sprout-6); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; } .uc-vl .f2w .pl-builder{ display: block; width: 20px; height: 20px; border-radius: var(--radius-sprout-6); overflow: hidden; } .uc-vl .f2w .pl-builder img{ display: block; width: 100%; height: 100%; } .uc-vl .f2w .pl-side-cats, .uc-vl .f2w .pl-side-prompt{ display: flex; flex-direction: column; gap: var(--spacing-sprout-8); padding: var(--spacing-sprout-4) var(--spacing-sprout-12) var(--spacing-sprout-12); } .uc-vl .f2w .pl-side-label{ margin: var(--spacing-sprout-0); font-size: var(--pl-row-size); line-height: var(--pl-row-leading); font-weight: 500; color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .pl-cat-chips{ display: flex; flex-wrap: wrap; gap: var(--spacing-sprout-8); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; } .uc-vl .f2w .pl-cat-chips li{ display: inline-flex; } .uc-vl .f2w .pl-side-foot{ display: flex; flex-direction: column; gap: var(--spacing-sprout-8); } @media (max-width: 1200px){.uc-vl .f2w .pl-split{ grid-template-columns: minmax(0px, 1fr); }} @media (max-width: 560px){.uc-vl .f2w .pl-single{ --pl-chrome-side: 3.5rem; }} .uc-vl .f2w .pl-side-prompt{ position: relative; margin-top: var(--spacing-sprout-8); padding-top: var(--spacing-sprout-16); } .uc-vl .f2w .pl-side-prompt::before{ content: ""; position: absolute; top: 0px; left: var(--spacing-sprout-12); right: var(--spacing-sprout-12); height: 1px; background: var(--color-sprout-color-border-weak); } .uc-vl .f2w .sec h2.pl-more-head{ margin: var(--spacing-sprout-64) var(--spacing-sprout-0) var(--spacing-sprout-24); font-size: var(--pl-more-size); line-height: var(--pl-more-leading); font-weight: 500; letter-spacing: -0.01em; } .uc-vl .f2w .vl-grid{ --pl-plate-ratio: 16 / 9; } .uc-vl .f2w .vl-thumb img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .uc-vl .f2w .vl-card:hover .vl-thumb img{ transform: scale(1.03); } .uc-vl .f2w .vl-play{ position: relative; z-index: 1; display: grid; place-items: center; width: var(--spacing-sprout-48); height: var(--spacing-sprout-48); border-radius: var(--radius-sprout-infinite); background: rgba(23, 23, 23, 0.72); color: rgb(255, 255, 255); opacity: 0; transform: scale(0.9); transition: opacity var(--pl-motion) var(--ease), transform var(--pl-motion) var(--ease); backdrop-filter: blur(6px); } .uc-vl .f2w .vl-card:hover .vl-play{ opacity: 1; transform: none; } .uc-vl .f2w .vl-thumb .vl-play svg{ width: var(--spacing-sprout-20); height: var(--spacing-sprout-20); margin-left: 2px; animation: auto ease 0s 1 normal none running none; fill: currentcolor; } .uc-vl .f2w .vl-dur{ position: absolute; right: var(--spacing-sprout-8); bottom: var(--spacing-sprout-8); z-index: 1; padding: var(--spacing-sprout-2) var(--spacing-sprout-6); border-radius: var(--radius-sprout-6); background: rgba(0, 0, 0, 0.78); color: rgb(255, 255, 255); font-size: 0.75rem; line-height: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; } .uc-vl .f2w .vl-dur-lg{ right: var(--spacing-sprout-12); bottom: var(--spacing-sprout-12); font-size: 0.8125rem; } .uc-vl .f2w .vl-meta{ display: block; } .uc-vl .f2w .vl-title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uc-vl .f2w .vl-sub{ display: flex; flex-wrap: wrap; gap: var(--spacing-sprout-6); } .uc-vl .f2w .vl-single{ --pl-split-preview: 68fr; --pl-split-side: 32fr; } .uc-vl .f2w .vl-main{ min-width: 0px; } .uc-vl .f2w .vl-meta-line{ display: flex; flex-wrap: wrap; gap: var(--spacing-sprout-6); margin: var(--spacing-sprout-0); color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .vl-player{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sprout-16); border: 1px solid var(--color-sprout-color-border-weak); background: var(--color-sprout-color-background-dark); box-shadow: rgba(16, 24, 40, 0.04) 0px 1px 2px, rgba(16, 24, 40, 0.12) 0px 8px 24px -12px; scroll-margin-top: 96px; } .uc-vl .f2w .vl-player iframe{ position: absolute; inset: 0px; width: 100%; height: 100%; border: 0px; } .uc-vl .f2w .vl-facade{ position: absolute; inset: 0px; display: grid; place-items: center; width: 100%; padding: 0px; border: 0px; cursor: pointer; background: transparent; } .uc-vl .f2w .vl-facade img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; } .uc-vl .f2w .vl-facade-btn{ position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-sprout-infinite); background: var(--color-sprout-color-primary); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px -8px; transition: transform var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-facade-btn svg{ width: 1.75rem; height: 1.75rem; margin-left: 3px; fill: currentcolor; } .uc-vl .f2w .vl-facade:hover .vl-facade-btn{ transform: scale(1.08); } .uc-vl .f2w .vl-facade:focus-visible{ outline: 3px solid var(--color-sprout-color-primary); outline-offset: -3px; } @media (min-width: 1201px){.uc-vl .f2w .vl-side{ position: sticky; top: 5rem; }} .uc-vl .f2w .vl-chapters-inner{ padding: var(--spacing-sprout-4); } .uc-vl .f2w .vl-chapters{ display: flex; flex-direction: column; gap: var(--spacing-sprout-2); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; max-height: min(24rem, 46vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .uc-vl .f2w .vl-chapter{ display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: start; gap: var(--spacing-sprout-10, 10px); width: 100%; padding: var(--spacing-sprout-8); border: 0px; border-radius: var(--radius-sprout-8); background: transparent; text-align: left; cursor: pointer; transition: background var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-chapter:hover{ background: var(--color-sprout-color-background-default); } .uc-vl .f2w .vl-chapter[data-active="true"]{ background: var(--color-sprout-color-background-stronger); } .uc-vl .f2w .vl-chapter:focus-visible{ outline: 2px solid var(--color-sprout-color-primary); outline-offset: -2px; } .uc-vl .f2w .vl-chapter-title{ font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .vl-stamp{ display: inline-block; min-width: 2.75rem; padding: var(--spacing-sprout-0) var(--spacing-sprout-6); border-radius: var(--radius-sprout-6); background: var(--color-sprout-color-background-stronger); color: var(--color-sprout-color-text-weaker); font-size: 0.75rem; line-height: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; transition: background var(--pl-pill-dur, 240ms) var(--ease), color var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-chapter:hover .vl-stamp, .uc-vl .f2w .vl-chapter[data-active="true"] .vl-stamp{ background: var(--color-sprout-color-primary); color: rgb(255, 255, 255); } .uc-vl .f2w .vl-yt{ display: block; } .uc-vl .f2w .vl-yt a{ width: 100%; } .uc-vl .f2w .vl-yt svg{ width: 1.125rem; height: 1.125rem; } .uc-vl .f2w .vl-block{ margin-top: var(--spacing-sprout-40); max-width: 48rem; } .uc-vl .f2w .sec h2.vl-h{ margin: var(--spacing-sprout-0) var(--spacing-sprout-0) var(--spacing-sprout-12); font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .sec h3.vl-h3{ margin: var(--spacing-sprout-24) var(--spacing-sprout-0) var(--spacing-sprout-8); font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .vl-p{ margin: var(--spacing-sprout-0) var(--spacing-sprout-0) var(--spacing-sprout-12); font-size: 1rem; line-height: 1.625rem; color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .vl-list{ display: flex; flex-direction: column; gap: var(--spacing-sprout-8); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; } .uc-vl .f2w .vl-list li{ position: relative; padding-left: var(--spacing-sprout-20); font-size: 0.9375rem; line-height: 1.5rem; color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .vl-list li::before{ content: ""; position: absolute; left: var(--spacing-sprout-4); top: 0.625rem; width: 6px; height: 6px; border-radius: var(--radius-sprout-infinite); background: var(--color-sprout-color-primary); } .uc-vl .f2w .vl-links{ display: flex; flex-wrap: wrap; gap: var(--spacing-sprout-8); margin: var(--spacing-sprout-0); padding: var(--spacing-sprout-0); list-style: none; } .uc-vl .f2w .vl-links a{ display: inline-flex; align-items: center; gap: var(--spacing-sprout-4); padding: var(--spacing-sprout-6) var(--spacing-sprout-12); border: 1px solid var(--color-sprout-color-border-weak); border-radius: var(--radius-sprout-infinite); background: var(--color-sprout-color-background-weaker); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-sprout-color-text-default); text-decoration: none; transition: background var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-links a:hover{ background: var(--color-sprout-color-background-stronger); } .uc-vl .f2w .vl-links svg{ width: 14px; height: 14px; color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .vl-transcript{ margin-top: var(--spacing-sprout-40); border: 1px solid var(--color-sprout-color-border-weak); border-radius: var(--radius-sprout-16); background: var(--color-sprout-color-background-weaker); } .uc-vl .f2w .vl-transcript > summary{ display: flex; align-items: center; gap: var(--spacing-sprout-12); padding: var(--spacing-sprout-16) var(--spacing-sprout-20); cursor: pointer; list-style: none; border-radius: var(--radius-sprout-16); } .uc-vl .f2w .vl-transcript > summary::-webkit-details-marker{ display: none; } .uc-vl .f2w .vl-transcript > summary:focus-visible{ outline: 2px solid var(--color-sprout-color-primary); outline-offset: 2px; } .uc-vl .f2w .vl-transcript-h{ font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .vl-transcript-meta{ color: var(--color-sprout-color-text-weakest); } .uc-vl .f2w .vl-transcript-caret{ width: 1.25rem; height: 1.25rem; margin-left: auto; color: var(--color-sprout-color-text-weaker); transition: transform var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-transcript[open] .vl-transcript-caret{ transform: rotate(180deg); } .uc-vl .f2w .vl-transcript-body{ padding: var(--spacing-sprout-4) var(--spacing-sprout-20) var(--spacing-sprout-20); border-top: 1px solid var(--color-sprout-color-border-weak); } .uc-vl .f2w .sec h3.vl-tsec-h{ display: flex; align-items: center; gap: var(--spacing-sprout-10, 10px); margin: var(--spacing-sprout-24) var(--spacing-sprout-0) var(--spacing-sprout-8); font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--color-sprout-color-text-default); } .uc-vl .f2w .vl-stamp-btn{ border: 0px; cursor: pointer; } .uc-vl .f2w .vl-stamp-btn:hover{ background: var(--color-sprout-color-primary); color: rgb(255, 255, 255); } .uc-vl .f2w .vl-tpara{ display: grid; grid-template-columns: 3rem minmax(0px, 1fr); gap: var(--spacing-sprout-12); margin: var(--spacing-sprout-0) var(--spacing-sprout-0) var(--spacing-sprout-12); font-size: 0.9375rem; line-height: 1.625rem; color: var(--color-sprout-color-text-weaker); } .uc-vl .f2w .vl-tpara-t{ align-self: start; margin-top: 3px; padding: 0px; border: 0px; background: none; cursor: pointer; text-align: left; font-size: 0.75rem; line-height: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-sprout-color-text-weakest); transition: color var(--pl-pill-dur, 240ms) var(--ease); } .uc-vl .f2w .vl-tpara-t:hover{ color: var(--color-sprout-color-primary); text-decoration: underline; } .uc-vl .f2w .vl-transcript-note{ margin: var(--spacing-sprout-16) var(--spacing-sprout-0) var(--spacing-sprout-0); color: var(--color-sprout-color-text-weakest); } @media (max-width: 1200px){.uc-vl .f2w .vl-main{ display: contents; }} @media (max-width: 1200px){.uc-vl .f2w .vl-player{ order: 1; }} @media (max-width: 1200px){.uc-vl .f2w .vl-side{ order: 2; }} @media (max-width: 1200px){.uc-vl .f2w .vl-block{ order: 3; max-width: none; margin-top: var(--spacing-sprout-16); }} @media (max-width: 1200px){.uc-vl .f2w .vl-transcript{ order: 4; margin-top: var(--spacing-sprout-0); }} @media (max-width: 560px){.uc-vl .f2w .vl-tpara{ grid-template-columns: minmax(0px, 1fr); gap: var(--spacing-sprout-0); }} @media (max-width: 560px){.uc-vl .f2w .vl-transcript-body{ padding-inline: var(--spacing-sprout-16); }} @media (prefers-reduced-motion: reduce){.uc-vl .f2w .vl-thumb img, .uc-vl .f2w .vl-play, .uc-vl .f2w .vl-facade-btn{ transition: none; }} @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes enter { 0% { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); } } @keyframes exit { 100% { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); } } @keyframes gradient { 100% { background-position: var(--bg-size, 300%) 0; } } @keyframes pl-card-in { 0% { opacity: 0; transform: translateY(var(--spacing-sprout-8)); } 100% { opacity: 1; transform: none; } } @keyframes pl-thumb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .uc-vl [hidden]{display:none!important}