/* uichemy-composer v6 - scoped under .uc-ucc. Built from the Next.js app at app/uichemy-composer (localhost:3777), NOT from public/ucwr/. Every rule is wrapped in :where(.uc-ucc) so page-internal specificity is unchanged while nothing can match outside the page. Classes that collide with #uichemy-globals are renamed with the ucx- prefix in HTML, CSS and JS together. See memory new-uichemy-design-system-isolation. */ @layer properties;@layer theme, base, components, utilities; .uc-ucc{font-size:16px;font-family:var(--font-zalando-sans);} :where(.uc-ucc) :is(h1,h2,h3,h4,h5,h6){margin:0;} :where(.uc-ucc) :is(h1,h2,h3,h4,h5,h6).mt-3{ margin-top: calc(var(--spacing) * 3); }:where(.uc-ucc) :is(h1,h2,h3,h4,h5,h6).leading-\[50px\]{ --tw-leading: 50px; line-height: 50px; } :where(.uc-ucc) .lenis:not(.lenis-autoToggle).lenis-stopped{ overflow: clip; }:where(.uc-ucc) .lenis [data-lenis-prevent], :where(.uc-ucc) .lenis [data-lenis-prevent-wheel], :where(.uc-ucc) .lenis [data-lenis-prevent-touch], :where(.uc-ucc) .lenis [data-lenis-prevent-vertical], :where(.uc-ucc) .lenis [data-lenis-prevent-horizontal]{ overscroll-behavior: contain; }:where(.uc-ucc) .lenis.lenis-smooth iframe{ pointer-events: none; }:where(.uc-ucc) .lenis.lenis-autoToggle{ transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }@layer theme{.uc-ucc{ --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-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; --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-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-12: 12px; --radius-sprout-infinite: 9999px; --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); }}@layer base{:where(.uc-ucc), :where(.uc-ucc) *, :where(.uc-ucc) *::after, :where(.uc-ucc) *::before, :where(.uc-ucc) *::backdrop, :where(.uc-ucc) *::file-selector-button{ box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }:where(.uc-ucc){ line-height: 1.5; -webkit-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; }:where(.uc-ucc) hr{ height: 0; color: inherit; border-top-width: 1px; }:where(.uc-ucc) abbr:where([title]){ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }:where(.uc-ucc) h1, :where(.uc-ucc) h2, :where(.uc-ucc) h3, :where(.uc-ucc) h4, :where(.uc-ucc) h5, :where(.uc-ucc) h6{ font-size: inherit; font-weight: inherit; }:where(.uc-ucc) a{ color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }:where(.uc-ucc) b, :where(.uc-ucc) strong{ font-weight: bolder; }:where(.uc-ucc) code, :where(.uc-ucc) kbd, :where(.uc-ucc) samp, :where(.uc-ucc) pre{ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; }:where(.uc-ucc) small{ font-size: 80%; }:where(.uc-ucc) sub, :where(.uc-ucc) sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }:where(.uc-ucc) sub{ bottom: -0.25em; }:where(.uc-ucc) sup{ top: -0.5em; }:where(.uc-ucc) table{ text-indent: 0; border-color: inherit; border-collapse: collapse; }:where(.uc-ucc) :-moz-focusring{ outline: auto; }:where(.uc-ucc) progress{ vertical-align: baseline; }:where(.uc-ucc) summary{ display: list-item; }:where(.uc-ucc) ol, :where(.uc-ucc) ul, :where(.uc-ucc) menu{ list-style: none; }:where(.uc-ucc) img, :where(.uc-ucc) svg, :where(.uc-ucc) video, :where(.uc-ucc) canvas, :where(.uc-ucc) audio, :where(.uc-ucc) iframe, :where(.uc-ucc) embed, :where(.uc-ucc) object{ display: block; vertical-align: middle; }:where(.uc-ucc) img, :where(.uc-ucc) video{ max-width: 100%; height: auto; }:where(.uc-ucc) button, :where(.uc-ucc) input, :where(.uc-ucc) select, :where(.uc-ucc) optgroup, :where(.uc-ucc) textarea, :where(.uc-ucc) ::file-selector-button{ font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; }:where(.uc-ucc) :where(select:is([multiple], [size])) optgroup{ font-weight: bolder; }:where(.uc-ucc) :where(select:is([multiple], [size])) optgroup option{ padding-inline-start: 20px; }:where(.uc-ucc) ::file-selector-button{ margin-inline-end: 4px; }:where(.uc-ucc) ::placeholder{ opacity: 1; }@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){:where(.uc-ucc) ::placeholder{ color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } }}:where(.uc-ucc) textarea{ resize: vertical; }:where(.uc-ucc) ::-webkit-search-decoration{ -webkit-appearance: none; }:where(.uc-ucc) ::-webkit-date-and-time-value{ min-height: 1lh; text-align: inherit; }:where(.uc-ucc) ::-webkit-datetime-edit{ display: inline-flex; }:where(.uc-ucc) ::-webkit-datetime-edit-fields-wrapper{ padding: 0; }:where(.uc-ucc) ::-webkit-datetime-edit, :where(.uc-ucc) ::-webkit-datetime-edit-year-field, :where(.uc-ucc) ::-webkit-datetime-edit-month-field, :where(.uc-ucc) ::-webkit-datetime-edit-day-field, :where(.uc-ucc) ::-webkit-datetime-edit-hour-field, :where(.uc-ucc) ::-webkit-datetime-edit-minute-field, :where(.uc-ucc) ::-webkit-datetime-edit-second-field, :where(.uc-ucc) ::-webkit-datetime-edit-millisecond-field, :where(.uc-ucc) ::-webkit-datetime-edit-meridiem-field{ padding-block: 0; }:where(.uc-ucc) ::-webkit-calendar-picker-indicator{ line-height: 1; }:where(.uc-ucc) :-moz-ui-invalid{ box-shadow: none; }:where(.uc-ucc) button, :where(.uc-ucc) input:where([type="button"], [type="reset"], [type="submit"]), :where(.uc-ucc) ::file-selector-button{ appearance: button; }:where(.uc-ucc) ::-webkit-inner-spin-button, :where(.uc-ucc) ::-webkit-outer-spin-button{ height: auto; }:where(.uc-ucc) [hidden]:where(:not([hidden="until-found"])){ display: none !important; }}@layer utilities{:where(.uc-ucc) .absolute{ position: absolute; }:where(.uc-ucc) .relative{ position: relative; }:where(.uc-ucc) .inset-0{ inset: calc(var(--spacing) * 0); }:where(.uc-ucc) .top-1\/2{ top: calc(1/2 * 100%); }:where(.uc-ucc) .top-3{ top: calc(var(--spacing) * 3); }:where(.uc-ucc) .top-full{ top: 100%; }:where(.uc-ucc) .right-3{ right: calc(var(--spacing) * 3); }:where(.uc-ucc) .left-1\/2{ left: calc(1/2 * 100%); }:where(.uc-ucc) .isolate{ isolation: isolate; }:where(.uc-ucc) .z-10{ z-index: 10; }:where(.uc-ucc) .container{ width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } }:where(.uc-ucc) .-my-1\.5{ margin-block: calc(var(--spacing) * -1.5); }:where(.uc-ucc) .mt-3{ margin-top: calc(var(--spacing) * 3); }:where(.uc-ucc) .mt-sprout-8{ margin-top: var(--spacing-sprout-8); }:where(.uc-ucc) .mt-sprout-12{ margin-top: var(--spacing-sprout-12); }:where(.uc-ucc) .mt-sprout-48{ margin-top: var(--spacing-sprout-48); }:where(.uc-ucc) .mb-2{ margin-bottom: calc(var(--spacing) * 2); }:where(.uc-ucc) .mb-sprout-16{ margin-bottom: var(--spacing-sprout-16); }:where(.uc-ucc) .mb-sprout-24{ margin-bottom: var(--spacing-sprout-24); }:where(.uc-ucc) .block{ display: block; }:where(.uc-ucc) .flex{ display: flex; }:where(.uc-ucc) .grid{ display: grid; }:where(.uc-ucc) .hidden{ display: none; }:where(.uc-ucc) .inline-flex{ display: inline-flex; }:where(.uc-ucc) .aspect-video{ aspect-ratio: var(--aspect-video); }:where(.uc-ucc) .h-10{ height: calc(var(--spacing) * 10); }:where(.uc-ucc) .h-11{ height: calc(var(--spacing) * 11); }:where(.uc-ucc) .h-\[18px\]{ height: 18px; }:where(.uc-ucc) .h-\[22px\]{ height: 22px; }:where(.uc-ucc) .h-\[660px\]{ height: 660px; }:where(.uc-ucc) .h-full{ height: 100%; }:where(.uc-ucc) .w-10{ width: calc(var(--spacing) * 10); }:where(.uc-ucc) .w-11{ width: calc(var(--spacing) * 11); }:where(.uc-ucc) .w-\[18px\]{ width: 18px; }:where(.uc-ucc) .w-\[22px\]{ width: 22px; }:where(.uc-ucc) .w-full{ width: 100%; }:where(.uc-ucc) .w-px{ width: 1px; }:where(.uc-ucc) .max-w-\[441px\]{ max-width: 441px; }:where(.uc-ucc) .max-w-\[701px\]{ max-width: 701px; }:where(.uc-ucc) .shrink-0{ flex-shrink: 0; }:where(.uc-ucc) .-translate-x-1\/2{ --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }:where(.uc-ucc) .-translate-y-1\/2{ --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }:where(.uc-ucc) .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); }:where(.uc-ucc) .flex-col{ flex-direction: column; }:where(.uc-ucc) .place-items-center{ place-items: center; }:where(.uc-ucc) .items-center{ align-items: center; }:where(.uc-ucc) .items-start{ align-items: flex-start; }:where(.uc-ucc) .justify-between{ justify-content: space-between; }:where(.uc-ucc) .justify-center{ justify-content: center; }:where(.uc-ucc) .gap-2{ gap: calc(var(--spacing) * 2); }:where(.uc-ucc) .gap-2\.5{ gap: calc(var(--spacing) * 2.5); }:where(.uc-ucc) .gap-3{ gap: calc(var(--spacing) * 3); }:where(.uc-ucc) .gap-4{ gap: calc(var(--spacing) * 4); }:where(.uc-ucc) .gap-8{ gap: calc(var(--spacing) * 8); }:where(.uc-ucc) .gap-sprout-16{ gap: var(--spacing-sprout-16); }:where(.uc-ucc) .self-stretch{ align-self: stretch; }:where(.uc-ucc) .overflow-hidden{ overflow: hidden; }:where(.uc-ucc) .rounded-\[10px\]{ border-radius: 10px; }:where(.uc-ucc) .rounded-\[12px\]{ border-radius: 12px; }:where(.uc-ucc) .rounded-\[16px\]{ border-radius: 16px; }:where(.uc-ucc) .rounded-\[24px\]{ border-radius: 24px; }:where(.uc-ucc) .rounded-full{ border-radius: calc(infinity * 1px); }:where(.uc-ucc) .border{ border-style: var(--tw-border-style); border-width: 1px; }:where(.uc-ucc) .border-sprout-color-border-weak{ border-color: var(--color-sprout-color-border-weak); }:where(.uc-ucc) .bg-black\/55{ background-color: color-mix(in srgb, #000 55%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 55%, transparent); } }:where(.uc-ucc) .bg-sprout-color-background-default{ background-color: var(--color-sprout-color-background-default); }:where(.uc-ucc) .bg-sprout-color-background-stronger{ background-color: var(--color-sprout-color-background-stronger); }:where(.uc-ucc) .bg-sprout-color-background-weaker{ background-color: var(--color-sprout-color-background-weaker); }:where(.uc-ucc) .object-cover{ object-fit: cover; }:where(.uc-ucc) .p-6{ padding: calc(var(--spacing) * 6); }:where(.uc-ucc) .p-\[9px\]{ padding: 9px; }:where(.uc-ucc) .p-sprout-20{ padding: var(--spacing-sprout-20); }:where(.uc-ucc) .px-3{ padding-inline: calc(var(--spacing) * 3); }:where(.uc-ucc) .py-sprout-8{ padding-block: var(--spacing-sprout-8); }:where(.uc-ucc) .pt-0\.5{ padding-top: calc(var(--spacing) * 0.5); }:where(.uc-ucc) .pt-3\.5{ padding-top: calc(var(--spacing) * 3.5); }:where(.uc-ucc) .pb-2\.5{ padding-bottom: calc(var(--spacing) * 2.5); }:where(.uc-ucc) .font-zalando-sans{ font-family: var(--font-zalando-sans); }:where(.uc-ucc) .text-\[12px\]{ font-size: 12px; }:where(.uc-ucc) .text-\[16px\]{ font-size: 16px; }:where(.uc-ucc) .text-\[48px\]{ font-size: 48px; }:where(.uc-ucc) .leading-6{ --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); }:where(.uc-ucc) .leading-\[50px\]{ --tw-leading: 50px; line-height: 50px; }:where(.uc-ucc) .leading-tight{ --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }:where(.uc-ucc) .font-medium{ --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }:where(.uc-ucc) .font-semibold{ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }:where(.uc-ucc) .tracking-\[-\.01em\]{ --tw-tracking: -.01em; letter-spacing: -.01em; }:where(.uc-ucc) .tracking-\[-\.03em\]{ --tw-tracking: -.03em; letter-spacing: -.03em; }:where(.uc-ucc) .tracking-\[2px\]{ --tw-tracking: 2px; letter-spacing: 2px; }:where(.uc-ucc) .whitespace-nowrap{ white-space: nowrap; }:where(.uc-ucc) .\!text-sprout-color-text-default{ color: var(--color-sprout-color-text-default) !important; }:where(.uc-ucc) .text-sprout-color-primary{ color: var(--color-sprout-color-primary); }:where(.uc-ucc) .text-sprout-color-text-default{ color: var(--color-sprout-color-text-default); }:where(.uc-ucc) .text-sprout-color-text-weaker{ color: var(--color-sprout-color-text-weaker); }:where(.uc-ucc) .no-underline{ text-decoration-line: none; }:where(.uc-ucc) .ring-1{ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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); }:where(.uc-ucc) .ring-white\/20{ --tw-ring-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent); } }:where(.uc-ucc) .backdrop-blur-sm{ --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }:where(.uc-ucc) .transition-colors{ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }:where(.uc-ucc) .transition-transform{ transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }:where(.uc-ucc) .duration-200{ --tw-duration: 200ms; transition-duration: 200ms; }:where(.uc-ucc) .group-hover\:scale-110{ &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } }:where(.uc-ucc) .hover\:border-sprout-color-border-default{ &:hover { @media (hover: hover) { border-color: var(--color-sprout-color-border-default); } } }:where(.uc-ucc) .sm\:grid-cols-2{ @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }:where(.uc-ucc) .md\:block{ @media (width >= 48rem) { display: block; } }:where(.uc-ucc) .md\:grid-cols-2{ @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }:where(.uc-ucc) .lg\:block{ @media (width >= 64rem) { display: block; } }:where(.uc-ucc) .lg\:grid-cols-3{ @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }:where(.uc-ucc) .lg\:grid-cols-4{ @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }:where(.uc-ucc) .lg\:flex-row{ @media (width >= 64rem) { flex-direction: row; } }:where(.uc-ucc) .lg\:items-end{ @media (width >= 64rem) { align-items: flex-end; } }:where(.uc-ucc) .lg\:justify-between{ @media (width >= 64rem) { justify-content: space-between; } }}@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; }:where(.uc-ucc).uc-night .uc-logo-figma, :where(.uc-ucc).uc-night .uc-logo-figma:hover{ filter: brightness(0) invert(1) !important; }.uc-ucc{ --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); }:where(.uc-ucc) .dark{ --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); }:where(.uc-ucc) .prose-content img{ border-radius: 12px; margin-top: 2.5rem; margin-bottom: 2.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); display: block; max-width: none; width: calc(100% + 340px); margin-left: -120px; margin-right: -120px; }@media (max-width: 1024px){:where(.uc-ucc) .prose-content img{ width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; }}@media (max-width: 768px){:where(.uc-ucc) .prose-content img{ width: 100%; margin-left: 0; margin-right: 0; }}:where(.uc-ucc) .hero-gradient-fade{ mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 75%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 75%, transparent 100%); }:where(.uc-ucc) .hero-image-mask{ mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); }@media (min-width: 768px){:where(.uc-ucc) .hero-image-mask{ mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, black 5%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, black 5%, black 85%, transparent 100%); }}@keyframes gradientCycle1{ 0%, 5% { opacity: 0.85; } 28%, 38% { opacity: 0; } 66%, 76% { opacity: 0; } 90%, 100% { opacity: 0.85; } }@keyframes gradientCycle2{ 0%, 5% { opacity: 0; } 28%, 38% { opacity: 0.85; } 66%, 76% { opacity: 0; } 90%, 100% { opacity: 0; } }@keyframes gradientCycle3{ 0%, 5% { opacity: 0; } 28%, 38% { opacity: 0; } 66%, 76% { opacity: 0.85; } 90%, 100% { opacity: 0; } }:where(.uc-ucc) .animate-gradient-cycle-1{ animation: gradientCycle1 9s ease-in-out infinite; }:where(.uc-ucc) .animate-gradient-cycle-2{ animation: gradientCycle2 9s ease-in-out infinite; }:where(.uc-ucc) .animate-gradient-cycle-3{ animation: gradientCycle3 9s ease-in-out infinite; }@keyframes float-diagonal{ 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(30px, -20px); } 50% { transform: translate(60px, 0); } 75% { transform: translate(30px, 20px); } }@keyframes float-vertical{ 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -40px); } }@keyframes float-circular{ 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-30px, -30px); } 50% { transform: translate(-60px, 0); } 75% { transform: translate(-30px, 30px); } }@keyframes panelIn{ from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }:where(.uc-ucc) .animate-panel-in{ animation: panelIn 300ms cubic-bezier(0.4, 0, 0.2, 1); }@keyframes gravityDrop{ 0% { opacity: 0; transform: translate3d(0, -150px, 0) rotate(calc(var(--tilt, 0deg) - 7deg)); animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.65); } 12% { opacity: 1; } 50% { transform: translate3d(0, 0, 0) rotate(calc(var(--tilt, 0deg) + 1.6deg)); animation-timing-function: cubic-bezier(0.15, 0.6, 0.35, 1); } 64% { transform: translate3d(0, -13px, 0) rotate(var(--tilt, 0deg)); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); } 78% { transform: translate3d(0, 0, 0) rotate(calc(var(--tilt, 0deg) + 0.5deg)); animation-timing-function: cubic-bezier(0.15, 0.6, 0.35, 1); } 88% { transform: translate3d(0, -4px, 0) rotate(var(--tilt, 0deg)); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); } }:where(.uc-ucc) .animate-gravity-drop{ animation: gravityDrop 1100ms both; will-change: transform, opacity; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .animate-gravity-drop{ animation: none; opacity: 1; transform: rotate(var(--tilt, 0deg)); }}@layer base{:where(.uc-ucc), :where(.uc-ucc) *{ 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-ucc{ background-color: var(--background); color: var(--foreground); overflow-x: clip; max-width: 100%; }html:has(.uc-ucc)::-webkit-scrollbar, body:has(.uc-ucc)::-webkit-scrollbar{ width: 14px; background: transparent; }html:has(.uc-ucc)::-webkit-scrollbar-track, body:has(.uc-ucc)::-webkit-scrollbar-track{ background: transparent; }html:has(.uc-ucc)::-webkit-scrollbar-thumb, body:has(.uc-ucc)::-webkit-scrollbar-thumb{ background-color: #b0b0b0; border-radius: 9999px; border: 4px solid transparent; background-clip: content-box; min-height: 48px; }html:has(.uc-ucc)::-webkit-scrollbar-thumb:hover, body:has(.uc-ucc)::-webkit-scrollbar-thumb:hover{ background-color: #8a8a8a; }html:has(.uc-ucc)::-webkit-scrollbar-button:single-button, body:has(.uc-ucc)::-webkit-scrollbar-button:single-button{ background-repeat: no-repeat; background-position: center; background-size: 8px; height: 14px; width: 14px; }html:has(.uc-ucc)::-webkit-scrollbar-button:single-button:vertical:decrement, body:has(.uc-ucc)::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image: url("data:image/svg+xml;utf8,"); }html:has(.uc-ucc)::-webkit-scrollbar-button:single-button:vertical:increment, body:has(.uc-ucc)::-webkit-scrollbar-button:single-button:vertical:increment{ background-image: url("data:image/svg+xml;utf8,"); }@supports not selector(::-webkit-scrollbar){.uc-ucc{ scrollbar-width: thin; scrollbar-color: #b0b0b0 transparent; }}:where(.uc-ucc) ::selection{ background-color: rgba(82, 2, 253, 0.18) !important; }:where(.uc-ucc) ::-moz-selection{ background-color: rgba(82, 2, 253, 0.18) !important; }}@font-face{ font-family: "Zalando Sans"; src: url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }@font-face{ font-family: "Zalando Sans"; src: url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }@font-face{ font-family: "Zalando Sans"; src: url("/wp-content/uploads/2026/09/fonts-ZalandoSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }@font-face{ font-family: "Zalando Sans"; src: url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }@layer utilities{}@media (max-width: 1024px){:where(.uc-ucc) .sprout-heading-2xl-semibold{ font-size: 60px; line-height: 70px; }:where(.uc-ucc) .sprout-heading-lg-medium{ font-size: 32px; line-height: 44px; }:where(.uc-ucc) .sprout-heading-md-medium{ font-size: 28px; line-height: 36px; }:where(.uc-ucc) .sprout-heading-xs-medium{ font-size: 20px; line-height: 28px; }:where(.uc-ucc) .sprout-body-md-regular, :where(.uc-ucc) .sprout-body-md-medium, :where(.uc-ucc) .sprout-body-md-semibold, :where(.uc-ucc) .sprout-body-md-regular-italic{ font-size: 15px; line-height: 22px; }:where(.uc-ucc) .sprout-body-sm-medium, :where(.uc-ucc) .sprout-body-sm-regular, :where(.uc-ucc) .sprout-body-sm-semibold{ font-size: 13px; line-height: 18px; }:where(.uc-ucc) .sprout-container{ padding: 60px 15px; }}@media (max-width: 768px){:where(.uc-ucc) .sprout-heading-2xl-semibold{ font-size: 48px; line-height: 56px; }:where(.uc-ucc) .sprout-heading-lg-medium{ font-size: 28px; line-height: 30px; }:where(.uc-ucc) .sprout-heading-md-medium{ font-size: 24px; line-height: 32px; }:where(.uc-ucc) .sprout-heading-xs-medium{ font-size: 18px; line-height: 24px; }:where(.uc-ucc) .sprout-body-md-regular, :where(.uc-ucc) .sprout-body-md-medium, :where(.uc-ucc) .sprout-body-md-semibold, :where(.uc-ucc) .sprout-body-md-regular-italic{ font-size: 14px; line-height: 20px; }:where(.uc-ucc) .sprout-body-sm-regular, :where(.uc-ucc) .sprout-body-sm-medium, :where(.uc-ucc) .sprout-body-sm-semibold{ font-size: 12px; line-height: 16px; }:where(.uc-ucc) .sprout-container{ padding: 40px 15px; }:where(.uc-ucc) .footer-container{ padding: 15px; }}@keyframes scrollUp{ 0% { transform: translateY(0%); } 100% { transform: translateY(-50%); } }@keyframes scrollDown{ 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }:where(.uc-ucc) .animate-scrollUp{ animation: scrollUp 20s linear infinite; }:where(.uc-ucc) .animate-scrollDown{ animation: scrollDown 20s linear infinite; }:where(.uc-ucc) input::placeholder, :where(.uc-ucc) textarea::placeholder{ color: inherit; opacity: 0.5; }@keyframes marquee{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }:where(.uc-ucc) .animate-marquee{ animation: marquee 15s linear infinite; }@keyframes marquee-reverse{ 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }:where(.uc-ucc) .animate-marquee-reverse{ animation: marquee-reverse 15s linear infinite; }@keyframes dotsFlicker{ 0%, 100% { opacity: 0.35; } 20% { opacity: 0.8; } 45% { opacity: 0.5; } 70% { opacity: 1; } }.uc-ucc{ --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; }:where(.uc-ucc) .ucx-uc-container{ max-width: var(--uc-container-max); margin-inline: auto; padding-inline: var(--uc-gutter); }:where(.uc-ucc) .uc-section{ padding-block: var(--uc-section-y); }:where(.uc-ucc) .uc-section-lg{ padding-block: 152px 112px; }@media (max-width: 1024px){.uc-ucc{ --uc-gutter: 32px; }}@media (max-width: 768px){.uc-ucc{ --uc-gutter: 20px; --uc-section-y: 72px; }:where(.uc-ucc) .uc-section-lg{ padding-block: 88px 64px; }}:where(.uc-ucc) .ds-display{ font-weight: 500; font-size: 40px; line-height: 40px; letter-spacing: -.4px; color: var(--color-sprout-color-text-default); }@media (min-width: 768px){:where(.uc-ucc) .ds-display{ font-size: 64px; line-height: 62px; letter-spacing: -1.3px; }}:where(.uc-ucc) .ds-h2{ font-weight: 500; font-size: 28px; line-height: 30px; letter-spacing: -.28px; color: var(--color-sprout-color-text-default); }@media (min-width: 768px){:where(.uc-ucc) .ds-h2{ font-size: 36px; line-height: 38px; letter-spacing: -.36px; }}:where(.uc-ucc) .ds-t28{ font-weight: 500; font-size: 28px; line-height: 30px; letter-spacing: -.28px; color: var(--color-sprout-color-text-default); }:where(.uc-ucc) .ds-t24{ font-weight: 500; font-size: 30px; line-height: 34px; letter-spacing: -.3px; color: var(--color-sprout-color-text-default); }:where(.uc-ucc) .ds-t18{ font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -.18px; color: var(--color-sprout-color-text-default); }:where(.uc-ucc) .ds-lead{ font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -.18px; color: var(--color-sprout-color-text-weaker); }:where(.uc-ucc) .ds-body{ font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -.16px; color: var(--color-sprout-color-text-weaker); }:where(.uc-ucc) .ds-caption{ font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: -.16px; color: var(--color-sprout-color-text-weaker); }:where(.uc-ucc) .ds-caption-regular{ font-weight: 400; }:where(.uc-ucc) .ds-overline{ font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .2px; color: var(--color-sprout-color-text-weaker); }:where(.uc-ucc) .ds-fine{ font-weight: 400; font-size: 12px; line-height: 18px; color: var(--color-sprout-color-text-weakest); }@keyframes uc-text-shine{ 0% { background-position: 100% 0%; } 100% { background-position: -200% 0%; } }:where(.uc-ucc) .uc-note{ font-family: var(--font-nanum-pen), cursive; font-size: 18px; line-height: 1; background: linear-gradient(110deg, var(--color-sprout-color-text-weakest) 0%, var(--color-sprout-color-text-weakest) 42%, var(--color-sprout-color-text-default) 50%, var(--color-sprout-color-text-weakest) 58%, var(--color-sprout-color-text-weakest) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uc-text-shine 7s linear 5s infinite; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-note{ animation: none; }}@property --uc-angle{ syntax: ""; initial-value: 0deg; inherits: false; }@keyframes uc-eyebrow-rotate{ to { --uc-angle: 360deg; } }:where(.uc-ucc) .uc-eyebrow{ position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: var(--color-sprout-color-background-weaker); box-shadow: var(--shadow-sprout-xs); }:where(.uc-ucc) .uc-eyebrow::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--uc-angle), var(--color-sprout-color-border-weak) 0deg, var(--color-sprout-color-border-weak) 40deg, var(--color-sprout-color-primary) 95deg, var(--color-sprout-color-secondary) 150deg, var(--color-sprout-color-border-weak) 210deg, var(--color-sprout-color-border-weak) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: uc-eyebrow-rotate 4s linear infinite; pointer-events: none; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-eyebrow::before{ animation: none; }}:where(.uc-ucc) .uc-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 36px; padding-inline: 16px; border-radius: 10px; font-weight: 500; font-size: 14px; letter-spacing: -.07px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s, border-color .2s, transform .18s cubic-bezier(.2,.7,.2,1); }:where(.uc-ucc) .uc-btn-primary{ background: var(--color-sprout-color-primary); color: #fff; box-shadow: var(--shadow-sprout-xs); }:where(.uc-ucc) .uc-btn-primary:hover{ background: var(--color-sprout-color-primary-darker); transform: translateY(-1px); }:where(.uc-ucc) .uc-btn-secondary{ background: var(--color-sprout-color-secondary); color: #fff; box-shadow: var(--shadow-sprout-xs); }:where(.uc-ucc) .uc-btn-secondary:hover{ background: var(--color-sprout-color-secondary-darker); transform: translateY(-1px); }:where(.uc-ucc) .uc-btn-dark{ background: var(--color-sprout-color-text-default); color: #fff; box-shadow: var(--shadow-sprout-xs); }:where(.uc-ucc) .uc-btn-dark:hover{ background: #000; transform: translateY(-1px); }:where(.uc-ucc) .uc-btn-wire{ background: var(--color-sprout-color-background-weaker); border-color: var(--color-sprout-color-border-default); color: var(--color-sprout-color-text-default); box-shadow: var(--shadow-sprout-2xs); }:where(.uc-ucc) .uc-btn-wire:hover{ background: var(--color-sprout-color-background-stronger); transform: translateY(-1px); }:where(.uc-ucc) .uc-btn-soft{ background: var(--color-sprout-color-primary-lightest); color: var(--color-sprout-color-primary-darker); }:where(.uc-ucc) .uc-btn-soft:hover{ background: var(--color-sprout-color-primary-lighter); }:where(.uc-ucc) .uc-btn-lg{ height: 46px; padding-inline: 22px; font-size: 15px; border-radius: 12px; }:where(.uc-ucc) .uc-btn-wire-dark{ background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }:where(.uc-ucc) .uc-btn-wire-dark:hover{ border-color: #fff; transform: translateY(-1px); }:where(.uc-ucc) .uc-badge{ font-style: normal; font-size: 12px; line-height: 16px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; color: var(--color-sprout-color-primary-darker); background: var(--color-sprout-color-primary-lightest); }:where(.uc-ucc) .uc-badge-soon{ color: var(--color-sprout-color-background-blue); background: var(--color-sprout-color-secondary-lightest); }:where(.uc-ucc) .uc-badge-soon-dark{ color: #fff; background: rgba(255,255,255,.15); }:where(.uc-ucc) .uc-account{ border: 1.5px solid rgba(2,1,8,.2); }:where(.uc-ucc) .uc-account:hover{ border-color: var(--color-sprout-color-text-default); }:where(.uc-ucc) .uc-card-dark{ background: var(--color-uc-dark-card); border: 1px solid rgba(255,255,255,.1); transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s; }:where(.uc-ucc) .uc-card-dark:hover{ border-color: color-mix(in srgb, #fd6a35 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, var(--color-sprout-color-primary) 60%, transparent); } }:where(.uc-ucc) .uc-chip-primary{ color: var(--color-sprout-color-primary); background: color-mix(in srgb, #fd6a35 12%, #ffffff); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-primary) 12%, var(--color-sprout-color-background-weaker)); } }:where(.uc-ucc) .uc-chip-secondary{ color: var(--color-sprout-color-secondary); background: color-mix(in srgb, #5202fd 12%, #ffffff); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-secondary) 12%, var(--color-sprout-color-background-weaker)); } }:where(.uc-ucc) .uc-chip-blue{ color: var(--color-sprout-color-background-blue); background: color-mix(in srgb, #3600af 12%, #ffffff); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-background-blue) 12%, var(--color-sprout-color-background-weaker)); } }:where(.uc-ucc) .uc-chip-editor{ color: var(--color-sprout-color-primary-darker); background: color-mix(in srgb, #cc4b23 12%, #ffffff); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-primary-darker) 12%, var(--color-sprout-color-background-weaker)); } }:where(.uc-ucc) .uc-chip-d-primary{ color: var(--color-sprout-color-primary-lighter); background: color-mix(in srgb, #fd6a35 22%, transparent); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-primary) 22%, transparent); } }:where(.uc-ucc) .uc-chip-d-secondary{ color: var(--color-sprout-color-secondary-lighter); background: color-mix(in srgb, #5202fd 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-secondary) 30%, transparent); } }:where(.uc-ucc) .uc-chip-d-blue{ color: var(--color-sprout-color-secondary-lighter); background: color-mix(in srgb, #3600af 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-background-blue) 40%, transparent); } }:where(.uc-ucc) .uc-chip-d-editor{ color: var(--color-sprout-color-primary-lighter); background: color-mix(in srgb, #cc4b23 26%, transparent); @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, var(--color-sprout-color-primary-darker) 26%, transparent); } }:where(.uc-ucc) .uc-dot-primary{ background: var(--color-sprout-color-primary); }:where(.uc-ucc) .uc-dot-secondary{ background: var(--color-sprout-color-secondary); }:where(.uc-ucc) .uc-dot-blue{ background: var(--color-sprout-color-background-blue); }:where(.uc-ucc) .uc-dot-editor{ background: var(--color-sprout-color-primary-darker); }:where(.uc-ucc) .uc-orb-primary{ background: radial-gradient(circle at 32% 28%, var(--color-sprout-color-primary-lighter), var(--color-sprout-color-primary) 54%, var(--color-sprout-color-primary-darker) 92%); }:where(.uc-ucc) .uc-orb-secondary{ background: radial-gradient(circle at 32% 28%, var(--color-sprout-color-secondary-lighter), var(--color-sprout-color-secondary) 56%, #4a25b0 92%); }:where(.uc-ucc) .uc-orb-blue{ background: radial-gradient(circle at 32% 28%, #8f7ce6, var(--color-sprout-color-background-blue) 56%, #170748 95%); }:where(.uc-ucc) .uc-orb-mix{ background: radial-gradient(circle at 30% 30%, var(--color-sprout-color-primary-lighter) 6%, var(--color-sprout-color-primary) 40%, var(--color-sprout-color-secondary) 96%); }:where(.uc-ucc) .uc-orb-slate{ background: radial-gradient(circle at 32% 28%, var(--color-sprout-color-background-weaker), var(--color-sprout-color-background-strongest) 60%, #a3a3a3 95%); }:where(.uc-ucc) .uc-orb-noise::after{ content: ""; position: absolute; inset: 0; border-radius: 9999px; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }:where(.uc-ucc) .uc-glow-creator{ background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, #fd6a35 20%, transparent), transparent 72%); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, var(--color-sprout-color-primary) 20%, transparent), transparent 72%); } }:where(.uc-ucc) .uc-glow-figma{ background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, #5202fd 16%, transparent), transparent 72%); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, var(--color-sprout-color-secondary) 16%, transparent), transparent 72%); } }:where(.uc-ucc) .uc-glow-agent{ background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, #3600af 16%, transparent), transparent 72%); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, var(--color-sprout-color-background-blue) 16%, transparent), transparent 72%); } }:where(.uc-ucc) .uc-glow-editor{ background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, #cc4b23 18%, transparent), transparent 72%); @supports (color: color-mix(in lab, red, red)) { background: radial-gradient(50% 60% at 50% 42%, color-mix(in srgb, var(--color-sprout-color-primary-darker) 18%, transparent), transparent 72%); } }@keyframes uc-flow{ to { stroke-dashoffset: -120; } }:where(.uc-ucc) .uc-flow-line{ stroke-dasharray: 20 100; stroke-dashoffset: 0; animation: uc-flow 3s linear infinite; }:where(.uc-ucc) .uc-flow-line.d1{ animation-delay: 0s; }:where(.uc-ucc) .uc-flow-line.d2{ animation-delay: -1s; }:where(.uc-ucc) .uc-flow-line.d3{ animation-delay: -2s; }@keyframes uc-cpu-pulse{ 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }:where(.uc-ucc) .uc-cpu-glow{ animation: uc-cpu-pulse 4.5s ease-in-out infinite; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-flow-line{ animation: none; stroke-dasharray: none; }:where(.uc-ucc) .uc-cpu-glow{ animation: none; }}@keyframes uc-marquee{ to { transform: translateX(-50%); } }:where(.uc-ucc) .uc-marquee{ width: max-content; animation: uc-marquee 40s linear infinite; }:where(.uc-ucc) .uc-marquee-wrap:hover .uc-marquee{ animation-play-state: paused; }:where(.uc-ucc) .uc-hero-chip{ display: inline-flex; align-items: center; gap: 9px; padding: 9px var(--spacing-sprout-16); border-radius: var(--radius-sprout-infinite); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--color-sprout-color-text-default); background: var(--color-sprout-color-background-weaker); border: 1px solid var(--color-sprout-color-border-weak); box-shadow: 0 2px 6px -3px rgba(16, 24, 40, .16); transition: border-color .24s cubic-bezier(.2,.7,.2,1), transform .24s cubic-bezier(.2,.7,.2,1); }:where(.uc-ucc) .uc-hero-chip:hover{ border-color: var(--color-sprout-color-border-default); transform: translateY(-2px); }:where(.uc-ucc) .uc-hero-chip svg{ width: 18px; height: 18px; flex: 0 0 auto; }:where(.uc-ucc).uc-night .uc-hero-chip{ box-shadow: none; }:where(.uc-ucc) .uc-reveal{ opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }:where(.uc-ucc) .uc-reveal.ucx-in{ opacity: 1; transform: none; }:where(.uc-ucc) .cm-bcard{ animation: cm-bcard-in .45s cubic-bezier(.2,.7,.2,1) both; }@keyframes cm-bcard-in{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-reveal{ opacity: 1 !important; transform: none !important; }:where(.uc-ucc) .uc-marquee{ animation: none !important; }:where(.uc-ucc) .cm-bcard{ animation: none !important; }}@keyframes uc-tab-in{ 0% { opacity: 0; transform: translateY(26px); filter: blur(9px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }:where(.uc-ucc) .uc-tab-in{ animation: uc-tab-in 1.2s cubic-bezier(.16, 1, .3, 1) both; will-change: transform, opacity, filter; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-tab-in{ animation: none; }}:where(.uc-ucc) .uc-tabprog{ position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; overflow: hidden; pointer-events: none; background: var(--uc-border-subtle); }:where(.uc-ucc) .uc-tabprog-fill{ display: block; height: 100%; border-radius: 999px; background: var(--uc-brand); transition: width .12s linear; }.uc-ucc{ --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; }:where(.uc-ucc).uc-night{ --color-sprout-color-background-weaker: #171717; --color-sprout-color-background-default: #1f1f1f; --color-sprout-color-background-stronger: #262626; --color-sprout-color-background-strongest: #2b2b2b; --color-sprout-color-text-default: #f5f5f5; --color-sprout-color-text-stronger: #ffffff; --color-sprout-color-text-weaker: #a1a1a1; --color-sprout-color-text-weakest: #7d7d7d; --color-sprout-color-text-disabled: #6b6b6b; --color-sprout-color-border-weak: rgba(255, 255, 255, 0.10); --color-sprout-color-border-default: rgba(255, 255, 255, 0.16); --color-uc-navpill: #262626; }:where(.uc-ucc).uc-night .uc-force-light{ --color-sprout-color-background-weaker: #ffffff; --color-sprout-color-background-default: #f4f4f4; --color-sprout-color-background-stronger: #ebebeb; --color-sprout-color-background-strongest: #e3e3ed; --color-sprout-color-text-default: #0a0a0a; --color-sprout-color-text-stronger: #171717; --color-sprout-color-text-weaker: #737373; --color-sprout-color-text-weakest: #a3a3a3; --color-sprout-color-text-disabled: #737373; --color-sprout-color-border-weak: #e5e5e5; --color-sprout-color-border-default: #d4d4d4; --color-uc-navpill: #ebebeb; }:where(.uc-ucc) #top{ transition: background-color .55s cubic-bezier(.4, 0, .2, 1); }:where(.uc-ucc) #top section, :where(.uc-ucc) #top .ds-display, :where(.uc-ucc) #top .ds-h2, :where(.uc-ucc) #top .ds-t28, :where(.uc-ucc) #top .ds-t24, :where(.uc-ucc) #top .ds-lead, :where(.uc-ucc) #top .ds-body, :where(.uc-ucc) #top .ds-caption, :where(.uc-ucc) #top .ds-overline, :where(.uc-ucc) #top .ds-fine, :where(.uc-ucc) #top h1, :where(.uc-ucc) #top h2, :where(.uc-ucc) #top h3, :where(.uc-ucc) #top p, :where(.uc-ucc) #top li{ transition: background-color .55s cubic-bezier(.4, 0, .2, 1), color .55s cubic-bezier(.4, 0, .2, 1), border-color .55s cubic-bezier(.4, 0, .2, 1); }:where(.uc-ucc) .uc-step-visual > div > img:first-child, :where(.uc-ucc) .uc-step-visual > div > .lg\:hidden:first-child + img{ display: none; }@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: "*"; initial-value: ""; inherits: false; }@keyframes spin{ to { transform: rotate(360deg); } }@keyframes pulse{ 50% { opacity: 0.5; } }@keyframes enter{ from { 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{ to { 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 accordion-down{ from { height: 0; } to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } }@keyframes accordion-up{ from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); } to { height: 0; } }@keyframes caret-blink{ 0%,70%,100% { opacity: 1; } 20%,50% { opacity: 0; } }@keyframes accordion-down{ from { height: 0; } to { height: var( --radix-accordion-content-height, var(--accordion-panel-height, auto) ); } }@keyframes accordion-up{ from { height: var( --radix-accordion-content-height, var(--accordion-panel-height, auto) ); } to { height: 0; } }@keyframes marquee{ from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }@keyframes marquee-vertical{ from { transform: translateY(0); } to { transform: translateY(calc(-100% - var(--gap))); } }@keyframes gradient{ to { background-position: var(--bg-size, 300%) 0; } }@keyframes shimmer-slide{ to { transform: translate(calc(100cqw - 100%), 0); } }@keyframes spin-around{ 0% { transform: translateZ(0) rotate(0); } 15%, 35% { transform: translateZ(0) rotate(90deg); } 65%, 85% { transform: translateZ(0) rotate(270deg); } 100% { transform: translateZ(0) rotate(360deg); } }@keyframes orbit{ 0% { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); } 100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); } }@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){:where(.uc-ucc) *, :where(.uc-ucc) ::before, :where(.uc-ucc) ::after, :where(.uc-ucc) ::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; }}}@font-face{ font-family:"Zalando Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Regular.ttf") format("truetype"); }@font-face{ font-family:"Zalando Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Medium.ttf") format("truetype"); }@font-face{ font-family:"Zalando Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-SemiBold.ttf") format("truetype"); }@font-face{ font-family:"Zalando Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Bold.ttf") format("truetype"); }:where(.uc-ucc) .uc-pop-dark{ --uc-surface-sunken: #141414; --uc-surface-base: #1A1A1A; --uc-surface-raised: #242424; --uc-surface-overlay: #1C1C1C; --uc-surface-control: rgba(255, 255, 255, 0.08); --uc-text-strong: #FFFFFF; --uc-text: #E5E5E5; --uc-text-muted: #A3A3A3; --uc-text-subtle: #737373; --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #2E2E2E; --uc-border: #3D3D3D; --uc-border-strong: #525252; --uc-ring: rgba(253, 106, 53, 0.60); --uc-brand-fg: #FFB89A; --uc-brand-soft: rgba(253, 106, 53, 0.18); --uc-success-fg: #A7EAAA; --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-fg: #FDC9C6; --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-fg: #FFC680; --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-fg: #B8A9FF; --uc-accent-soft: rgba(82, 2, 253, 0.28); color: var(--uc-text); }:where(.uc-ucc) .uc-scope, :where(.uc-ucc) .uc-content, :where(.uc-ucc) .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; }:where(.uc-ucc) .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; }:where(.uc-ucc) .uc-scope *, :where(.uc-ucc) .uc-scope *::before, :where(.uc-ucc) .uc-scope *::after, :where(.uc-ucc) .uc-content *, :where(.uc-ucc) .uc-content *::before, :where(.uc-ucc) .uc-content *::after, :where(.uc-ucc) .uc-chrome *, :where(.uc-ucc) .uc-chrome *::before, :where(.uc-ucc) .uc-chrome *::after, :where(.uc-ucc) .uc-portal *, :where(.uc-ucc) .uc-portal *::before, :where(.uc-ucc) .uc-portal *::after{ box-sizing: border-box; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-scope *, :where(.uc-ucc) .uc-content *, :where(.uc-ucc) .uc-chrome *, :where(.uc-ucc) .uc-portal *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }} .uc-ucc{ --ink: #111111; --canvas: #FFFFFF; --surface: #FAF8F6; --red: #FF4D4D; --red-deep: #D93636; --red-aa: #C42B2B; --mint: #BDEFE7; --lilac: #E7DDF9; --blue: #D8E8FF; --lime: #EAF3A8; --peach: #FBE0D0; --coral: #FCDBD5; --mint-deep: #0E7C6B; --lilac-deep: #5C3DBE; --blue-deep: #2C63D6; --lime-deep: #5E6B0F; --peach-deep: #B4603A; --coral-deep: #C4302B; --card-ink: #16181F; --card-ink-soft: #4A4C56; --ink-90: #24242A; --muted: #6C6C70; --faint: #9A9A9E; --line: #E6E4DF; --card-line: #ECEAE4; --placeholder: #E4E2DD; --ink-panel: #0C0D12; --ink-panel-line: rgba(255,255,255,.06); --on-panel: #F3F1EC; --on-panel-soft: rgba(243,241,236,.74); --on-panel-faint: rgba(243,241,236,.5); --bg: var(--canvas); --fg: var(--ink); --accent: var(--red); --status-live: var(--mint); --status-review: var(--lilac); --status-progress: var(--blue); --status-complete: var(--lime); --status-signal: var(--red); --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-serif: var(--font-sans); --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, monospace; --fs-display-xl: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem); --fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem); --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.85rem); --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem); --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.72rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.6; --tracking-tight: -0.03em; --tracking-h: -0.02em; --tracking-label: 0.02em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(4rem, 3rem + 5vw, 8rem); --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --r-btn: 10px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-red: 0 8px 24px rgba(253,106,53,.28); --container: 1440px; --container-narrow: 820px; --container-wide: 1600px; --gutter: clamp(1.25rem, 7vw, 6.25rem); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 640ms; --dur-xslow: 1000ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --z-base: 1; --z-orb: 2; --z-content: 3; --z-header: 100; --z-overlay: 200; --z-modal: 300; }@media (min-width: 1024px){.uc-ucc{ --gutter: 6.25rem; }}@media (prefers-color-scheme: dark){.uc-ucc{ --ink: #F3F1EC; --canvas: #0F0F11; --surface: #1A1A1D; --red: #FF5A5A; --red-deep: #FF7373; --red-aa: #FF7A7A; --ink-90: #E4E2DD; --muted: #A2A2A8; --faint: #6E6E74; --line: #2A2A2E; --card-line: #2C2C31; --placeholder: #26262B; --ink-panel: #1B1D27; --ink-panel-line: rgba(255,255,255,.09); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; }}.uc-ucc[data-theme="light"]{ --ink: #111111; --canvas: #FFFFFF; --surface: #FAF8F6; --red: #FF4D4D; --red-deep: #D93636; --red-aa: #C42B2B; --ink-90: #24242A; --muted: #6C6C70; --faint: #9A9A9E; --line: #E6E4DF; --card-line: #ECEAE4; --placeholder: #E4E2DD; --ink-panel: #0C0D12; --ink-panel-line: rgba(255,255,255,.06); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; }.uc-ucc[data-theme="dark"]{ --ink: #F3F1EC; --canvas: #0F0F11; --surface: #1A1A1D; --red: #FF5A5A; --red-deep: #FF7373; --red-aa: #FF7A7A; --ink-90: #E4E2DD; --muted: #A2A2A8; --faint: #6E6E74; --line: #2A2A2E; --card-line: #2C2C31; --placeholder: #26262B; --ink-panel: #1B1D27; --ink-panel-line: rgba(255,255,255,.09); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; }.uc-ucc, .uc-ucc *, .uc-ucc *::before, .uc-ucc *::after{ box-sizing: border-box; }.uc-ucc, .uc-ucc *{ margin: 0; }.uc-ucc{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }@media (prefers-reduced-motion: reduce){.uc-ucc{ scroll-behavior: auto; }}.uc-ucc{ background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }.uc-ucc img, .uc-ucc picture, .uc-ucc svg, .uc-ucc video, .uc-ucc canvas{ display: block; max-width: 100%; }.uc-ucc img, .uc-ucc video{ height: auto; }.uc-ucc input, .uc-ucc button, .uc-ucc textarea, .uc-ucc select{ font: inherit; color: inherit; }.uc-ucc button{ cursor: pointer; background: none; border: none; }.uc-ucc a{ color: inherit; text-decoration: none; }.uc-ucc ul[role="list"], .uc-ucc ol[role="list"]{ list-style: none; padding: 0; }.uc-ucc code, .uc-ucc pre, .uc-ucc kbd{ font-family: var(--font-mono); }.uc-ucc .display-xl{ font-family: var(--font-serif); font-size: var(--fs-display-xl); font-weight: var(--fw-regular); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }.uc-ucc .display{ font-family: var(--font-serif); font-size: var(--fs-display); font-weight: var(--fw-regular); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; }.uc-ucc .h1{ font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: var(--fw-regular); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }.uc-ucc .h2{ font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }.uc-ucc .h3{ font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; letter-spacing: -0.01em; }.uc-ucc .ucx-lead{ font-size: var(--fs-lead); font-weight: var(--fw-regular); color: var(--muted); line-height: 1.6; }.uc-ucc .body{ font-size: var(--fs-body); }.uc-ucc .small{ font-size: var(--fs-small); }.uc-ucc .muted{ color: var(--muted); }.uc-ucc .faint{ color: var(--faint); }.uc-ucc .dot-red{ color: var(--red); }.uc-ucc .ucx-eyebrow{ font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); color: var(--red); display: inline-flex; align-items: center; gap: 0.6em; }.uc-ucc .ucx-eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }.uc-ucc .tnum{ font-variant-numeric: tabular-nums; }.uc-ucc .container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }.uc-ucc .container-narrow{ max-width: var(--container-narrow); }.uc-ucc .container-wide{ max-width: var(--container-wide); }.uc-ucc .section{ padding-block: var(--section-y); position: relative; }.uc-ucc .stack > * + *{ margin-top: var(--space-4); }.uc-ucc .stack-lg > * + *{ margin-top: var(--space-6); }.uc-ucc .grid{ display: grid; gap: var(--space-5); }.uc-ucc .cluster{ display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }.uc-ucc .ucx-sec-head{ display: flex; align-items: baseline; gap: var(--space-4); }.uc-ucc .sec-num{ font-family: var(--font-mono); font-size: var(--fs-small); color: var(--red); font-weight: var(--fw-semibold); }.uc-ucc .ph{ background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(17,17,17,.02) 14px 15px), var(--placeholder); border-radius: var(--r-md); display: grid; place-items: center; color: var(--faint); font-size: var(--fs-small); font-family: var(--font-mono); min-height: 120px; position: relative; }.uc-ucc .ph::after{ content: attr(data-label); opacity: .7; }.uc-ucc .ph[data-ratio="16/9"]{ aspect-ratio: 16/9; }.uc-ucc .ph[data-ratio="4/3"]{ aspect-ratio: 4/3; }.uc-ucc .ph[data-ratio="1/1"]{ aspect-ratio: 1/1; }.uc-ucc .ph[data-ratio="3/2"]{ aspect-ratio: 3/2; }.uc-ucc ::selection{ background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--fg); }.uc-ucc .hl{ background: var(--coral); color: var(--card-ink); border-radius: 0.14em; padding: 0 0.14em; margin: 0 -0.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }.uc-ucc :focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }.uc-ucc .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.uc-ucc .skip-link{ position: absolute; left: -999px; top: 0; z-index: var(--z-modal); background: var(--ink); color: var(--canvas); padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) 0; }.uc-ucc .skip-link:focus{ left: 0; }@media (prefers-reduced-motion: reduce){.uc-ucc, .uc-ucc *, .uc-ucc *::before, .uc-ucc *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }}.uc-ucc [data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; }.uc-ucc [data-reveal="fade"]{ transform: none; }.uc-ucc [data-reveal="left"]{ transform: translateX(-28px); }.uc-ucc [data-reveal="right"]{ transform: translateX(28px); }.uc-ucc [data-reveal="scale"]{ transform: scale(0.94); }.uc-ucc [data-reveal].is-in{ opacity: 1; transform: none; }.uc-ucc [data-stagger] > *{ opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }.uc-ucc [data-stagger].is-in > *{ opacity: 1; transform: none; }@keyframes float-y{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }@keyframes float-y-slow{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }@keyframes spin-slow{ to { transform: rotate(360deg); } }@keyframes pulse-dot{ 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }@keyframes sheen{ to { background-position: 200% center; } }@keyframes marquee{ to { transform: translateX(-50%); } }.uc-ucc .anim-float{ animation: float-y 6s var(--ease-in-out) infinite; }.uc-ucc .anim-float-slow{ animation: float-y-slow 9s var(--ease-in-out) infinite; }.uc-ucc .anim-pulse{ animation: pulse-dot 2.4s var(--ease-in-out) infinite; }.uc-ucc .proton-pulse{ position: relative; }.uc-ucc .proton-pulse::after{ content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); right: -2px; top: 4px; animation: pulse-dot 2.4s var(--ease-in-out) infinite; }.uc-ucc .sheen{ background: linear-gradient(100deg, var(--fg) 40%, var(--red) 50%, var(--fg) 60%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; }.uc-ucc .marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }.uc-ucc .marquee-track{ display: flex; gap: var(--space-6); width: max-content; animation: marquee 28s linear infinite; }.uc-ucc .marquee:hover .marquee-track{ animation-play-state: paused; }@media (prefers-reduced-motion: reduce){.uc-ucc [data-reveal], .uc-ucc [data-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; }.uc-ucc .anim-float, .uc-ucc .anim-float-slow, .uc-ucc .anim-pulse, .uc-ucc .proton-pulse::after, .uc-ucc .sheen, .uc-ucc .marquee-track{ animation: none !important; }}.uc-ucc .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1; padding: 0.78em 1.35em; border-radius: var(--r-btn); border: 1px solid transparent; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }.uc-ucc .btn:hover{ transform: translateY(-2px); }.uc-ucc .btn:active{ transform: translateY(0); }.uc-ucc .btn .arw{ transition: transform var(--dur) var(--ease-out); font-weight: var(--fw-bold); }.uc-ucc .btn:hover .arw{ transform: translateX(3px); }.uc-ucc .btn-primary{ background: var(--ink); color: var(--canvas); }.uc-ucc .btn-primary:hover{ box-shadow: var(--shadow-md); }.uc-ucc .btn-accent{ background: var(--ink); color: var(--canvas); }.uc-ucc .btn-accent:hover{ background: color-mix(in srgb, var(--ink) 86%, var(--fg)); box-shadow: var(--shadow-md); }.uc-ucc .btn-secondary{ background: var(--surface); color: var(--fg); border-color: var(--line); }.uc-ucc .btn-secondary:hover{ border-color: var(--fg); }.uc-ucc .btn-ghost{ background: transparent; color: var(--fg); }.uc-ucc .btn-ghost:hover{ background: color-mix(in srgb, var(--fg) 6%, transparent); }.uc-ucc .btn-lg{ padding: 0.85em 1.5em; font-size: var(--fs-body); }.uc-ucc .btn-sm{ padding: 0.6em 1em; font-size: var(--fs-small); }.uc-ucc .shimmer-cta{ padding: 0.85em 1.5em !important; font-size: var(--fs-body) !important; line-height: 1 !important; }.uc-ucc .pill{ display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-small); font-weight: var(--fw-semibold); padding: 0.5em 0.9em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--line); color: var(--muted); }.uc-ucc .pill .i{ width: 16px; height: 16px; flex: none; color: var(--muted); }.uc-ucc .status{ display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-small); font-weight: var(--fw-semibold); padding: 0.45em 0.9em; border-radius: var(--r-pill); color: var(--ink); }.uc-ucc .status .ucx-d{ width: 8px; height: 8px; border-radius: 50%; flex: none; }.uc-ucc .status--live{ background: color-mix(in srgb, var(--mint) 55%, var(--surface)); color: var(--mint-deep); }.uc-ucc .status--live .ucx-d{ background: var(--mint-deep); }.uc-ucc .status--review{ background: color-mix(in srgb, var(--lilac) 55%, var(--surface)); color: var(--lilac-deep); }.uc-ucc .status--review .ucx-d{ background: var(--lilac-deep); }.uc-ucc .status--progress{ background: color-mix(in srgb, var(--blue) 55%, var(--surface)); color: var(--blue-deep); }.uc-ucc .status--progress .ucx-d{ background: var(--blue-deep); }.uc-ucc .status--complete{ background: color-mix(in srgb, var(--lime) 55%, var(--surface)); color: var(--lime-deep); }.uc-ucc .status--complete .ucx-d{ background: var(--lime-deep); }.uc-ucc .status--signal{ background: color-mix(in srgb, var(--red) 18%, var(--surface)); color: var(--red-aa); }.uc-ucc .status--signal .ucx-d{ background: var(--red); }.uc-ucc .card{ background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }.uc-ucc .card--hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }.uc-ucc .card--pad-lg{ padding: var(--space-6); }.uc-ucc .card--tint{ background: color-mix(in srgb, var(--tint, var(--mint)) 45%, var(--surface)); border-color: transparent; }.uc-ucc .card--tint.card--strong{ background: color-mix(in srgb, var(--tint, var(--mint)) 70%, var(--surface)); }.uc-ucc .card .card-num{ font-family: var(--font-mono); font-size: var(--fs-small); color: var(--red); font-weight: var(--fw-bold); }.uc-ucc .card .card-title{ font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin-top: var(--space-1); }.uc-ucc .card .card-desc{ color: var(--muted); font-size: var(--fs-small); margin-top: var(--space-2); }.uc-ucc .stat{ padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--card-line); }.uc-ucc .stat .stat-label{ font-size: var(--fs-small); color: var(--muted); font-weight: var(--fw-semibold); }.uc-ucc .stat .stat-value{ font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); font-weight: var(--fw-black); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }.uc-ucc .stat .stat-delta{ font-size: var(--fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }.uc-ucc .stat .stat-delta.up{ color: var(--mint-deep); }.uc-ucc .stat .stat-delta.down{ color: var(--red-aa); }.uc-ucc .code{ background: #111111; color: #e8e8ea; border-radius: var(--r-md); padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.7; overflow-x: auto; }.uc-ucc .code .k{ color: #FF7A7A; }.uc-ucc .code .s{ color: #BDEFE7; }.uc-ucc .code .ucx-p{ color: #E7DDF9; }.uc-ucc .code .ucx-n{ color: #EAF3A8; }.uc-ucc .code .ucx-c{ color: #6E6E74; }.uc-ucc{ --nav-max: 1440px; --nav-h: 66px; }.uc-ucc .nav{ position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--nav-h); padding-inline: max(var(--gutter), calc((100% - var(--nav-max)) / 2)); padding-block: var(--space-3); transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); border-bottom: 1px solid transparent; }.uc-ucc .nav.is-hidden{ transform: translateY(-100%); }@media (prefers-reduced-motion: reduce){.uc-ucc .nav.is-hidden{ transform: none; }}.uc-ucc .nav::before{ content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--canvas) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: opacity var(--dur) var(--ease-out); }.uc-ucc .nav.is-scrolled::before{ opacity: 1; }.uc-ucc .nav.is-scrolled{ border-bottom-color: var(--line); }.uc-ucc .nav > *{ position: relative; z-index: 1; }.uc-ucc .nav-brand{ display: inline-flex; align-items: center; gap: 0.55em; font-weight: var(--fw-black); font-size: 1.28rem; letter-spacing: 0.01em; flex: none; }.uc-ucc .wordmark{ height: 0.82em; width: auto; display: block; }.uc-ucc .nav-links{ display: flex; align-items: center; gap: 0.35rem; }.uc-ucc .nav-link{ display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.82rem; font-weight: var(--fw-medium); color: var(--muted); padding: 0.45em 0.65em; border-radius: var(--r-sm); background: none; transition: color var(--dur-fast); }.uc-ucc .nav-link:hover, .uc-ucc .nav-item:hover .nav-trigger, .uc-ucc .nav-item.ucx-is-open .nav-trigger{ color: var(--fg); }.uc-ucc .nav-trigger{ cursor: pointer; }.uc-ucc .nav-trigger .chev{ transition: transform var(--dur) var(--ease-out); display: inline-flex; }.uc-ucc .nav-item:hover .nav-trigger .chev, .uc-ucc .nav-item.ucx-is-open .nav-trigger .chev{ transform: rotate(180deg); }.uc-ucc .nav-item{ position: static; }.uc-ucc .mega{ position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%) translateY(10px); width: min(1040px, 95vw); background: color-mix(in srgb, var(--surface) 68%, transparent); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--card-line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(20,20,35,.04), 0 10px 30px -18px rgba(20,20,45,.20), 0 34px 70px -34px rgba(20,20,45,.32), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur); z-index: var(--z-header); }.uc-ucc .nav-item.ucx-is-open .mega{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }.uc-ucc .mega-cols{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }.uc-ucc .mega-cols--3{ grid-template-columns: repeat(3, 1fr); }.uc-ucc .mega-title{ font-size: 0.82rem; letter-spacing: var(--tracking-label); color: var(--faint); font-weight: var(--fw-regular); margin-bottom: var(--space-2); }.uc-ucc .mega-link{ display: block; padding: 0.4rem 0.55rem; margin-inline: -0.55rem; border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }.uc-ucc .mega-link:hover{ background: color-mix(in srgb, var(--fg) 5%, transparent); }.uc-ucc .mega-link:not(.has-ico) span{ display: flex; align-items: center; gap: 0.4em; font-family: var(--font-serif); font-size: 0.9rem; font-weight: var(--fw-regular); letter-spacing: -0.01em; line-height: 1.25; color: var(--fg); }.uc-ucc .mega-link:not(.has-ico) small{ display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.uc-ucc .mega-link.compact{ padding-block: 0.45rem; }.uc-ucc .mega-link.compact span, .uc-ucc .mega-link.compact{ font-family: var(--font-serif); font-size: 0.9rem; font-weight: var(--fw-regular); letter-spacing: -0.01em; color: var(--ink-90); }.uc-ucc .mega-link.compact:hover{ color: var(--fg); }.uc-ucc .mega-link.has-ico{ display: flex; align-items: center; gap: 0.7rem; }.uc-ucc .mega-ico{ flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--card-line); }.uc-ucc .mega-ico img{ width: 20px; height: 20px; object-fit: contain; display: block; }.uc-ucc .mega-ico--glyph{ color: var(--card-ink-soft); }.uc-ucc .mega-link-text{ display: flex; flex-direction: column; min-width: 0; }.uc-ucc .mega-link-text > span{ display: flex; align-items: center; gap: 0.4em; font-family: var(--font-serif); font-size: 0.9rem; font-weight: var(--fw-regular); letter-spacing: -0.01em; line-height: 1.25; color: var(--fg); }.uc-ucc .mega-link-text small{ display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.uc-ucc .mega-soon{ display: inline-flex; align-items: center; flex: none; margin-left: 0.4em; border-radius: var(--r-pill); background: transparent; padding: 0; transition: background var(--dur) var(--ease-out), padding var(--dur) var(--ease-out); }.uc-ucc .mega-soon-dot{ width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--faint); transition: background var(--dur-fast) var(--ease-out); }.uc-ucc .mega-soon-label{ max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; margin-left: 0; font-family: var(--font-sans); font-size: 0.55rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); transition: max-width var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out), margin var(--dur) var(--ease-out); }.uc-ucc .mega-link.is-soon:hover .mega-soon{ background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 2px 7px; }.uc-ucc .mega-link.is-soon:hover .mega-soon-dot{ background: var(--muted); }.uc-ucc .mega-link.is-soon:hover .mega-soon-label{ max-width: 90px; opacity: 1; margin-left: 5px; }@media (prefers-reduced-motion: reduce){.uc-ucc .mega-soon, .uc-ucc .mega-soon-label{ transition: opacity var(--dur-fast) linear; }}.uc-ucc .badge{ font-size: 0.6rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; padding: 2px 6px; border-radius: var(--r-pill); line-height: 1; }.uc-ucc .badge-new{ background: var(--red); color: #fff; }.uc-ucc .badge-upd{ background: color-mix(in srgb, var(--blue) 60%, var(--surface)); color: var(--blue-deep); }.uc-ucc .badge-hot{ background: color-mix(in srgb, var(--red) 16%, var(--surface)); color: var(--red-aa); }.uc-ucc .mega-feature{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); position: relative; overflow: hidden; background-color: var(--mint); border: 1px solid color-mix(in srgb, var(--mint-deep) 14%, transparent); }.uc-ucc .mega-feature::before{ content: ""; position: absolute; inset: -40% -18%; z-index: 0; pointer-events: none; background-image: radial-gradient(60% 120% at 10% 30%, var(--lime) 0%, transparent 55%), radial-gradient(55% 120% at 42% 80%, var(--blue) 0%, transparent 55%), radial-gradient(55% 120% at 72% 20%, var(--lilac) 0%, transparent 58%), radial-gradient(55% 130% at 96% 70%, var(--peach) 0%, transparent 58%); }.uc-ucc .mega-feature::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.45; mix-blend-mode: soft-light; }.uc-ucc .mega-feature > *{ position: relative; z-index: 1; }.uc-ucc .mega-feature-ico{ flex: none; width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--mint-deep); background: color-mix(in srgb, #fff 58%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint-deep) 12%, transparent); }.uc-ucc .mega-feature-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }.uc-ucc .mega-feature-title{ font-family: var(--font-serif); font-size: 1.16rem; font-weight: var(--fw-medium); letter-spacing: -0.01em; line-height: 1.2; color: var(--card-ink); }.uc-ucc .mega-feature-note{ font-size: 0.85rem; color: var(--card-ink-soft); line-height: 1.4; }.uc-ucc .mega-feature-cta{ margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-small); font-weight: var(--fw-bold); color: color-mix(in srgb, var(--red) 55%, var(--card-ink)); }.uc-ucc .mega-feature-cta svg{ transition: transform var(--dur-fast) var(--ease-out); }.uc-ucc .mega-feature:hover .mega-feature-cta svg{ transform: translateX(3px); }@media (prefers-reduced-motion: no-preference){.uc-ucc .mega-feature::before{ animation: mpf-aurora 16s var(--ease-in-out) infinite alternate; }}@keyframes mpf-aurora{ from { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } to { transform: translate3d(2%, -1.5%, 0) scale(1.1); } }@media (min-width: 961px){.uc-ucc .mega{ position: fixed; left: 0; right: 0; width: auto; top: var(--nav-h); margin: 0; padding: 0; transform: translateY(8px); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; z-index: var(--z-header); }.uc-ucc .nav-item.ucx-is-open .mega{ transform: translateY(0); }.uc-ucc .mega-inner{ display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6); padding-inline: max(var(--gutter), calc((100% - var(--nav-max)) / 2)); }.uc-ucc .mega-surface{ position: fixed; left: 0; right: 0; width: auto; top: var(--nav-h); transform: translateY(8px); border-radius: 0; background: var(--canvas); border: 0; border-bottom: 1px solid var(--card-line); box-shadow: 0 18px 30px -18px rgba(20,20,45,.18), 0 6px 12px -8px rgba(20,20,45,.10); opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: height .42s var(--ease-out), opacity .26s var(--ease-out), transform .3s var(--ease-out), visibility .42s; }.uc-ucc .mega-surface.ucx-is-open{ opacity: 1; visibility: visible; transform: translateY(0); }.uc-ucc .mega-surface.is-instant{ transition: opacity .26s var(--ease-out), transform .3s var(--ease-out), visibility .26s; }}@media (max-width: 960px){.uc-ucc .mega-surface{ display: none; }}@media (prefers-reduced-motion: reduce){.uc-ucc .mega-surface{ transition: opacity .18s linear, visibility .18s; }}.uc-ucc .nav-actions{ display: flex; align-items: center; gap: 0.4rem; flex: none; }.uc-ucc .nav-icon-btn{ width: 40px; height: 40px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-90); position: relative; transition: background var(--dur-fast), color var(--dur-fast); }.uc-ucc .nav-icon-btn:hover{ background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }.uc-ucc .nav-icon-btn.has-dot::after{ content: ""; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--canvas); }.uc-ucc .nav-login{ font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink-90); padding: 0.5em 0.7em; transition: color var(--dur-fast); }.uc-ucc .nav-login:hover{ color: var(--fg); }.uc-ucc .nav-toggle{ display: none; width: 42px; height: 42px; border-radius: var(--r-sm); align-items: center; justify-content: center; color: var(--fg); }.uc-ucc .nav-mobextra{ display: none; }.uc-ucc .nav-scrim{ position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgba(12,16,36,.4); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); }@media (max-width: 960px){.uc-ucc .nav-links{ position: fixed; inset: var(--nav-h) 0 0 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--canvas); padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur) var(--ease-out); }.uc-ucc.nav-open .nav-links{ transform: translateX(0); }.uc-ucc.nav-open .nav-scrim{ opacity: 0; visibility: hidden; }.uc-ucc.nav-open{ overflow: hidden; }.uc-ucc .nav-item{ border-bottom: 0; }.uc-ucc .nav-link, .uc-ucc .nav-item .nav-trigger{ width: 100%; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 0.42em 0; border-radius: 0; font-family: var(--font-serif); font-size: clamp(1.7rem, 1.35rem + 2vw, 2.1rem); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--fg); }.uc-ucc .mega-link{ margin-inline: 0; }.uc-ucc .nav-item .nav-trigger .chev{ color: var(--faint); transform: rotate(-90deg); transition: transform var(--dur) var(--ease-out); }.uc-ucc .nav-item.ucx-is-open .nav-trigger .chev, .uc-ucc .nav-item.ucx-is-open:hover .nav-trigger .chev{ transform: rotate(0deg); }.uc-ucc .nav-item:hover .nav-trigger .chev{ transform: rotate(-90deg); }.uc-ucc .mega{ position: static; transform: none; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: block; max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease-out); }.uc-ucc .nav-item:hover .mega{ max-height: 0; }.uc-ucc .nav-item.ucx-is-open .mega{ max-height: 1600px; padding-bottom: var(--space-4); transform: none; }.uc-ucc .mega-cols{ grid-template-columns: 1fr; gap: var(--space-3); }.uc-ucc .mega-feature{ display: none; }.uc-ucc .nav-mobextra{ display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }.uc-ucc .nav-mobextra .btn{ width: 100%; justify-content: center; font-size: var(--fs-body); padding: 0.95em 1.2em; }.uc-ucc .nav-mob-login{ background: color-mix(in srgb, var(--fg) 6%, var(--surface)); color: var(--fg); }.uc-ucc .nav-mob-login:hover{ background: color-mix(in srgb, var(--fg) 10%, var(--surface)); }.uc-ucc .nav-login{ display: none; }.uc-ucc .nav-actions .btn{ display: none; }.uc-ucc .nav-actions .has-dot{ display: none; }.uc-ucc .nav-toggle{ display: inline-flex; }}.uc-ucc .cta-band{ --canvas: #F3F1EC; --ink: #0C0D12; position: relative; overflow: clip; background: var(--ink-panel); color: var(--canvas); text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 7rem); }.uc-ucc .cta-band .container{ position: relative; z-index: var(--z-content); }.uc-ucc .cta-glow{ position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: min(720px, 90vw); height: 420px; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(253,106,53,.32), rgba(138,160,255,.12) 45%, transparent 72%); filter: blur(6px); }.uc-ucc .cta-band h2{ color: var(--canvas); margin-top: var(--space-3); }.uc-ucc .cta-band-secondary{ background: transparent; color: var(--canvas); border-color: color-mix(in srgb, var(--canvas) 30%, transparent); }.uc-ucc .cta-band-secondary:hover{ border-color: var(--canvas); background: color-mix(in srgb, var(--canvas) 8%, transparent); }.uc-ucc .foot{ --f-bg: #0C0D12; --f-fg: #F3F1EC; --f-line: rgba(255,255,255,.1); background: var(--f-bg); color: color-mix(in srgb, var(--f-fg) 80%, transparent); padding-block: var(--space-9) var(--space-5); overflow: clip; }.uc-ucc .foot .container{ position: relative; }.uc-ucc .foot a{ color: color-mix(in srgb, var(--f-fg) 66%, transparent); font-size: 0.95rem; transition: color var(--dur-fast); }.uc-ucc .foot a:hover{ color: var(--f-fg); }.uc-ucc .foot-main{ display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }.uc-ucc .foot-brand{ display: flex; flex-direction: column; gap: var(--space-4); }.uc-ucc .foot .foot-logo{ display: inline-flex; align-items: center; gap: 0.55em; font-weight: var(--fw-black); font-size: 1.55rem; letter-spacing: 0.01em; color: var(--f-fg); }.uc-ucc .foot-logo .wordmark{ height: 0.82em; width: auto; display: block; }.uc-ucc .foot-tagline{ color: color-mix(in srgb, var(--f-fg) 52%, transparent); font-size: 0.95rem; line-height: 1.6; max-width: 34ch; }.uc-ucc .foot-cols{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }.uc-ucc .foot-col h4{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: color-mix(in srgb, var(--f-fg) 45%, transparent); margin-bottom: var(--space-4); font-weight: var(--fw-medium); }.uc-ucc .foot-col ul{ display: grid; gap: 0.75rem; list-style: none; padding: 0; }.uc-ucc .foot-rail{ display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }.uc-ucc .foot-demo{ display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--f-line); border-radius: var(--r-lg); background: rgba(255,255,255,.03); width: 100%; transition: border-color var(--dur-fast), background var(--dur-fast); }.uc-ucc .foot-demo:hover{ border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); }.uc-ucc .foot-demo-thumb{ width: 96px; flex: none; min-height: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.1); }.uc-ucc .foot-demo-thumb::after{ color: rgba(243,241,236,.4); }.uc-ucc .foot-demo-meta{ display: flex; flex-direction: column; gap: 2px; }.uc-ucc .foot-demo-label{ font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.02em; color: var(--red); }.uc-ucc .foot-demo-title{ font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--f-fg); }.uc-ucc .foot-social{ display: flex; gap: 0.5rem; flex-wrap: wrap; }.uc-ucc .foot-social a{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); color: color-mix(in srgb, var(--f-fg) 78%, transparent); transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }.uc-ucc .foot-social a:hover{ background: var(--red); color: #fff; transform: translateY(-2px); }.uc-ucc .foot-wordmark{ display: flex; align-items: center; gap: clamp(1rem, 3.5vw, 3rem); width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: var(--gutter); margin-top: var(--space-6); user-select: none; color: rgba(255,255,255,.05); }.uc-ucc .foot-wordmark > svg:first-of-type{ width: clamp(3.5rem, 11vw, 10rem); height: auto; flex: none; }.uc-ucc .foot-wordmark .wordmark{ flex: 1 1 0; min-width: 0; width: auto; height: auto; }.uc-ucc .foot-wordmark path[fill="var(--red)"]{ opacity: 0.3; }.uc-ucc .foot-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--f-line); }.uc-ucc .foot-bottom-left{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }.uc-ucc .foot-copy{ font-size: 0.85rem; color: color-mix(in srgb, var(--f-fg) 42%, transparent); font-family: var(--font-mono); }.uc-ucc .foot-bottom-left a{ font-size: 0.85rem; }.uc-ucc .foot-trust{ display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; font-weight: var(--fw-medium); color: color-mix(in srgb, var(--f-fg) 66%, transparent); border: 1px solid var(--f-line); border-radius: var(--r-pill); padding: 0.4em 0.9em; }.uc-ucc .foot-trust .ucx-d{ width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; }.uc-ucc .foot-dots{ position: relative; width: 100%; height: clamp(220px, 26vw, 380px); margin-top: var(--space-6); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }.uc-ucc .foot-dots canvas{ position: absolute; inset: 0; }@media (max-width: 1080px){.uc-ucc .foot-main{ grid-template-columns: 1fr; }.uc-ucc .foot-cols{ grid-template-columns: repeat(3, 1fr); }.uc-ucc .foot-rail{ flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }.uc-ucc .foot-demo{ width: auto; }}@media (max-width: 620px){.uc-ucc .foot-cols{ grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }.uc-ucc .foot-rail{ flex-direction: column; align-items: flex-start; }}.uc-ucc .theme-toggle{ width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--fg); background: var(--surface); transition: border-color var(--dur-fast), transform var(--dur-fast); }.uc-ucc .theme-toggle:hover{ transform: translateY(-2px); border-color: var(--fg); }.uc-ucc .bcard{ --bc: var(--mint); --bc-deep: var(--mint-deep); position: relative; overflow: hidden; background: color-mix(in srgb, var(--bc) 80%, #fff); color: var(--card-ink); border: 1px solid color-mix(in srgb, var(--bc-deep) 16%, transparent); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }.uc-ucc .bcard:hover{ transform: translateY(-4px); }.uc-ucc .bcard > *{ position: relative; z-index: 1; }.uc-ucc .bcard-ico{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--bc-deep); box-shadow: 0 2px 6px rgba(17,17,17,.10); margin-bottom: var(--space-4); }.uc-ucc .bcard h3, .uc-ucc .bcard .bcard-title{ font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--card-ink); }.uc-ucc .bcard p{ color: var(--card-ink-soft); margin-top: var(--space-2); font-size: 0.92rem; line-height: 1.5; }.uc-ucc .bcard-num{ font-family: var(--font-mono); font-size: 0.78rem; font-weight: var(--fw-bold); color: var(--bc-deep); }.uc-ucc .bcard.mint{ --bc: var(--mint); --bc-deep: var(--mint-deep); }.uc-ucc .bcard.lilac{ --bc: var(--lilac); --bc-deep: var(--lilac-deep); }.uc-ucc .bcard.blue{ --bc: var(--blue); --bc-deep: var(--blue-deep); }.uc-ucc .bcard.lime{ --bc: var(--lime); --bc-deep: var(--lime-deep); }.uc-ucc .bcard.peach{ --bc: var(--peach); --bc-deep: var(--peach-deep); }.uc-ucc .acc{ display: grid; gap: var(--space-3); }.uc-ucc .acc-item{ border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--dur-fast); }.uc-ucc .acc-item.ucx-is-open{ border-color: color-mix(in srgb, var(--red) 30%, var(--card-line)); }.uc-ucc .acc-head{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; padding: var(--space-4) var(--space-5); font-weight: var(--fw-semibold); font-size: 1.02rem; color: var(--fg); }.uc-ucc .acc-head .acc-ico{ flex: none; transition: transform var(--dur) var(--ease-out); color: var(--muted); }.uc-ucc .acc-item.ucx-is-open .acc-head .acc-ico{ transform: rotate(180deg); color: var(--red); }.uc-ucc .acc-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }.uc-ucc .acc-item.ucx-is-open .acc-panel{ grid-template-rows: 1fr; }.uc-ucc .acc-panel > div{ overflow: hidden; }.uc-ucc .acc-panel p{ padding: 0 var(--space-5) var(--space-5); color: var(--muted); font-size: 0.96rem; line-height: 1.6; }@media (prefers-reduced-motion: reduce){.uc-ucc .acc-panel{ transition: none; }}.uc-ucc .acc-plus{ position: relative; flex: none; width: 18px; height: 18px; }.uc-ucc .acc-plus::before, .uc-ucc .acc-plus::after{ content: ""; position: absolute; background: var(--muted); border-radius: 2px; transition: transform var(--dur) var(--ease-out), background var(--dur-fast); }.uc-ucc .acc-plus::before{ left: 2px; right: 2px; top: 50%; height: 2px; transform: translateY(-50%); }.uc-ucc .acc-plus::after{ top: 2px; bottom: 2px; left: 50%; width: 2px; transform: translateX(-50%); }.uc-ucc .acc-item.ucx-is-open .acc-plus::before{ background: var(--red); }.uc-ucc .acc-item.ucx-is-open .acc-plus::after{ background: var(--red); transform: translateX(-50%) scaleY(0); }.uc-ucc .faq-layout{ display: grid; grid-template-columns: 264px 1fr; gap: var(--space-6); margin-top: var(--space-7); align-items: start; }.uc-ucc .faq-side{ position: sticky; top: calc(var(--nav-h, 64px) + var(--space-5)); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: 4px; background: var(--surface); }.uc-ucc .faq-tabs{ display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--r-md); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); }.uc-ucc .faq-tab{ text-align: left; padding: 0.7em 0.9em; border: 1px solid transparent; border-radius: calc(var(--r-md) - 3px); font-size: 0.98rem; font-weight: var(--fw-medium); color: var(--muted); background: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }.uc-ucc .faq-tab:hover{ color: var(--fg); }.uc-ucc .faq-tab[aria-selected="true"]{ background: var(--canvas); color: var(--fg); border-color: var(--card-line); box-shadow: var(--shadow-sm); font-weight: var(--fw-semibold); }.uc-ucc .faq-ask{ padding: var(--space-4) 0.7rem var(--space-1); margin-top: var(--space-1); }.uc-ucc .faq-ask-q{ font-size: 0.95rem; color: var(--muted); }.uc-ucc .faq-ask-cta{ display: inline-flex; align-items: center; gap: 0.45em; margin-top: var(--space-2); font-weight: var(--fw-bold); color: var(--fg); transition: color var(--dur-fast); }.uc-ucc .faq-ask-cta svg{ color: var(--red); }.uc-ucc .faq-ask-cta:hover{ color: var(--red); }.uc-ucc .faq-main{ min-width: 0; }.uc-ucc .faq-main .acc{ margin-top: 0; }@media (max-width: 820px){.uc-ucc .faq-layout{ grid-template-columns: 1fr; gap: var(--space-4); }.uc-ucc .faq-side{ position: static; }.uc-ucc .faq-tabs{ flex-direction: row; flex-wrap: wrap; gap: 6px; }.uc-ucc .faq-tab{ flex: 1 1 auto; text-align: center; }}.uc-ucc .seg{ position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); }.uc-ucc .seg::before{ content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--card-line); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-spring); }.uc-ucc .seg:has(button:nth-child(2)[aria-selected="true"])::before{ transform: translateX(100%); }@media (prefers-reduced-motion: reduce){.uc-ucc .seg::before{ transition: none; }}.uc-ucc .seg button{ position: relative; z-index: 1; padding: 0.55em 1.2em; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--muted); white-space: nowrap; transition: color var(--dur) var(--ease-out); }.uc-ucc .seg button[aria-selected="true"]{ color: var(--fg); }.uc-ucc .seg button:hover{ color: var(--fg); }.uc-ucc .seg .seg-badge{ margin-left: 0.5em; font-size: 0.64rem; font-weight: var(--fw-bold); color: var(--mint-deep); background: color-mix(in srgb, var(--mint) 55%, var(--surface)); padding: 2px 6px; border-radius: var(--r-pill); }.uc-ucc [data-tabpanel]{ display: none; }.uc-ucc [data-tabpanel].is-on{ display: block; }.uc-ucc [data-ba-view]{ display: none; }.uc-ucc [data-ba-view].is-on{ display: block; }.uc-ucc .video-frame{ position: relative; border: 1px solid var(--card-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); }.uc-ucc .video-frame .vf-bar{ display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--card-line); background: color-mix(in srgb, var(--fg) 3%, var(--surface)); }.uc-ucc .video-frame .vf-bar i{ width: 10px; height: 10px; border-radius: 50%; background: var(--card-line); }.uc-ucc .video-frame .vf-body{ position: relative; aspect-ratio: 16/9; background: radial-gradient(120% 120% at 20% 15%, color-mix(in srgb,var(--mint) 40%,var(--placeholder)), transparent 55%), radial-gradient(120% 120% at 85% 90%, color-mix(in srgb,var(--lilac) 40%,var(--placeholder)), transparent 55%), var(--placeholder); display: grid; place-items: center; }.uc-ucc .video-frame .vf-play{ width: 62px; height: 62px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); display: grid; place-items: center; color: var(--red); }.uc-ucc .video-frame .vf-label{ position: absolute; left: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); background: color-mix(in srgb,var(--surface) 80%, transparent); padding: 3px 8px; border-radius: var(--r-pill); }.uc-ucc .tag-chip{ display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.68rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--muted); }.uc-ucc .orb{ position: absolute; border-radius: 50%; pointer-events: none; z-index: var(--z-orb); filter: blur(0.5px); background: radial-gradient(circle at 32% 28%, #fff, var(--orb-color, var(--mint))); box-shadow: inset -6px -8px 16px rgba(0,0,0,.12), 0 10px 30px rgba(17,17,17,.08); }.uc-ucc .spark{ position: absolute; pointer-events: none; color: var(--red); z-index: var(--z-orb); }.uc-ucc .hero-orbs{ position: absolute; inset: 0; z-index: var(--z-orb); pointer-events: none; }.uc-ucc .hero-orbs:has(canvas) > .orb{ display: none; }.uc-ucc .eyebrow-row{ margin-bottom: var(--space-4); }.uc-ucc .sec-intro-copy{ max-width: 60ch; }.uc-ucc .sec-lead{ margin-top: var(--space-3); }.uc-ucc .ucx-hero{ position: relative; overflow: clip; padding-top: calc(var(--nav-h) + var(--space-9)); padding-bottom: var(--space-8); }.uc-ucc .hero-lede{ max-width: 62rem; margin-inline: auto; text-align: center; position: relative; z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; }.uc-ucc .hero-pill{ display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.5em 1.1em; box-shadow: var(--shadow-sm); }.uc-ucc .hero-pill .ucx-d{ width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }.uc-ucc .hero-lede h1{ margin-top: var(--space-5); max-width: 18ch; }.uc-ucc .hero-sub{ margin-top: var(--space-5); max-width: 64ch; }.uc-ucc .hero-centered .hero-actions{ margin-top: var(--space-6); gap: var(--space-3); justify-content: center; }.uc-ucc .hero-trust{ margin-top: var(--space-5); font-size: var(--fs-small); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 0.5em; flex-wrap: wrap; }.uc-ucc .hero-trust .ucx-d{ width: 7px; height: 7px; border-radius: 50%; background: var(--mint-deep); flex: none; }.uc-ucc .hero-centered .hero-glow.g1{ left: 50%; right: auto; top: -8%; transform: translateX(-50%); width: 62%; }.uc-ucc .hero-centered .hero-glow.g2{ left: 50%; right: auto; top: 30%; bottom: auto; transform: translateX(-50%); width: 52%; }.uc-ucc .hero-bg{ position: absolute; inset: var(--nav-h) 0 0 0; z-index: var(--z-orb); pointer-events: none; overflow: clip; }.uc-ucc .hero-glow{ position: absolute; border-radius: 50%; filter: blur(70px); }.uc-ucc .hero-glow.g1{ width: 46%; aspect-ratio: 1; right: -6%; top: -6%; background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 15%, transparent), transparent 72%); }.uc-ucc .hero-glow.g2{ width: 40%; aspect-ratio: 1; right: 18%; bottom: -14%; background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 34%, transparent), transparent 72%); }.uc-ucc[data-theme="dark"] .hero-glow.g1{ background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 26%, transparent), transparent 72%); }.uc-ucc[data-theme="dark"] .hero-glow.g2{ background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 20%, transparent), transparent 72%); }.uc-ucc .hero-ring{ position: absolute; right: -8%; top: 52%; transform: translateY(-50%); width: min(760px, 62vw); height: auto; color: var(--line); opacity: 0.85; }@media (max-width: 900px){.uc-ucc .hero-ring{ display: none; }.uc-ucc .hero-glow.g1{ top: -10%; }}@media (max-width: 900px){.uc-ucc .hero-split{ grid-template-columns: 1fr; }.uc-ucc .ucx-hero{ padding-top: calc(var(--nav-h) + var(--space-7)); }}.uc-ucc .g-orb{ position: relative; border-radius: 50%; flex: none; background: radial-gradient(circle at 34% 26%, #fff 0%, color-mix(in srgb, var(--orb, #7fd7cf) 22%, #fff) 20%, var(--orb, #7fd7cf) 58%, color-mix(in srgb, var(--orb, #7fd7cf) 55%, #000) 100%); box-shadow: inset -7px -9px 18px rgba(0,0,0,.24), inset 5px 6px 13px rgba(255,255,255,.55), 0 14px 26px -6px rgba(17,17,17,.28); }.uc-ucc .g-orb::after{ content: ""; position: absolute; top: 11%; left: 20%; width: 32%; height: 24%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), transparent 72%); filter: blur(0.5px); }.uc-ucc .hero-canvas{ position: relative; padding: var(--space-4); z-index: var(--z-content); }.uc-ucc .hero-canvas::before{ content: ""; position: absolute; inset: 0; border: 1.5px dashed color-mix(in srgb, var(--fg) 16%, transparent); border-radius: var(--r-xl); pointer-events: none; }.uc-ucc .hc-bar{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); padding-inline: var(--space-1); }.uc-ucc .hc-tag{ display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.72rem; font-weight: var(--fw-bold); color: var(--muted); letter-spacing: 0.01em; }.uc-ucc .hc-tag .ucx-d{ width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }.uc-ucc .hc-tools{ display: inline-flex; gap: 0.4rem; }.uc-ucc .hc-chip{ display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.68rem; font-weight: var(--fw-semibold); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.32em 0.7em; box-shadow: var(--shadow-sm); }.uc-ucc .hc-chip.hc-live{ color: var(--mint-deep); }.uc-ucc .hc-chip.hc-live .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); }.uc-ucc .hc-handle{ position: absolute; width: 10px; height: 10px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--fg) 42%, transparent); border-radius: 2px; z-index: 5; }.uc-ucc .hc-handle.tl{ left: -5px; top: -5px; }.uc-ucc .hc-handle.tr{ right: -5px; top: -5px; }.uc-ucc .hc-handle.bl{ left: -5px; bottom: -5px; }.uc-ucc .hc-handle.br{ right: -5px; bottom: -5px; }@media (prefers-reduced-motion: no-preference){.uc-ucc .hc-handle.br{ animation: pulse-dot 3s var(--ease-in-out) infinite; }}.uc-ucc .pwin{ position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: var(--z-content); }.uc-ucc .pwin-bar{ display: flex; align-items: center; gap: var(--space-4); padding: 0.6rem 0.95rem; border-bottom: 1px solid var(--card-line); }.uc-ucc .pwin-dots{ display: inline-flex; gap: 5px; }.uc-ucc .pwin-dots i{ width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }.uc-ucc .pwin-tab{ display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.72rem; font-weight: var(--fw-semibold); color: var(--muted); background: color-mix(in srgb, var(--fg) 4%, transparent); border-radius: var(--r-pill); padding: 0.32em 0.85em; }.uc-ucc .pwin-tab .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); }.uc-ucc .pwin-hint{ margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }.uc-ucc .pwin-prompt{ display: flex; align-items: center; gap: 0.65em; padding: 0.65rem 0.95rem; border-bottom: 1px solid var(--card-line); }.uc-ucc .pp-ico{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--lilac); color: var(--lilac-deep); flex: none; }.uc-ucc .pp-text{ flex: 1; min-width: 0; font-size: 0.82rem; color: var(--fg); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.uc-ucc .pp-chips{ display: inline-flex; gap: 0.4rem; flex: none; }.uc-ucc .pp-chips span{ font-size: 0.7rem; font-weight: var(--fw-semibold); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.28em 0.75em; white-space: nowrap; }.uc-ucc .pwin-prompt .go{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--fg); color: var(--bg); flex: none; }.uc-ucc .pwin-body{ display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }.uc-ucc .pwin-code{ display: flex; flex-direction: column; min-width: 0; background: #14151b; }.uc-ucc .pc-tabs{ display: flex; align-items: center; gap: 0.2rem; padding: 0.55rem 0.9rem 0; }.uc-ucc .pc-tabs span{ font-family: var(--font-mono); font-size: 0.66rem; color: rgba(243,241,236,.42); padding: 0.35em 0.7em; border-radius: 6px 6px 0 0; }.uc-ucc .pc-tabs .on{ color: #F3F1EC; background: rgba(255,255,255,.07); }.uc-ucc .pc-note{ margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: rgba(243,241,236,.32); }.uc-ucc .pc-editor{ flex: 1; margin: 0; padding: 0.85rem 1rem; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.8; color: #E8E6E1; white-space: pre; overflow: hidden; }.uc-ucc .pc-editor .ln{ display: inline-block; min-width: 1.2em; margin-right: 1em; color: rgba(243,241,236,.2); text-align: right; }.uc-ucc .pc-editor .k{ color: #FF7A7A; }.uc-ucc .pc-editor .s{ color: #BDEFE7; }.uc-ucc .pc-editor .ucx-p{ color: #E7DDF9; }.uc-ucc .pc-editor .ucx-n{ color: #EAF3A8; }.uc-ucc .pc-editor .ucx-c{ color: #6E6E74; }.uc-ucc .pc-foot{ display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-top: 1px solid rgba(255,255,255,.07); font-size: 0.72rem; }.uc-ucc .pc-ok{ display: inline-flex; align-items: center; gap: 0.45em; font-weight: var(--fw-semibold); color: #8FD8CE; }.uc-ucc .pc-ok .ic{ display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--mint-deep); color: #fff; }.uc-ucc .pc-ok .ic svg{ width: 10px; height: 10px; }.uc-ucc .pc-switch{ display: inline-flex; align-items: center; gap: 0.5em; font-weight: var(--fw-semibold); color: rgba(243,241,236,.5); }.uc-ucc .pc-switch .track{ width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--red); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }.uc-ucc .pc-switch .track::after{ content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }.uc-ucc .pwin-view{ position: relative; min-width: 0; border-left: 1px solid var(--card-line); background: radial-gradient(560px 300px at 82% -12%, color-mix(in srgb, var(--mint) 30%, transparent), transparent 70%), var(--canvas); padding: clamp(1.4rem, 2.4vw, 2.4rem); display: grid; align-content: center; }.uc-ucc .pv-sec{ position: relative; max-width: 30rem; }.uc-ucc .pv-kicker{ display: flex; align-items: center; gap: 0.5em; font-size: 0.66rem; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); color: var(--mint-deep); }.uc-ucc .pv-kicker .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); }.uc-ucc .pv-title{ position: relative; display: inline-block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.02em; margin-top: 2.1rem; }.uc-ucc .pv-title::before{ content: ""; position: absolute; inset: -0.28em -0.45em; border: 1.5px solid var(--blue-deep); border-radius: 6px; pointer-events: none; }.uc-ucc .pv-title .tag{ position: absolute; top: -1.9em; left: -0.45em; font-family: var(--font-sans); font-size: 0.6rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; color: #fff; background: var(--blue-deep); border-radius: 4px; padding: 0.25em 0.65em; white-space: nowrap; }.uc-ucc .pv-title .hnd{ position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--blue-deep); border-radius: 2px; }.uc-ucc .pv-title .hnd.tl{ left: calc(-0.45em - 4px); top: -0.28em; margin-top: -4px; }.uc-ucc .pv-title .hnd.tr{ right: calc(-0.45em - 4px); top: -0.28em; margin-top: -4px; }.uc-ucc .pv-title .hnd.bl{ left: calc(-0.45em - 4px); bottom: -0.28em; margin-bottom: -4px; }.uc-ucc .pv-title .hnd.br{ right: calc(-0.45em - 4px); bottom: -0.28em; margin-bottom: -4px; }.uc-ucc .pv-body{ margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); max-width: 30ch; }.uc-ucc .pv-btn{ display: inline-flex; align-items: center; margin-top: 0.95rem; background: var(--fg); color: var(--bg); font-size: 0.78rem; font-weight: var(--fw-semibold); border-radius: var(--r-pill); padding: 0.55em 1.15em; }.uc-ucc .pv-orb{ position: absolute; right: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-56%); width: clamp(64px, 8vw, 104px); aspect-ratio: 1; display: grid; }.uc-ucc .pv-orb::before{ content: ""; position: absolute; inset: -26%; border: 1.2px dashed color-mix(in srgb, var(--mint-deep) 45%, transparent); border-radius: 50%; }.uc-ucc .pv-orb .g-orb{ width: 100%; height: 100%; animation: orb-breathe 6s var(--ease-in-out) infinite; }@keyframes orb-breathe{ 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.03); } }.uc-ucc .pv-metric{ position: absolute; right: clamp(0.8rem, 2vw, 1.4rem); bottom: clamp(0.8rem, 2vw, 1.4rem); display: flex; align-items: center; gap: 0.8em; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 0.5rem 0.8rem; }.uc-ucc .pv-metric .v{ font-size: 1.02rem; font-weight: var(--fw-black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }.uc-ucc .pv-metric .u{ display: block; font-size: 0.6rem; font-weight: var(--fw-semibold); color: var(--faint); }.uc-ucc .pv-metric .delta{ font-size: 0.66rem; font-weight: var(--fw-bold); color: var(--mint-deep); font-variant-numeric: tabular-nums; }.uc-ucc .pv-spark{ width: 58px; height: 24px; color: var(--red); overflow: visible; }.uc-ucc .pv-spark path.line{ fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: spark-draw 1.5s var(--ease-out) 0.4s forwards; }.uc-ucc .pv-spark circle{ fill: currentColor; opacity: 0; animation: spark-dot 0.01s linear 1.7s forwards, pulse-dot 2.2s var(--ease-in-out) 1.8s infinite; }@keyframes spark-draw{ to { stroke-dashoffset: 0; } }@keyframes spark-dot{ to { opacity: 1; } }@media (prefers-reduced-motion: reduce){.uc-ucc .pv-orb .g-orb{ animation: none !important; }.uc-ucc .pv-spark path.line{ stroke-dashoffset: 0; animation: none; }.uc-ucc .pv-spark circle{ opacity: 1; animation: none; }}@media (max-width: 1060px){.uc-ucc .pp-chips{ display: none; }}@media (max-width: 900px){.uc-ucc .pwin-body{ grid-template-columns: 1fr; }.uc-ucc .pwin-view{ border-left: 0; border-top: 1px solid var(--card-line); min-height: 300px; }.uc-ucc .pv-orb{ top: auto; bottom: 4.4rem; transform: none; }.uc-ucc .pc-editor{ font-size: 0.68rem; line-height: 1.7; }}@media (max-width: 560px){.uc-ucc .pv-orb{ display: none; }.uc-ucc .pwin-hint{ display: none; }.uc-ucc .pc-note{ display: none; }}.uc-ucc .trust{ padding-block: var(--space-6) 0; }.uc-ucc .trust-lead{ text-align: center; font-size: 0.8rem; color: var(--muted); font-weight: var(--fw-medium); }.uc-ucc .trust-fams{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; margin-top: var(--space-3); }.uc-ucc .trust-fams-label{ font-size: 0.62rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--faint); }.uc-ucc .trust-fam{ font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--faint); white-space: nowrap; display: inline-flex; align-items: center; }.uc-ucc .trust-fam + .trust-fam::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); opacity: .5; margin-right: 0.6rem; }.uc-ucc .trap-split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); align-items: stretch; }.uc-ucc .trap-col{ display: flex; flex-direction: column; }.uc-ucc .trap-head{ padding-bottom: var(--space-4); border-bottom: 1px solid transparent; }.uc-ucc .trap-card--pain .trap-head{ border-bottom-color: var(--ink-panel-line); }.uc-ucc .trap-card--fix .trap-head{ border-bottom-color: color-mix(in srgb, var(--mint-deep) 15%, transparent); }.uc-ucc .trap-card--fix .trap-line--serif{ color: var(--card-ink); }.uc-ucc .trap-kicker{ display: inline-flex; align-items: center; gap: 0.55em; font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); }.uc-ucc .trap-kicker .ucx-d{ width: 7px; height: 7px; border-radius: 50%; flex: none; }.uc-ucc .trap-kicker--pain{ color: var(--muted); }.uc-ucc .trap-kicker--pain .ucx-d{ background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }.uc-ucc .trap-kicker--fix{ color: var(--mint-deep); }.uc-ucc .trap-kicker--fix .ucx-d{ background: var(--mint-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-deep) 22%, transparent); }.uc-ucc .trap-line{ margin-top: var(--space-3); font-size: var(--fs-lead); color: var(--muted); max-width: 36ch; line-height: 1.45; }.uc-ucc .trap-line--serif{ font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); color: var(--fg); letter-spacing: -0.01em; line-height: 1.2; }.uc-ucc .trap-card{ position: relative; overflow: hidden; flex: 1; border-radius: var(--r-xl); padding: 4px; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out); }.uc-ucc .trap-card:hover{ transform: translateY(-4px); }.uc-ucc .trap-card--pain{ border: 1px solid var(--ink-panel-line); background: color-mix(in srgb, var(--ink-panel-line) 40%, transparent); }.uc-ucc .trap-card--fix{ border: 1px solid color-mix(in srgb, var(--mint-deep) 18%, transparent); background: color-mix(in srgb, var(--mint-deep) 8%, transparent); }.uc-ucc .trap-inner{ position: relative; overflow: hidden; flex: 1; border-radius: calc(var(--r-xl) - 4px); padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); display: flex; flex-direction: column; }.uc-ucc .trap-inner > *{ position: relative; z-index: 1; }.uc-ucc .trap-card--pain .trap-inner{ background: var(--ink-panel); color: var(--on-panel); }.uc-ucc .trap-card--pain .trap-inner::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(560px 280px at 12% -8%, rgba(255,77,77,.16), transparent 60%); pointer-events: none; z-index: 0; }.uc-ucc .trap-card--fix .trap-inner{ color: var(--card-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 60%, #fff) 0%, color-mix(in srgb, var(--blue) 48%, #fff) 50%, color-mix(in srgb, var(--lilac) 50%, #fff) 100%); }.uc-ucc .trap-list{ list-style: none; padding: 0; display: flex; flex-direction: column; }.uc-ucc .trap-row{ display: flex; gap: var(--space-3); padding: var(--space-4) 0; }.uc-ucc .trap-card--pain .trap-row + .trap-row{ border-top: 1px solid var(--ink-panel-line); }.uc-ucc .trap-card--fix .trap-row + .trap-row{ border-top: 1px solid color-mix(in srgb, var(--mint-deep) 15%, transparent); }.uc-ucc .trap-mark{ flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-top: 2px; }.uc-ucc .trap-mark--x{ color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }.uc-ucc .trap-mark--check{ color: #fff; background: var(--mint-deep); box-shadow: 0 4px 12px color-mix(in srgb, var(--mint-deep) 32%, transparent); }.uc-ucc .trap-row h3{ font-size: 1.02rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }.uc-ucc .trap-row p{ margin-top: 3px; font-size: 0.92rem; line-height: 1.5; }.uc-ucc .trap-card--pain .trap-row p{ color: var(--on-panel-soft); }.uc-ucc .trap-card--fix .trap-row p{ color: var(--card-ink-soft); }.uc-ucc .trap-cta{ margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--mint-deep) 15%, transparent); }.uc-ucc .trap-cta-btn{ align-self: flex-start; background: var(--card-ink); color: #fff; }.uc-ucc .trap-cta-btn:hover{ background: #000; box-shadow: var(--shadow-md); }.uc-ucc .trap-cta-note{ font-size: var(--fs-small); color: var(--card-ink-soft); max-width: 44ch; line-height: 1.5; }@media (max-width: 820px){.uc-ucc .trap-split{ grid-template-columns: 1fr; gap: var(--space-6); }}@media (prefers-reduced-motion: reduce){.uc-ucc .trap-card{ transition: none; }.uc-ucc .trap-card:hover{ transform: none; }}.uc-ucc .mp-track{ position: relative; }.uc-ucc .mp-sticky{ position: sticky; top: calc(var(--nav-h) + var(--space-5)); }@media (min-width: 901px){.uc-ucc .mp-track{ height: 300vh; }}@media (max-width: 900px){.uc-ucc .mp-sticky{ position: static; }}.uc-ucc .rail{ list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--space-6); margin-top: var(--space-7); padding: var(--space-6) 0 0; position: relative; }.uc-ucc .rail::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); border-radius: var(--r-pill); }.uc-ucc .rail::after{ content: ""; position: absolute; top: 0; left: 0; width: var(--rail-fill, 33%); height: 2px; background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 30%, transparent)); border-radius: var(--r-pill); transition: width var(--dur) var(--ease-out); }.uc-ucc .rail-step{ position: relative; padding: 0 var(--space-5) 0 0; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }.uc-ucc .rail-step:focus-visible{ outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--r-sm); }.uc-ucc .rail-node{ position: absolute; top: calc(var(--space-6) * -1 - 5px); left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid color-mix(in srgb, var(--fg) 28%, transparent); transition: background var(--dur-fast), border-color var(--dur-fast); }.uc-ucc .rail-step.ucx-is-done .rail-node{ border-color: var(--red); background: var(--red); }.uc-ucc .rail-num{ display: block; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; color: color-mix(in srgb, var(--fg) 26%, transparent); transition: color var(--dur-fast); }.uc-ucc .rail-step:hover .rail-num{ color: color-mix(in srgb, var(--fg) 52%, transparent); }.uc-ucc .rail-step.ucx-is-active .rail-num{ color: color-mix(in srgb, var(--red) 62%, var(--fg)); }.uc-ucc .rail-h{ display: block; font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h3); letter-spacing: -0.01em; margin-top: var(--space-3); color: color-mix(in srgb, var(--fg) 76%, transparent); transition: color var(--dur-fast); }.uc-ucc .rail-step.ucx-is-active .rail-h, .uc-ucc .rail-step:hover .rail-h{ color: var(--fg); }.uc-ucc .rail-p{ display: block; color: var(--muted); font-size: 0.95rem; margin-top: var(--space-2); max-width: 30ch; }.uc-ucc .rail-meta{ display: inline-block; margin-top: var(--space-4); font-size: 0.72rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--faint); }@media (max-width: 820px){.uc-ucc .rail{ grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-5); }.uc-ucc .rail::before, .uc-ucc .rail::after{ top: 0; bottom: 0; height: auto; width: 2px; }.uc-ucc .rail::after{ height: var(--rail-fill, 33%); width: 2px; }.uc-ucc .rail-node{ top: 0; left: calc(var(--space-5) * -1 - 5px); }.uc-ucc .rail-step{ padding-left: var(--space-5); padding-right: 0; }}.uc-ucc .mp-box{ position: relative; border-radius: var(--band-r); overflow: hidden; margin-top: var(--space-7); padding: 4px; background: linear-gradient(120deg, var(--peach) 0%, var(--lime) 30%, var(--mint) 62%, var(--blue) 100%); }.uc-ucc .mp-shader{ z-index: 0; }.uc-ucc .mp-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .mp-stage{ display: none; width: 100%; grid-area: 1 / 1; }.uc-ucc .mp-stage.on{ display: block; animation: mp-fade var(--dur) var(--ease-out); }@media (prefers-reduced-motion: reduce){.uc-ucc .mp-stage.on{ animation: none; }}.uc-ucc .mp-box .builder{ margin-top: 0; width: 100%; box-sizing: border-box; border-radius: calc(var(--band-r) - 4px); animation: mp-fade var(--dur) var(--ease-out); }@keyframes mp-fade{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce){.uc-ucc .mp-box .builder{ animation: none; }.uc-ucc .rail::after{ transition: none; }}.uc-ucc .builder{ position: relative; z-index: 1; box-sizing: border-box; margin-top: var(--space-7); border-radius: var(--r-xl); background: var(--ink-panel); border: 1px solid var(--ink-panel-line); overflow: hidden; }.uc-ucc .builder-tabs{ display: flex; gap: 0.3rem; padding: 0.6rem; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); flex-wrap: wrap; }.uc-ucc .builder-tab{ display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 1em; border-radius: var(--r-md); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: rgba(255,255,255,.6); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }.uc-ucc .builder-tab .ucx-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }.uc-ucc .builder-tab .live{ color: var(--mint); font-size: .7rem; font-weight: var(--fw-bold); }.uc-ucc .builder-tab .soon{ font-size: 0.64rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: var(--r-pill); }.uc-ucc .builder-tab[aria-selected="true"]{ background: rgba(255,255,255,.1); color: #fff; }.uc-ucc .builder-tab:hover{ color: #fff; }.uc-ucc .stage{ display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }.uc-ucc .stage-editor{ min-width: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); border-right: 1px solid rgba(255,255,255,.07); }.uc-ucc .editor{ min-width: 0; }.uc-ucc .ed-prompt{ display: flex; gap: 0.65rem; align-items: flex-start; }.uc-ucc .sp-ava{ flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, var(--red)); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }.uc-ucc .ed-prompt p{ font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,.92); background: rgba(255,255,255,.07); padding: 0.6em 0.9em; border-radius: 4px 14px 14px 14px; }.uc-ucc .editor{ flex: 1; display: flex; flex-direction: column; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); overflow: hidden; }.uc-ucc .editor-files{ display: flex; align-items: center; gap: 2px; padding: 0.4rem 0.4rem 0; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.07); }.uc-ucc .ef-tab{ font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,.5); padding: 0.5em 0.9em; border-radius: 6px 6px 0 0; border: 1px solid transparent; border-bottom: none; }.uc-ucc .ef-tab.ucx-is-active{ color: #fff; background: rgba(0,0,0,.34); border-color: rgba(255,255,255,.08); }.uc-ucc .ef-lang{ margin-left: auto; padding-right: 0.6rem; font-size: 0.62rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: rgba(255,255,255,.32); }.uc-ucc .editor-code{ display: flex; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.85; overflow-x: auto; }.uc-ucc .code-gutter{ flex: none; display: flex; flex-direction: column; padding: var(--space-3) 0.7rem var(--space-3) var(--space-4); text-align: right; color: rgba(255,255,255,.26); user-select: none; border-right: 1px solid rgba(255,255,255,.06); }.uc-ucc .code-body{ display: block; padding: var(--space-3) var(--space-4); color: #e8e8ea; white-space: pre; }.uc-ucc .code-ln{ display: block; min-height: 1.85em; }.uc-ucc .editor-code .k{ color: #FF7A7A; }.uc-ucc .editor-code .s{ color: #BDEFE7; }.uc-ucc .editor-code .ucx-p{ color: #E7DDF9; }.uc-ucc .editor-code .ucx-n{ color: #EAF3A8; }.uc-ucc .editor-code .ucx-c{ color: #6E6E74; }.uc-ucc .editor-code .cls{ cursor: pointer; border-radius: 3px; padding: 0 2px; transition: background var(--dur-fast); }.uc-ucc .editor-code .cls:hover{ background: rgba(189,239,231,.2); }.uc-ucc .editor-code .cls.hot{ background: rgba(255,122,122,.28); outline: 1px solid rgba(255,122,122,.55); }.uc-ucc .ed-foot{ display: flex; align-items: center; }.uc-ucc .sp-step{ display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.76rem; font-weight: var(--fw-semibold); color: var(--mint); }.uc-ucc .sp-check{ display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--mint-deep) 40%, transparent); color: var(--mint); }.uc-ucc .stage-preview{ min-width: 0; position: relative; padding: var(--space-5); display: grid; place-items: center; }.uc-ucc .bp-frame{ width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px -24px rgba(0,0,0,.65); }.uc-ucc .bp-chrome{ display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: color-mix(in srgb, var(--fg) 4%, var(--surface)); border-bottom: 1px solid var(--card-line); }.uc-ucc .bp-chrome span{ width: 10px; height: 10px; border-radius: 50%; background: var(--placeholder); }.uc-ucc .bp-body{ position: relative; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 210px; transition: background var(--dur); }.uc-ucc .bp-el{ border-radius: var(--r-sm); transition: outline var(--dur-fast); }.uc-ucc .bp-el.hot{ outline: 2px solid var(--red); outline-offset: 3px; }.uc-ucc .bp-title{ font-size: 1.3rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; }.uc-ucc .bp-text{ color: var(--muted); font-size: 0.9rem; }.uc-ucc .bp-btn{ align-self: flex-start; padding: 0.6em 1.1em; border-radius: var(--r-btn); background: var(--red); color: #fff; font-size: var(--fs-small); font-weight: var(--fw-semibold); }.uc-ucc .bp-layers{ position: absolute; right: var(--space-4); bottom: var(--space-4); width: 128px; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 0.5rem; font-size: 0.66rem; }.uc-ucc .bp-layers .lyr{ display: flex; align-items: center; gap: 0.4em; padding: 0.25rem 0.35rem; border-radius: 4px; color: var(--muted); }.uc-ucc .bp-layers .lyr.hot{ background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-aa); }.uc-ucc .bp-layers .lyr::before{ content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .6; }.uc-ucc .bp-frame[data-skin="elementor"] .bp-body{ background: var(--canvas); }.uc-ucc .bp-frame[data-skin="gutenberg"] .bp-body{ background: #f0f4ff; }.uc-ucc .bp-frame[data-skin="bricks"] .bp-body{ background: #14161d; }.uc-ucc .bp-frame[data-skin="bricks"] .bp-title{ color: #fff; }.uc-ucc .bp-frame[data-skin="bricks"] .bp-text{ color: #9aa1b3; }.uc-ucc .builder-soon{ position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink-panel) 66%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 4; text-align: center; padding: var(--space-5); }.uc-ucc .builder-soon .bs-pill{ font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--blue-deep); background: color-mix(in srgb, var(--blue) 70%, #fff); padding: 0.4em 1em; border-radius: var(--r-pill); }.uc-ucc .builder-soon .muted{ color: rgba(255,255,255,.7); }.uc-ucc .mp-bar{ display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }.uc-ucc .mp-bar-dots{ display: inline-flex; gap: 6px; }.uc-ucc .mp-bar-dots i{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }.uc-ucc .mp-bar-title{ font-size: 0.74rem; font-weight: var(--fw-semibold); color: rgba(255,255,255,.5); }.uc-ucc .mp-alt-body{ padding: clamp(1.25rem, 0.5rem + 2.6vw, 2.5rem); min-height: 300px; display: grid; }.uc-ucc .mp-install{ align-content: center; justify-items: center; gap: var(--space-5); }.uc-ucc .plugin-card{ width: min(100%, 460px); display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }.uc-ucc .plugin-ico{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--red) 26%, transparent); color: #fff; }.uc-ucc .plugin-name{ display: flex; align-items: center; gap: 0.5rem; font-weight: var(--fw-bold); color: #fff; }.uc-ucc .plugin-ver{ font-size: 0.62rem; font-weight: var(--fw-semibold); color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); padding: 1px 7px; border-radius: var(--r-pill); }.uc-ucc .plugin-by{ font-size: 0.72rem; color: rgba(255,255,255,.45); margin-top: 2px; }.uc-ucc .plugin-desc{ font-size: 0.8rem; color: rgba(255,255,255,.62); margin-top: 6px; line-height: 1.45; }.uc-ucc .plugin-state{ display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.74rem; font-weight: var(--fw-semibold); color: var(--mint); white-space: nowrap; }.uc-ucc .ps-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent); }.uc-ucc .install-log{ list-style: none; display: flex; flex-direction: column; gap: 0.55rem; width: min(100%, 460px); }.uc-ucc .il-line{ display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: rgba(255,255,255,.72); font-family: var(--font-mono); }.uc-ucc .il-check{ display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--mint-deep) 40%, transparent); color: var(--mint); }.uc-ucc .mp-widget{ grid-template-columns: 210px 1fr; gap: var(--space-4); align-items: stretch; }.uc-ucc .wg-panel{ border-radius: var(--r-md); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); padding: var(--space-3); }.uc-ucc .wg-search{ display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: rgba(255,255,255,.82); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); padding: 0.5em 0.7em; margin-bottom: var(--space-3); }.uc-ucc .wg-search svg{ color: rgba(255,255,255,.4); }.uc-ucc .wg-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }.uc-ucc .wg-tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; aspect-ratio: 1 / 0.8; border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: 0.68rem; color: rgba(255,255,255,.55); }.uc-ucc .wg-tile .wg-ico{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }.uc-ucc .wg-tile.is-composer{ background: color-mix(in srgb, var(--red) 20%, transparent); border-color: color-mix(in srgb, var(--red) 55%, transparent); color: #fff; font-weight: var(--fw-semibold); }.uc-ucc .wg-tile.is-composer .wg-ico{ background: var(--red); color: #fff; } /* Step clips. These replace the hand-built mocks that used to sit in each step, so they must occupy exactly the same box: .ax-media is 1920/1050 while the clips are 16:9, and cover absorbs that 2.9% difference as a ~1.4% crop top and bottom instead of letterboxing or resizing the frame. */ .uc-ucc .ax-vid{ display: block; width: 100%; height: 100%; object-fit: cover; background: #111; border: 0; } .uc-ucc .ax-screen .ax-vid{ position: absolute; inset: 0; } /* In the mobile stack the frame has no height of its own — the mock used to give it one — so the clip's own ratio provides it. 4px inset matches .ax-s-frame. */ .uc-ucc .ax-s-frame .ax-vid{ height: auto; aspect-ratio: 16 / 9; border-radius: calc(var(--r-card) - 4px); } /* Four steps need proportionally more scroll than three, so each one holds for about as long as it did before. Same idea as .ax--six. */ .uc-ucc .ax--four .ax-track{ height: 720vh; }.uc-ucc .wg-skel-bar{ width: 58%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); }.uc-ucc .wg-canvas{ border-radius: var(--r-md); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); display: grid; place-items: center; padding: var(--space-5); }.uc-ucc .wg-drop{ width: 100%; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); border: 2px dashed color-mix(in srgb, var(--red) 55%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--red) 8%, transparent); }.uc-ucc .wg-ghost{ display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: var(--fw-semibold); color: #fff; background: var(--red); padding: 0.5em 0.9em; border-radius: var(--r-sm); box-shadow: var(--shadow-md); transform: rotate(-3deg); }.uc-ucc .wg-drop-label{ font-size: 0.76rem; color: rgba(255,255,255,.52); }@media (max-width: 860px){.uc-ucc .stage{ grid-template-columns: 1fr; }.uc-ucc .stage-editor{ border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }.uc-ucc .mp-widget{ grid-template-columns: 1fr; }}@media (max-width: 560px){.uc-ucc .mp-box{ padding: 4px; }.uc-ucc .mp-box .builder{ border-radius: calc(var(--band-r) - 4px); }}.uc-ucc .proof-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .proof{ display: flex; gap: 0.7rem; align-items: flex-start; }.uc-ucc .proof .pf-ico{ color: var(--mint-deep); flex: none; margin-top: 2px; }.uc-ucc .proof p{ font-size: 0.9rem; color: var(--ink-90); line-height: 1.45; }@media (max-width: 820px){.uc-ucc .proof-row{ grid-template-columns: 1fr 1fr; }}@media (max-width: 480px){.uc-ucc .proof-row{ grid-template-columns: 1fr; }}.uc-ucc .doors{ display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 60px; row-gap: var(--space-6); align-items: center; margin-top: var(--space-7); }.uc-ucc .doors-visual{ position: relative; border-radius: calc(var(--r-lg) - 4px); background: var(--surface); overflow: hidden; min-height: 300px; }.uc-ucc .doors-mock{ position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease-out); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }.uc-ucc .doors-mock.on{ opacity: 1; }.uc-ucc .doors-mock-bar{ display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-family: var(--font-mono); color: var(--faint); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-line); }.uc-ucc .field-row{ display: grid; gap: 0.5rem; }.uc-ucc .field-row label{ font-size: 0.78rem; font-weight: var(--fw-bold); color: var(--ink-90); }.uc-ucc .field-row .fake-input{ height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: flex; align-items: center; padding-inline: 0.9rem; font-size: 0.9rem; color: var(--ink-90); box-shadow: var(--shadow-sm); }.uc-ucc .field-row .fake-swatches{ display: flex; gap: 8px; }.uc-ucc .field-row .fake-swatches i{ width: 26px; height: 26px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--card-line); }.uc-ucc .doors-code{ font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.8; color: var(--ink-90); background: #111114; color: #e8e8ea; border-radius: var(--r-md); padding: var(--space-4); flex: 1; overflow: auto; }.uc-ucc .doors-code .k{ color: #FF7A7A; }.uc-ucc .doors-code .s{ color: #BDEFE7; }.uc-ucc .doors-code .ucx-p{ color: #E7DDF9; }.uc-ucc .doors-code .ucx-n{ color: #EAF3A8; }.uc-ucc .doors-panel-toggle{ display: inline-flex; padding: 4px; background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--line); border-radius: var(--r-btn); margin-bottom: var(--space-6); }.uc-ucc .doors-panel-toggle button{ padding: 0.5em 1.1em; border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--muted); transition: color var(--dur-fast); }.uc-ucc .doors-panel-toggle button[aria-selected="true"]{ background: var(--canvas); color: var(--fg); border-color: var(--card-line); box-shadow: var(--shadow-sm); }.uc-ucc .doors-desc{ display: none; }.uc-ucc .doors-desc.on{ display: block; }.uc-ucc .doors-desc h3{ font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.015em; }.uc-ucc .doors-desc p{ color: var(--muted); margin-top: var(--space-4); font-size: var(--fs-lead); line-height: 1.6; max-width: 46ch; }.uc-ucc .doors-close{ margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--ink-90); line-height: 1.6; max-width: 46ch; }@media (max-width: 860px){.uc-ucc .doors{ grid-template-columns: 1fr; }.uc-ucc .doors-visual{ min-height: 280px; }}.uc-ucc .stack{ display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }.uc-ucc .stack-feats{ list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-7); }.uc-ucc .stack-feats li{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-size: var(--fs-lead); color: var(--ink-90); }.uc-ucc .stack-feats li + li{ border-top: 1px solid var(--line); }.uc-ucc .stack-feat-ic{ flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--line); color: var(--red); }.uc-ucc .stack-cta{ align-self: flex-start; }.uc-ucc .connect-card{ position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(1rem, 0.5rem + 1.4vw, 1.75rem); background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }.uc-ucc .cc-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }.uc-ucc .cc-row{ display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--fg) 3%, var(--surface)); border: 1px solid var(--card-line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }.uc-ucc .cc-ico{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface); border: 1px solid var(--card-line); color: var(--ink-90); }.uc-ucc .cc-meta{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }.uc-ucc .cc-name{ font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--fg); line-height: 1.2; }.uc-ucc .cc-sub{ font-size: var(--fs-small); color: var(--muted); }.uc-ucc .cc-dot{ margin-left: auto; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--mint-deep) 50%, transparent); }.uc-ucc .cc-row.ucx-is-active{ background: linear-gradient(135deg, color-mix(in srgb, var(--lilac) 82%, #fff), color-mix(in srgb, var(--blue) 52%, #fff)); border-color: transparent; transform: scale(1.035); }.uc-ucc .cc-row.ucx-is-active .cc-ico{ background: rgba(255,255,255,.8); border-color: transparent; color: var(--lilac-deep); }.uc-ucc .cc-row.ucx-is-active .cc-name{ color: var(--card-ink); font-size: var(--fs-lead); }.uc-ucc .cc-row.ucx-is-active .cc-sub{ color: var(--card-ink-soft); }.uc-ucc .cc-row.ucx-is-active .cc-dot{ background: var(--lilac-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lilac-deep) 22%, transparent); }.uc-ucc .cc-caption{ padding: 0 0.25rem 0.25rem; }.uc-ucc .cc-cap-h{ font-weight: var(--fw-bold); font-size: var(--fs-lead); color: var(--fg); letter-spacing: -0.01em; }.uc-ucc .cc-cap-p{ margin-top: 3px; font-size: var(--fs-small); color: var(--muted); }@media (max-width: 860px){.uc-ucc .stack{ grid-template-columns: 1fr; gap: var(--space-7); }.uc-ucc .connect-card{ max-width: 480px; }}.uc-ucc .nlb-head{ display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; }.uc-ucc .nlb-head-l .h1{ margin-top: var(--space-3); }.uc-ucc .nlb-cta{ margin-top: var(--space-5); }.uc-ucc .nlb-lead{ color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; max-width: 46ch; }@media (max-width: 820px){.uc-ucc .nlb-head{ grid-template-columns: 1fr; align-items: start; gap: var(--space-4); }}.uc-ucc .nlb-bento{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .nlb-cell{ position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out); }.uc-ucc .nlb-cell:hover{ transform: translateY(-4px); }.uc-ucc .nlb-feature, .uc-ucc .nlb-wide{ grid-column: span 2; min-height: clamp(340px, 21rem + 6vw, 460px); justify-content: space-between; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }.uc-ucc .nlb-sm{ grid-column: span 1; justify-content: space-between; gap: var(--space-6); padding: var(--space-5); min-height: 210px; }@media (max-width: 900px){.uc-ucc .nlb-bento{ grid-template-columns: repeat(2, 1fr); }.uc-ucc .nlb-feature, .uc-ucc .nlb-wide{ grid-column: span 2; min-height: 380px; }}@media (max-width: 560px){.uc-ucc .nlb-bento{ grid-template-columns: 1fr; }.uc-ucc .nlb-feature, .uc-ucc .nlb-wide, .uc-ucc .nlb-sm{ grid-column: span 1; }}.uc-ucc .nlb-label h3{ font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--fg); }.uc-ucc .nlb-label p{ color: var(--muted); font-size: var(--fs-small); line-height: 1.55; margin-top: var(--space-2); max-width: 40ch; }.uc-ucc .nlb-label--ondark h3{ color: #fff; }.uc-ucc .nlb-label--ondark p{ color: rgba(255,255,255,.82); }.uc-ucc .nlb-ico{ width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--ink-90); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--card-line); }.uc-ucc .nlb-feature{ color: var(--card-ink); }.uc-ucc .nlb-shader{ position: absolute; inset: 0; z-index: 0; }.uc-ucc .nlb-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .nlb-feature::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 52%, color-mix(in srgb, #fff 62%, transparent)); }.uc-ucc .nlb-feature > *:not(.nlb-shader){ position: relative; z-index: 2; }.uc-ucc .nlb-demo{ align-self: center; width: min(100%, 480px); margin: auto 0; display: flex; flex-direction: column; align-items: stretch; }.uc-ucc .nlb-editor{ background: color-mix(in srgb, var(--ink-panel) 90%, transparent); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); box-shadow: 0 24px 60px -22px rgba(0,0,0,.55); overflow: hidden; }.uc-ucc .nlb-ed-bar{ display: flex; align-items: center; gap: 6px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }.uc-ucc .nlb-ed-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }.uc-ucc .nlb-ed-bar span{ margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; color: rgba(255,255,255,.42); }.uc-ucc .nlb-ed-body{ padding: 18px 20px 20px; }.uc-ucc .nlb-prompt{ display: inline-flex; align-items: center; gap: 0.42em; font-size: 0.82rem; font-weight: var(--fw-semibold); color: rgba(255,255,255,.92); background: rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 15px; }.uc-ucc .nlb-prompt svg{ color: var(--peach); }.uc-ucc .nlb-code{ display: block; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.75; color: #e8e8ea; }.uc-ucc .nlb-code .ucx-c{ color: #6E6E74; }.uc-ucc .nlb-code .k{ color: #FF7A7A; }.uc-ucc .nlb-code .s{ color: #BDEFE7; }.uc-ucc .nlb-caret{ display: inline-block; width: 7px; height: 1.05em; vertical-align: -0.16em; margin-left: 3px; background: var(--peach); border-radius: 1px; }@media (prefers-reduced-motion: no-preference){.uc-ucc .nlb-caret{ animation: nlb-blink 1.1s step-end infinite; }}@keyframes nlb-blink{ 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }.uc-ucc .nlb-builder{ background: color-mix(in srgb, var(--fg) 3%, var(--surface)); border: 1px solid var(--card-line); border-radius: var(--r-md); overflow: hidden; }.uc-ucc .nlb-bd-bar{ display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--card-line); }.uc-ucc .nlb-bd-bar i{ width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }.uc-ucc .nlb-bd-bar span{ margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--faint); }.uc-ucc .nlb-bd-body{ display: flex; flex-direction: column; gap: 9px; padding: 15px; }.uc-ucc .nlb-bd-row{ height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--fg) 6%, var(--surface)); }.uc-ucc .nlb-bd-row--short{ width: 52%; }.uc-ucc .nlb-bd-row--proton{ height: auto; display: inline-flex; align-items: center; gap: 0.5em; width: fit-content; padding: 9px 12px; background: color-mix(in srgb, var(--red) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); color: var(--red-aa); font-size: 0.78rem; font-weight: var(--fw-semibold); }.uc-ucc .nlb-bd-mark{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--red); color: #fff; flex: none; }.uc-ucc .letter{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); margin-top: var(--space-6); align-items: start; }.uc-ucc .letter-body{ font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-90); max-width: 56ch; }.uc-ucc .letter-kicker{ font-size: 0.72rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--faint); margin-bottom: var(--space-4); }.uc-ucc .letter-body p + p{ margin-top: var(--space-4); }.uc-ucc .letter-body strong{ color: var(--fg); font-weight: var(--fw-bold); }.uc-ucc .letter-sign{ margin-top: var(--space-6); display: flex; align-items: center; gap: 0.7rem; }.uc-ucc .letter-mark{ width: 42px; height: 42px; border-radius: var(--r-md); background: color-mix(in srgb, var(--red) 10%, var(--surface)); display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--red) 18%, transparent); flex: none; }.uc-ucc .letter-sign .ls-who{ font-size: var(--fs-small); line-height: 1.3; color: var(--ink-90); }.uc-ucc .letter-sign .ls-who b{ font-weight: var(--fw-bold); color: var(--fg); }.uc-ucc .mission-card{ position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); background: color-mix(in srgb, var(--lilac) 62%, #fff); color: var(--card-ink); border: 1px solid color-mix(in srgb, var(--lilac-deep) 16%, transparent); box-shadow: var(--shadow-md); }.uc-ucc .mission-card::before{ content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none; background: radial-gradient(42% 42% at 20% 22%, #f2ebff 0%, transparent 62%), radial-gradient(46% 42% at 84% 14%, #d6c2f7 0%, transparent 58%), radial-gradient(48% 50% at 22% 84%, #ccb4f0 0%, transparent 56%), radial-gradient(44% 46% at 82% 82%, #f0e8fe 0%, transparent 56%), radial-gradient(64% 60% at 56% 52%, #e4d7fb 0%, transparent 72%), #e6dbf9; filter: blur(16px); }.uc-ucc .mission-card > *{ position: relative; z-index: 1; }.uc-ucc .mission-kicker{ font-size: 0.72rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; color: color-mix(in srgb, var(--card-ink) 55%, transparent); position: relative; }.uc-ucc .mission-h{ font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em; margin-top: var(--space-4); max-width: 15ch; position: relative; }.uc-ucc .mission-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid color-mix(in srgb, var(--card-ink) 12%, transparent); position: relative; }.uc-ucc .ms-num{ font-family: var(--font-serif); font-size: clamp(1.45rem, 1.05rem + 1vw, 1.95rem); font-weight: var(--fw-regular); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }.uc-ucc .ms-lbl{ font-size: 0.74rem; color: color-mix(in srgb, var(--card-ink) 58%, transparent); margin-top: var(--space-3); line-height: 1.35; }@media (max-width: 860px){.uc-ucc .letter{ grid-template-columns: 1fr; }}@media (max-width: 460px){.uc-ucc .mission-stats{ grid-template-columns: 1fr; gap: var(--space-3); }}.uc-ucc .wl-strip{ margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--r-lg); background: color-mix(in srgb, var(--lilac) 32%, var(--surface)); border: 1px solid color-mix(in srgb,var(--lilac) 50%, transparent); }.uc-ucc .wl-strip p{ font-weight: var(--fw-semibold); max-width: 52ch; }.uc-ucc .reviews{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .review{ background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }.uc-ucc .review .rv-q{ color: var(--lilac-deep); margin-bottom: var(--space-3); }.uc-ucc .review p{ font-size: 0.95rem; color: var(--ink-90); }.uc-ucc .review .rv-by{ margin-top: var(--space-4); display: flex; align-items: center; gap: 0.6rem; }.uc-ucc .review .rv-av{ width: 36px; height: 36px; border-radius: 50%; background: var(--placeholder); }.uc-ucc .review .rv-name{ font-size: var(--fs-small); font-weight: var(--fw-semibold); }.uc-ucc .review .rv-role{ font-size: 0.78rem; color: var(--faint); }.uc-ucc .reviews-note{ text-align: center; margin-top: var(--space-4); font-size: 0.8rem; color: var(--faint); font-family: var(--font-mono); }@media (max-width: 820px){.uc-ucc .reviews{ grid-template-columns: 1fr; }}.uc-ucc .rail-h, .uc-ucc .doors-desc h3{ font-family: var(--font-serif); font-weight: var(--fw-medium); letter-spacing: -0.01em; }.uc-ucc .doors-shader-card{ position: relative; border-radius: var(--r-lg); overflow: hidden; padding: 4px; background: linear-gradient(135deg, var(--mint) 0%, var(--blue) 38%, var(--lilac) 68%, var(--peach) 100%); }.uc-ucc .dsc-shader{ z-index: 0; pointer-events: none; }.uc-ucc .dsc-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .doors-shader-card .doors-visual{ position: relative; z-index: 1; }.uc-ucc .ls-section{ padding-block: 0; }.uc-ucc .ls-box{ position: relative; border-radius: var(--band-r); overflow: hidden; padding: 4px; background: linear-gradient(120deg, var(--peach) 0%, var(--lime) 30%, var(--mint) 62%, var(--blue) 100%); }.uc-ucc .ls-shader{ z-index: 0; }.uc-ucc .ls-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .ls-video{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }.uc-ucc .ls-box::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.16; mix-blend-mode: soft-light; }.uc-ucc .ls-win{ position: relative; z-index: 1; width: 100%; box-sizing: border-box; display: block; background: #fff; border-radius: calc(var(--band-r) - 4px); overflow: hidden; border: 1px solid rgba(17,17,17,.08); color: var(--card-ink); font-size: 0.78rem; }.uc-ucc .ls-chrome{ display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.8rem 0; background: #F1EFEA; }.uc-ucc .ls-dots{ display: flex; gap: 5px; padding-bottom: 0.45rem; }.uc-ucc .ls-dots i{ width: 9px; height: 9px; border-radius: 50%; background: #D9D6CF; }.uc-ucc .ls-tabs{ display: flex; gap: 4px; min-width: 0; }.uc-ucc .ls-tab{ display: inline-flex; align-items: center; gap: 0.4em; padding: 0.42em 0.9em; border-radius: 8px 8px 0 0; font-size: 0.7rem; color: var(--card-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.uc-ucc .ls-tab.on{ background: #fff; color: var(--card-ink); font-weight: var(--fw-medium); }.uc-ucc .ls-tab .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); flex: none; }.uc-ucc .ls-url{ display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.5rem 0.9rem; background: #fff; border-bottom: 1px solid #ECEAE4; color: var(--card-ink-soft); font-size: 0.7rem; letter-spacing: 0.01em; }.uc-ucc .ls-lock{ width: 8px; height: 10px; border: 1.2px solid currentColor; border-radius: 2.5px; position: relative; opacity: 0.7; }.uc-ucc .ls-lock::before{ content: ''; position: absolute; left: 1.5px; top: -4px; width: 5px; height: 4px; border: 1.2px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }.uc-ucc .ls-body{ display: grid; grid-template-columns: 280px 1fr; min-height: clamp(400px, 34vw, 560px); }.uc-ucc .ls-rail{ border-right: 1px solid #ECEAE4; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; background: #fff; }.uc-ucc .ls-rail-head{ padding-bottom: 0.2rem; }.uc-ucc .ls-live{ display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.66rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; }.uc-ucc .ls-live .ucx-d{ width: 7px; height: 7px; border-radius: 50%; background: var(--red); }.uc-ucc .ls-msg{ border-radius: 10px; padding: 0.55rem 0.65rem; line-height: 1.45; font-size: 0.72rem; }.uc-ucc .ls-msg.user{ background: #EFEDE8; }.uc-ucc .ls-msg.ai{ background: var(--mint); color: var(--card-ink); }.uc-ucc .ls-msg.ai b{ display: block; font-weight: var(--fw-semibold); font-size: 0.64rem; letter-spacing: 0.01em; color: var(--mint-deep); margin-bottom: 0.2em; }.uc-ucc .ls-status{ margin-top: auto; display: flex; align-items: center; gap: 0.5em; font-size: 0.66rem; color: var(--card-ink-soft); font-family: var(--font-mono); }.uc-ucc .ls-spin{ width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid #D9D6CF; border-top-color: var(--card-ink); animation: ls-rot 0.9s linear infinite; }@keyframes ls-rot{ to { transform: rotate(360deg); } }.uc-ucc .ls-stage{ position: relative; background: #F6F5F2; padding: 1.7rem 1.9rem; overflow: hidden; }.uc-ucc .ls-page{ background: #fff; border: 1px solid #ECEAE4; border-radius: 10px; height: 100%; min-height: 290px; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }.uc-ucc .ls-line{ display: block; height: 12px; border-radius: 6px; background: #E9E7E1; }.uc-ucc .ls-line.dim{ height: 8px; opacity: 0.7; }.uc-ucc .ls-line.w40{ width: 40%; }.uc-ucc .ls-line.w64{ width: 64%; }.uc-ucc .ls-plans{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; flex: 1; margin-top: 0.4rem; }.uc-ucc .ls-plan{ border: 1px solid #ECEAE4; border-radius: 8px; background: #fff; min-height: 136px; position: relative; padding: 1rem; }.uc-ucc .ls-plan::before{ content: ""; display: block; height: 100%; border-radius: 4px; background: linear-gradient(#E5E3DD 0 0) 0 0 / 44% 10px, linear-gradient(#EDEBE5 0 0) 0 22px / 62% 17px, linear-gradient(#EFEDE8 0 0) 0 58px / 92% 7px, linear-gradient(#EFEDE8 0 0) 0 74px / 80% 7px, linear-gradient(#EFEDE8 0 0) 0 90px / 86% 7px; background-repeat: no-repeat; }.uc-ucc .ls-plan::after{ content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 26px; border-radius: var(--r-pill); background: #EFEDE8; border: 1px solid #E7E5DF; }.uc-ucc .ls-plan.build::before{ background: linear-gradient(rgba(92,61,190,.22) 0 0) 0 0 / 44% 10px, linear-gradient(rgba(92,61,190,.3) 0 0) 0 22px / 62% 17px, linear-gradient(rgba(92,61,190,.14) 0 0) 0 58px / 92% 7px, linear-gradient(rgba(92,61,190,.14) 0 0) 0 74px / 80% 7px, linear-gradient(rgba(92,61,190,.14) 0 0) 0 90px / 86% 7px; background-repeat: no-repeat; }.uc-ucc .ls-plan.build::after{ background: var(--lilac-deep); border-color: var(--lilac-deep); opacity: .85; }.uc-ucc .ls-plan.build{ position: relative; background: var(--lilac); border: 1.5px solid var(--lilac-deep); animation: ls-pulse 2.4s ease-in-out infinite; }.uc-ucc .ls-chiptag{ position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; background: var(--card-ink); color: var(--on-panel); font-size: 0.6rem; font-weight: var(--fw-medium); padding: 0.3em 0.7em; border-radius: 999px; }.uc-ucc .ls-chiptag .ucx-d{ width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }.uc-ucc .ls-h{ position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--lilac-deep); border-radius: 2px; }.uc-ucc .ls-h.tl{ top: -4px; left: -4px; }.uc-ucc .ls-h.tr{ top: -4px; right: -4px; }.uc-ucc .ls-h.bl{ bottom: -4px; left: -4px; }.uc-ucc .ls-h.br{ bottom: -4px; right: -4px; }@keyframes ls-pulse{ 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }.uc-ucc .ls-cursor{ position: absolute; left: 56%; top: 62%; z-index: 2; color: var(--card-ink); animation: ls-drift 7s ease-in-out infinite; }.uc-ucc .ls-cursor-tag{ position: absolute; left: 12px; top: 15px; white-space: nowrap; background: var(--lime); color: var(--card-ink); border: 1px solid rgba(17,17,17,.14); font-size: 0.62rem; font-weight: var(--fw-medium); padding: 0.22em 0.6em; border-radius: 6px; }@keyframes ls-drift{ 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-34px, -22px); } 60% { transform: translate(18px, -38px); } 80% { transform: translate(30px, 8px); } }@media (max-width: 720px){.uc-ucc .ls-body{ grid-template-columns: 1fr; min-height: 300px; }.uc-ucc .ls-rail{ flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #ECEAE4; }.uc-ucc .ls-rail .ls-status{ margin-top: 0; width: 100%; }.uc-ucc .ls-plans{ grid-template-columns: 1fr; }.uc-ucc .ls-plan:not(.build){ display: none; }}@media (prefers-reduced-motion: reduce){.uc-ucc .ls-spin, .uc-ucc .ls-plan.build, .uc-ucc .ls-cursor{ animation: none; }}.uc-ucc .sw{ padding-block: var(--space-8); }.uc-ucc .sw-head{ display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-4) var(--space-6); }.uc-ucc .sw-title{ margin-top: var(--space-3); max-width: 20ch; }.uc-ucc .sw-head .btn-primary{ margin-top: var(--space-5); align-self: start; }.uc-ucc .sw-head-main{ display: flex; flex-direction: column; align-items: flex-start; }.uc-ucc .sw-lede{ color: var(--muted); max-width: 34ch; font-size: 1.02rem; padding-bottom: 0.35rem; }.uc-ucc .sw-bento{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-7); }.uc-ucc .sw-card{ position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--card-line); display: flex; flex-direction: column; }.uc-ucc .sw-card--lg{ grid-column: span 3; min-height: clamp(380px, 34vw, 460px); }.uc-ucc .sw-tile{ grid-column: span 2; min-height: 232px; padding: var(--space-5); }.uc-ucc .sw-cap{ margin-top: auto; }.uc-ucc .sw-cap h3{ font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: 1.28rem; letter-spacing: -0.01em; color: var(--fg); }.uc-ucc .sw-cap p{ margin-top: 0.4rem; color: var(--muted); font-size: 0.92rem; line-height: 1.5; max-width: 42ch; }.uc-ucc .sw-cap--onlight h3{ color: var(--card-ink); }.uc-ucc .sw-cap--onlight p{ color: var(--card-ink-soft); }.uc-ucc .sw-card--shader{ padding: var(--space-5); background: linear-gradient(150deg, var(--mint) 0%, var(--lilac) 52%, var(--blue) 100%); }.uc-ucc .sw-shader{ z-index: 0; }.uc-ucc .sw-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .sw-chat{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-5); }.uc-ucc .sw-bubble{ max-width: 78%; font-size: 0.86rem; line-height: 1.4; padding: 0.6em 0.85em; border-radius: 14px; background: #fff; color: var(--card-ink); box-shadow: var(--shadow-sm); }.uc-ucc .sw-bubble.user{ align-self: flex-end; border-bottom-right-radius: 5px; background: color-mix(in srgb, #fff 88%, var(--ink)); }.uc-ucc .sw-bubble.ai{ align-self: flex-start; border-bottom-left-radius: 5px; }.uc-ucc .sw-bubble.done{ align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55em; font-weight: var(--fw-semibold); color: var(--mint-deep); }.uc-ucc .sw-ava{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lilac-deep); color: #fff; font-size: 0.66rem; font-weight: var(--fw-bold); flex: none; }@media (prefers-reduced-motion: no-preference){.uc-ucc .sw-bubble{ animation: sw-bubble-in 0.5s var(--ease-out) both; }.uc-ucc .sw-bubble:nth-child(2){ animation-delay: 0.5s; }.uc-ucc .sw-bubble:nth-child(3){ animation-delay: 1.0s; }.uc-ucc .sw-bubble:nth-child(4){ animation-delay: 1.5s; }.uc-ucc .sw-bubble:nth-child(5){ animation-delay: 2.0s; }}@keyframes sw-bubble-in{ from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }.uc-ucc .sw-card--lg:not(.sw-card--shader){ padding: var(--space-5); }.uc-ucc .sw-chart{ display: flex; flex-direction: column; gap: var(--space-3); }.uc-ucc .sw-chart-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }.uc-ucc .sw-chart-kicker{ font-size: 0.8rem; font-weight: var(--fw-semibold); color: var(--muted); }.uc-ucc .sw-chart-val{ font-size: 1.7rem; font-weight: var(--fw-black); letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 0.45em; }.uc-ucc .sw-chart-val small{ font-size: 0.72rem; font-weight: var(--fw-semibold); color: var(--faint); letter-spacing: 0; }.uc-ucc .sw-chart-plot{ position: relative; }.uc-ucc .sw-chart-svg{ display: block; width: 100%; height: clamp(140px, 15vw, 190px); overflow: visible; }.uc-ucc .sw-grid{ stroke: var(--card-line); stroke-width: 1; }.uc-ucc .sw-area{ fill: color-mix(in srgb, var(--mint) 40%, transparent); opacity: 0.5; }.uc-ucc .sw-line{ fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.uc-ucc .sw-line--a{ stroke: var(--mint-deep); }.uc-ucc .sw-line--b{ stroke: color-mix(in srgb, var(--blue-deep) 70%, var(--muted)); stroke-dasharray: 2 6; }.uc-ucc .sw-dot{ stroke: var(--surface); stroke-width: 2; }.uc-ucc .sw-dot--a{ fill: var(--mint-deep); }.uc-ucc .sw-dot--b{ fill: var(--blue-deep); }.uc-ucc .sw-legend{ position: absolute; top: 6%; left: 50%; transform: translateX(-50%); display: flex; gap: 0.9rem; background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); padding: 0.4em 0.85em; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }.uc-ucc .sw-legend span{ display: inline-flex; align-items: center; gap: 0.4em; }.uc-ucc .sw-legend b{ color: var(--fg); font-variant-numeric: tabular-nums; }.uc-ucc .sw-key{ width: 8px; height: 8px; border-radius: 2px; flex: none; }.uc-ucc .sw-key--a{ background: var(--mint-deep); }.uc-ucc .sw-key--b{ background: var(--blue-deep); }.uc-ucc .sw-chart-x{ display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--faint); font-family: var(--font-mono); }@media (prefers-reduced-motion: no-preference){.uc-ucc .sw-line{ stroke-dasharray: 520; stroke-dashoffset: 520; animation: sw-draw 1.4s var(--ease-out) 0.2s forwards; }.uc-ucc .sw-line--b{ animation-delay: 0.35s; }.uc-ucc .sw-dot{ opacity: 0; animation: sw-fade 0.01s linear 1.5s forwards; }}@keyframes sw-draw{ to { stroke-dashoffset: 0; } }@keyframes sw-fade{ to { opacity: 1; } }.uc-ucc .sw-tile-ico{ display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--card-line); color: var(--fg); }.uc-ucc .sw-card.sw-tile{ transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }.uc-ucc .sw-card.sw-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }.uc-ucc .sw-bar{ display: flex; align-items: center; gap: var(--space-4) var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }.uc-ucc .sw-brands{ display: inline-flex; }.uc-ucc .sw-brand{ display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--card-line); margin-left: -8px; font-size: 0.82rem; font-weight: var(--fw-bold); color: var(--muted); box-shadow: var(--shadow-sm); }.uc-ucc .sw-brand:first-child{ margin-left: 0; }.uc-ucc .sw-bar-note{ flex: 1; min-width: 16rem; font-size: 0.92rem; color: var(--muted); }.uc-ucc .sw-bar-note b{ color: var(--fg); font-weight: var(--fw-semibold); }.uc-ucc .sw-arw{ color: var(--faint); }.uc-ucc .sw-bar .btn{ flex: none; }@media (max-width: 900px){.uc-ucc .sw-head{ grid-template-columns: 1fr; align-items: start; }.uc-ucc .sw-lede{ padding-bottom: 0; }.uc-ucc .sw-bento{ grid-template-columns: 1fr 1fr; }.uc-ucc .sw-card--lg{ grid-column: span 2; }.uc-ucc .sw-tile{ grid-column: span 2; min-height: 180px; }}@media (max-width: 620px){.uc-ucc .sw-bento{ grid-template-columns: 1fr; }.uc-ucc .sw-card--lg, .uc-ucc .sw-tile{ grid-column: span 1; }.uc-ucc .sw-bar{ flex-direction: column; align-items: flex-start; }}.uc-ucc .ceoletter-grid{ display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }.uc-ucc .ceoletter-aside{ align-self: stretch; display: flex; flex-direction: column; }.uc-ucc .ceoletter-label{ font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; color: rgba(255,255,255,.92); }.uc-ucc .ceoletter-pull{ margin: auto 0 var(--space-2); padding-top: var(--space-7); max-width: 20ch; font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); line-height: 1.28; letter-spacing: -0.01em; color: rgba(255,255,255,.82); position: relative; }.uc-ucc .ceoletter-pull::before{ content: "\201C"; display: block; font-family: var(--font-serif); font-size: 3.2rem; line-height: 0.5; color: var(--red); margin-bottom: var(--space-3); }.uc-ucc .ceoletter-card{ background: #faf8f4; color: #1b1a17; border-radius: var(--r-xl); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }.uc-ucc .ceoletter-body{ display: flex; flex-direction: column; gap: var(--space-4); }.uc-ucc .ceoletter-body p{ font-size: 1.02rem; line-height: 1.72; color: #4a463f; }.uc-ucc .ceoletter-lede{ font-family: var(--font-serif) !important; font-size: 1.25rem !important; line-height: 1.5 !important; letter-spacing: -0.01em; color: #1b1a17 !important; }.uc-ucc .ceoletter-sign{ margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(27,26,23,.12); display: flex; flex-direction: column; gap: var(--space-3); }.uc-ucc .ceoletter-sig{ display: block; width: clamp(150px, 42%, 205px); aspect-ratio: 289 / 60; background-color: #1b1a17; -webkit-mask: url("/wp-content/uploads/2026/09/protuno-img-signature.svg") left center / contain no-repeat; mask: url("/wp-content/uploads/2026/09/protuno-img-signature.svg") left center / contain no-repeat; }.uc-ucc .ceoletter-person{ display: flex; align-items: center; gap: 0.85rem; }.uc-ucc .ceoletter-avatar{ position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--lilac) 45%, #fff); border: 1px solid rgba(27,26,23,.12); }.uc-ucc .ceoletter-avatar-fallback{ font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 1rem; letter-spacing: 0.02em; color: var(--lilac-deep); }.uc-ucc .ceoletter-avatar img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }.uc-ucc .ceoletter-who{ font-size: 0.92rem; line-height: 1.5; color: #6a655c; }.uc-ucc .ceoletter-who b{ display: block; font-weight: var(--fw-bold); color: #1b1a17; }.uc-ucc .ceoletter-note{ margin-top: var(--space-7); display: flex; justify-content: center; text-align: center; font-size: 0.9rem; color: rgba(255,255,255,.55); }.uc-ucc .gbadge{ width: 300px; aspect-ratio: 300 / 356; position: relative; filter: drop-shadow(0 26px 46px rgba(60,40,120,.4)); }.uc-ucc .gb-face{ position: absolute; inset: 0; overflow: hidden; border-radius: 47% / 41%; isolation: isolate; background: linear-gradient(198deg, var(--lilac-deep) 0%, var(--blue-deep) 34%, var(--red) 76%, var(--red-deep) 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.4), inset 0 -22px 48px rgba(0,0,0,.2); }.uc-ucc .gb-shader{ z-index: 0; border-radius: inherit; mix-blend-mode: soft-light; opacity: 0.9; }.uc-ucc .gb-face::before{ content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: radial-gradient(126% 58% at 50% -10%, rgba(255,255,255,.4), transparent 55%), radial-gradient(76% 42% at 50% 60%, rgba(0,0,0,.24), transparent 72%); }.uc-ucc .gb-arc{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }.uc-ucc .gb-arc text{ fill: rgba(255,255,255,.95); font-family: var(--font-sans); font-weight: var(--fw-bold); text-transform: uppercase; }.uc-ucc .gb-arc-t{ font-size: 16px; letter-spacing: 4.5px; }.uc-ucc .gb-arc-b{ font-size: 14px; letter-spacing: 7px; }.uc-ucc .gb-emblem{ position: absolute; top: 25%; left: 0; right: 0; z-index: 2; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }.uc-ucc .gb-title{ position: absolute; left: 0; right: 0; top: 40%; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: 0.86; text-align: center; font-family: var(--font-sans); font-weight: 800; font-size: 3rem; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; transform: perspective(620px) rotateX(15deg); transform-origin: center bottom; text-shadow: 0 1px 0 #b7314a, 0 2px 0 #ab2c43, 0 3px 0 #9f273c, 0 4px 0 #932236, 0 5px 0 #871d30, 0 7px 8px rgba(0,0,0,.32), 0 12px 22px rgba(0,0,0,.3); }@media (max-width: 760px){.uc-ucc .gbadge{ width: 260px; }.uc-ucc .gb-title{ font-size: 2.6rem; }}@media (prefers-reduced-motion: no-preference){.uc-ucc .gbadge{ transition: transform var(--dur) var(--ease-out); }.uc-ucc .gbadge:hover{ transform: translateY(-4px) rotate(-1deg); }}@media (max-width: 760px){.uc-ucc .ceoletter-grid{ grid-template-columns: 1fr; gap: var(--space-4); }.uc-ucc .ceoletter-label{ position: static; }}.uc-ucc{ --band-r: clamp(20px, 1rem + 1.6vw, 32px); }.uc-ucc .bands{ background: var(--ink-panel); }.uc-ucc .band-card{ position: relative; z-index: var(--z-content); background: var(--bg); border-radius: var(--band-r); overflow: clip; --band-inset: 0px; clip-path: inset(0 var(--band-inset) round var(--band-r)); }.uc-ucc .band-card--first{ border-radius: 0 0 var(--band-r) var(--band-r); padding-bottom: var(--space-6); clip-path: inset(0 var(--band-inset) round 0 0 var(--band-r) var(--band-r)); }.uc-ucc .band-dark{ position: relative; background: var(--ink-panel); color: var(--on-panel); --fg: var(--on-panel); --muted: var(--on-panel-soft); --faint: var(--on-panel-faint); --line: var(--ink-panel-line); --card-line: var(--ink-panel-line); }.uc-ucc .band-dark .trap-card--pain{ background: color-mix(in srgb, #fff 4%, var(--ink-panel)); border-color: rgba(255, 255, 255, .1); }.uc-ucc .band-dark .btn-primary, .uc-ucc .band-dark .btn-accent{ background: var(--on-panel); color: var(--ink-panel); border-color: transparent; }.uc-ucc .band-dark .btn-primary:hover, .uc-ucc .band-dark .btn-accent:hover{ background: #fff; }.uc-ucc .band-dark .btn-secondary{ background: transparent; color: var(--on-panel); border-color: var(--ink-panel-line); }.uc-ucc .band-dark .btn-secondary:hover{ border-color: var(--on-panel); background: color-mix(in srgb, #fff 6%, transparent); }@keyframes shimmer-slide{ to { transform: translate(calc(100cqw - 100%), 0); } }@keyframes spin-around{ 0% { transform: translateZ(0) rotate(0); } 15%, 35% { transform: translateZ(0) rotate(90deg); } 65%, 85% { transform: translateZ(0) rotate(270deg); } 100% { transform: translateZ(0) rotate(360deg); } }@keyframes shiny-text{ 0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0; } 30%, 60% { background-position: calc(100% + var(--shiny-width)) 0; } }.uc-ucc .animate-shimmer-slide{ animation: shimmer-slide var(--speed) ease-in-out infinite alternate; }.uc-ucc .animate-spin-around{ animation: spin-around calc(var(--speed) * 2) infinite linear; }.uc-ucc .animate-shiny-text{ animation: shiny-text 8s infinite; }@media (prefers-reduced-motion: reduce){.uc-ucc .animate-shimmer-slide, .uc-ucc .animate-spin-around, .uc-ucc .animate-shiny-text{ animation: none !important; }}@keyframes ps-drift{ 0% { transform: translate(-12%, -10%) rotate(0deg) scale(1.5); } 50% { transform: translate(10%, 8%) rotate(180deg) scale(1.7); } 100% { transform: translate(-12%, -10%) rotate(360deg) scale(1.5); } }.uc-ucc .ps-mesh{ display: block; }.uc-ucc .ps-mesh-layer{ position: absolute; inset: -30%; background: radial-gradient(38% 42% at 22% 28%, var(--ps-c1) 0%, transparent 60%), radial-gradient(42% 46% at 80% 30%, var(--ps-c3) 0%, transparent 62%), radial-gradient(50% 52% at 60% 82%, var(--ps-c1) 0%, transparent 60%), radial-gradient(46% 48% at 28% 78%, var(--ps-c3) 0%, transparent 60%), var(--ps-c2); filter: blur(24px) saturate(1.05); will-change: transform; animation: ps-drift var(--ps-dur, 18s) ease-in-out infinite; }@media (prefers-reduced-motion: reduce){.uc-ucc .ps-mesh-layer{ animation: none; }}.uc-ucc .feat-hero{ position: relative; overflow: clip; padding-top: calc(var(--nav-h) + var(--space-7)); padding-bottom: var(--space-6); text-align: center; }.uc-ucc .feat-hero .container{ position: relative; z-index: var(--z-content); }.uc-ucc .feat-hero h1{ margin: var(--space-3) auto var(--space-4); max-width: 16ch; }.uc-ucc .feat-hero .ucx-lead{ max-width: 60ch; margin: 0 auto; }.uc-ucc .feat-hero .cluster{ justify-content: center; margin-top: var(--space-5); }.uc-ucc .fmap-band{ padding-block: var(--space-6) var(--space-7); }.uc-ucc .fmap{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }.uc-ucc .fmap-frame{ padding: 4px; border: 1px solid var(--card-line); border-radius: calc(var(--r-xl) + 4px); background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }.uc-ucc .fm-cell{ position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); grid-column: span 1; min-height: 212px; border-radius: var(--r-xl); padding: var(--space-5); background: var(--surface); border: 1px solid var(--card-line); color: var(--fg); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }.uc-ucc .fm-cell::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.13; mix-blend-mode: soft-light; }.uc-ucc .fm-cell > *{ position: relative; z-index: 1; }.uc-ucc .fm-cell:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--fg) 20%, var(--card-line)); }.uc-ucc .fm-cell--big{ grid-column: span 2; min-height: clamp(340px, 30vw, 420px); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }.uc-ucc .fm-top{ display: flex; align-items: flex-start; justify-content: space-between; }.uc-ucc .fm-ico{ display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--canvas); border: 1px solid var(--card-line); color: var(--fg); }.uc-ucc .fm-n{ font-family: var(--font-serif); font-size: 1.1rem; color: color-mix(in srgb, var(--fg) 45%, transparent); }.uc-ucc .fm-body h3{ font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--fg); }.uc-ucc .fm-body p{ font-size: var(--fs-small); color: var(--muted); margin-top: var(--space-1); line-height: 1.5; }.uc-ucc .fm-meta{ display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-3); font-size: 0.74rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; color: var(--fg); }.uc-ucc .fm-meta .arw{ transition: transform var(--dur) var(--ease-out); }.uc-ucc .fm-cell:hover .fm-meta .arw{ transform: translateX(3px); }.uc-ucc .fm-cell--big .fm-body h3{ font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); }.uc-ucc .fm-cell--big .fm-body p{ max-width: 34ch; }.uc-ucc .fm-cell--shader{ background: linear-gradient(140deg, var(--mint) 0%, var(--lilac) 54%, var(--blue) 100%); }.uc-ucc .fm-cell--shader::before{ content: none; }.uc-ucc .fm-shader{ position: absolute; inset: 0; z-index: 0; }.uc-ucc .fm-shader canvas{ border-radius: inherit; width: 100% !important; height: 100% !important; }.uc-ucc .fm-cell--shader::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(to bottom, transparent 44%, color-mix(in srgb, #fff 60%, transparent)); }.uc-ucc .fm-cell--shader > *:not(.fm-shader){ position: relative; z-index: 2; }.uc-ucc .fm-cell--shader .fm-body h3{ color: var(--card-ink); }.uc-ucc .fm-cell--shader .fm-body p{ color: var(--card-ink-soft); }.uc-ucc .fm-cell--shader .fm-ico{ background: #fff; border-color: transparent; color: var(--card-ink); }.uc-ucc .fm-cell--shader .fm-n{ color: color-mix(in srgb, var(--card-ink) 45%, transparent); }.uc-ucc .fm-cell--shader .fm-meta{ color: var(--card-ink); }@media (max-width: 900px){.uc-ucc .fmap{ grid-template-columns: repeat(2, 1fr); }.uc-ucc .fm-cell--big{ grid-column: span 2; min-height: 300px; }}@media (max-width: 560px){.uc-ucc .fmap{ grid-template-columns: 1fr; }.uc-ucc .fm-cell--big{ grid-column: span 1; }}.uc-ucc .chapters{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }.uc-ucc .ch-rail{ position: sticky; top: calc(var(--nav-h) + var(--space-5)); padding-block: var(--space-5); }.uc-ucc .ch-rail nav{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }.uc-ucc .ch-link{ display: flex; align-items: center; padding: 0.6em 0 0.6em 1.3em; font-size: 0.8rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); transition: color var(--dur-fast); position: relative; }.uc-ucc .ch-link-n{ display: none; }.uc-ucc .ch-link:hover{ color: var(--muted); }.uc-ucc .ch-link.ucx-is-active{ color: var(--fg); }.uc-ucc .ch-link.ucx-is-active::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--red); }.uc-ucc .chapter{ scroll-margin-top: calc(var(--nav-h) + 20px); padding-block: var(--space-7) var(--space-5); }@media (max-width: 900px){.uc-ucc .chapters{ grid-template-columns: minmax(0, 1fr); }.uc-ucc .ch-rail{ position: sticky; top: var(--nav-h); z-index: 40; background: color-mix(in srgb, var(--canvas) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-block: var(--space-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }.uc-ucc .ch-rail nav{ flex-direction: row; align-items: center; overflow-x: auto; border-top: 0; gap: var(--space-2); scrollbar-width: none; }.uc-ucc .ch-rail nav::-webkit-scrollbar{ display: none; }.uc-ucc .ch-link{ white-space: nowrap; padding: 0.5em 0.95em; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); letter-spacing: 0.08em; }.uc-ucc .ch-link.ucx-is-active{ border-color: var(--fg); color: var(--fg); }.uc-ucc .ch-link.ucx-is-active::before{ display: none; }}.uc-ucc .feat{ padding-block: var(--space-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 60px); }.uc-ucc .chapter .feat:first-of-type{ border-top: 0; padding-top: var(--space-5); }.uc-ucc .chapter .feat:last-of-type{ padding-bottom: var(--space-4); }.uc-ucc .feat-head{ max-width: 60ch; }.uc-ucc .feat-eyebrow{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-3); flex-wrap: wrap; }.uc-ucc .feat-h{ font-family: var(--font-serif); font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem); font-weight: var(--fw-regular); letter-spacing: -0.02em; line-height: 1.2; }.uc-ucc .feat-sub{ color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; margin-top: var(--space-3); max-width: 48ch; }.uc-ucc .feat-split{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.75rem, 1.25rem + 5vw, 6rem); align-items: center; margin-top: var(--space-6); }.uc-ucc .feat--rev .feat-split{ direction: rtl; }.uc-ucc .feat--rev .feat-split > *{ direction: ltr; }@media (max-width: 900px){.uc-ucc .feat-split{ grid-template-columns: 1fr; }.uc-ucc .feat--rev .feat-split{ direction: ltr; }}.uc-ucc .feat-split > *:last-child{ background: none; padding: 0; }.uc-ucc .feat-split > *:last-child > .cp, .uc-ucc .feat-split > *:last-child > .video-frame, .uc-ucc .feat-split > *:last-child > .ba-stage{ width: 100%; }.uc-ucc .cap-list{ display: block; margin-top: var(--space-6); border-top: 1px solid var(--line); }.uc-ucc .cap-list li{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem); border-bottom: 1px solid var(--line); font-size: 1.05rem; line-height: 1.4; color: var(--ink-90); transition: color var(--dur-fast) var(--ease-out); }.uc-ucc .cap-list .cap-txt{ min-width: 0; }.uc-ucc .cap-list .cap-arw{ flex: none; display: grid; place-items: center; color: var(--faint); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }.uc-ucc .cap-list li:hover{ color: var(--fg); }.uc-ucc .cap-list li:hover .cap-arw{ transform: translateX(4px); color: var(--red-aa); }.uc-ucc .cap-list code{ font-family: var(--font-mono); font-size: 0.88em; background: color-mix(in srgb, var(--fg) 5%, var(--surface)); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }.uc-ucc .why-line{ margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: color-mix(in srgb, var(--red) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--red) 16%, transparent); font-size: 0.96rem; }.uc-ucc .why-line b{ color: var(--red-aa); }.uc-ucc .cp{ border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }.uc-ucc .cp-code{ background: #111114; padding: var(--space-4); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.8; color: #e8e8ea; overflow-x: auto; }.uc-ucc .cp-code .k{ color: #FF7A7A; }.uc-ucc .cp-code .s{ color: #BDEFE7; }.uc-ucc .cp-code .ucx-p{ color: #E7DDF9; }.uc-ucc .cp-code .ucx-n{ color: #EAF3A8; }.uc-ucc .cp-code .ucx-c{ color: #6E6E74; }.uc-ucc .cp-prev{ padding: var(--space-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--fg) 3%, var(--surface)); border: 1px solid var(--card-line); display: flex; flex-direction: column; gap: 0.6rem; }.uc-ucc .cp > .builder-tabs{ border-radius: var(--r-md); }.uc-ucc .provider-row{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-5); }.uc-ucc .provider{ font-size: 0.78rem; font-weight: var(--fw-semibold); color: var(--muted); padding: 0.4em 0.8em; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }.uc-ucc .mcp-diagram{ display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); }.uc-ucc .mcp-node{ text-align: center; padding: var(--space-4); border-radius: var(--r-md); border: 1px solid var(--card-line); background: var(--canvas); font-weight: var(--fw-semibold); font-size: 0.9rem; }.uc-ucc .mcp-node .mcp-ico{ display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); margin-bottom: 0.5rem; }.uc-ucc .mcp-node.gateway{ background: var(--ink); color: var(--canvas); border-color: var(--ink); }.uc-ucc .mcp-node.gateway .mcp-ico{ background: rgba(255,255,255,.1); color: var(--red); }.uc-ucc .mcp-node.agent .mcp-ico{ background: color-mix(in srgb,var(--lilac) 55%,var(--surface)); color: var(--lilac-deep); }.uc-ucc .mcp-node.wp .mcp-ico{ background: color-mix(in srgb,var(--blue) 55%,var(--surface)); color: var(--blue-deep); }.uc-ucc .mcp-wire{ width: 100%; height: 2px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--faint) 0 5px, transparent 5px 10px); position: relative; }.uc-ucc .mcp-wire::after{ content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: var(--faint); }@media (max-width: 760px){.uc-ucc .mcp-diagram{ grid-template-columns: 1fr; }.uc-ucc .mcp-wire{ width: 2px; height: 24px; justify-self: center; background: repeating-linear-gradient(180deg, var(--faint) 0 5px, transparent 5px 10px); }.uc-ucc .mcp-wire::after{ right: -3px; top: auto; bottom: -2px; border: 4px solid transparent; border-top-color: var(--faint); }}.uc-ucc .abilities{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }.uc-ucc .ab-group{ border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-4) var(--space-5); background: var(--surface); }.uc-ucc .ab-group h4{ font-size: 0.82rem; letter-spacing: 0.01em; color: var(--red-aa); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }.uc-ucc .ab-group .ab-tags{ display: flex; flex-wrap: wrap; gap: 0.4rem; }.uc-ucc .ab-tag{ font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-90); background: color-mix(in srgb,var(--fg) 5%,var(--surface)); border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; }@media (max-width: 820px){.uc-ucc .abilities{ grid-template-columns: 1fr 1fr; }}@media (max-width: 520px){.uc-ucc .abilities{ grid-template-columns: 1fr; }}.uc-ucc .ba-stage{ position: relative; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); min-height: 300px; overflow: hidden; margin-top: var(--space-5); }.uc-ucc .ba-view{ position: absolute; inset: 0; padding: var(--space-5); }.uc-ucc .ba-toggle{ margin-bottom: var(--space-2); }.uc-ucc .check-bento{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .check-cell{ border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-5); background: var(--surface); box-shadow: var(--shadow-sm); }.uc-ucc .check-cell .ck-ico{ width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--space-3); color: var(--mint-deep); background: color-mix(in srgb,var(--mint) 40%,var(--surface)); }.uc-ucc .check-cell h3{ font-size: 1.02rem; font-weight: var(--fw-bold); }.uc-ucc .check-cell p{ color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }@media (max-width: 820px){.uc-ucc .check-bento{ grid-template-columns: 1fr 1fr; }}@media (max-width: 520px){.uc-ucc .check-bento{ grid-template-columns: 1fr; }}.uc-ucc .roadmap-chips{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .rm-chip{ flex: 1; min-width: 200px; border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-5); background: var(--surface); box-shadow: var(--shadow-sm); }.uc-ucc .rm-chip .rm-status{ display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; font-weight: var(--fw-bold); }.uc-ucc .rm-chip .rm-name{ font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-top: var(--space-2); }.uc-ucc .rm-chip.live{ border-color: color-mix(in srgb,var(--mint-deep) 40%, var(--card-line)); }.uc-ucc .rm-chip.live .rm-status{ color: var(--mint-deep); }.uc-ucc .rm-chip.soon .rm-status{ color: var(--blue-deep); }.uc-ucc .rm-chip .rm-dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; }.uc-ucc .band-dark .rm-chip{ background: color-mix(in srgb, #fff 5%, var(--ink-panel)); border-color: rgba(255,255,255,.12); box-shadow: none; }.uc-ucc .band-dark .rm-chip.live{ border-color: color-mix(in srgb, var(--mint) 30%, transparent); }.uc-ucc .band-dark .rm-chip.live .rm-status{ color: var(--mint); }.uc-ucc .band-dark .rm-chip.soon .rm-status{ color: var(--blue); }.uc-ucc .uc-cards{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-6); }.uc-ucc .uc-card{ border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: var(--space-6); background: var(--surface); box-shadow: var(--shadow-sm); }.uc-ucc .uc-card .uc-ico{ width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--space-4); }.uc-ucc .uc-card h3{ font-size: var(--fs-h3); font-weight: var(--fw-bold); }.uc-ucc .uc-card p{ color: var(--muted); margin-top: var(--space-2); font-size: 0.94rem; }@media (max-width: 820px){.uc-ucc .uc-cards{ grid-template-columns: 1fr; }}.uc-ucc .sec-center{ text-align: center; }.uc-ucc .sec-center .feat-head, .uc-ucc .sec-center .cluster{ margin-inline: auto; }.uc-ucc .blk{ border-radius: var(--r-sm); }.uc-ucc .blk.on{ opacity: 1; transform: none; }.uc-ucc .demo-blk-title{ height: 20px; width: 70%; background: color-mix(in srgb, var(--fg) 82%, transparent); border-radius: 5px; }.uc-ucc .demo-blk-text{ height: 10px; width: 90%; background: var(--card-line); border-radius: 5px; }.uc-ucc .demo-blk-text.short{ width: 60%; }.uc-ucc .demo-blk-btn{ height: 30px; width: 120px; background: var(--red); border-radius: var(--r-pill); }.uc-ucc .demo-blk-media{ height: 84px; background: repeating-linear-gradient(135deg, color-mix(in srgb,var(--mint) 55%,var(--surface)) 0 12px, color-mix(in srgb,var(--lilac) 55%,var(--surface)) 12px 24px); border-radius: var(--r-sm); }.uc-ucc .mcp-diagram.beams{ grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); position: relative; }.uc-ucc .mcp-diagram.beams .mcp-node{ position: relative; z-index: 2; }@media (max-width: 760px){.uc-ucc .mcp-diagram.beams{ grid-template-columns: 1fr; gap: var(--space-6); }}.uc-ucc .cf{ display: grid; grid-template-columns: minmax(0, 1fr) 1.02fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; margin-top: var(--space-3); }.uc-ucc .cf-main{ min-width: 0; }.uc-ucc .cf-intro{ max-width: 26ch; margin-bottom: var(--space-5); }.uc-ucc .cf-eyebrow{ display: inline-block; font-size: 0.72rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); margin-bottom: var(--space-3); }.uc-ucc .cf-statement{ font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); }.uc-ucc .cf-list{ display: flex; flex-direction: column; border-top: 1px solid var(--line); }.uc-ucc .cf-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; text-align: left; background: none; cursor: pointer; padding: clamp(1.05rem, 0.85rem + 0.7vw, 1.5rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 90px); transition: border-color var(--dur) var(--ease-out); }.uc-ucc .cf-row-title{ font-family: var(--font-serif); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); font-weight: var(--fw-regular); letter-spacing: -0.01em; line-height: 1.3; color: var(--ink-90); transition: color var(--dur-fast) var(--ease-out); }.uc-ucc .cf-row-arw{ flex: none; color: var(--faint); transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out); }.uc-ucc .cf-row:hover .cf-row-title, .uc-ucc .cf-row.ucx-is-active .cf-row-title{ color: var(--fg); }.uc-ucc .cf-row:hover .cf-row-arw, .uc-ucc .cf-row.ucx-is-active .cf-row-arw{ color: var(--red); transform: translateX(5px); }.uc-ucc .cf-row:focus-visible{ outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }.uc-ucc .cf-visual{ position: sticky; top: calc(var(--nav-h) + var(--space-5)); }.uc-ucc .cf-frame{ position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-4); aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--card-line); color: var(--card-ink); background-color: var(--mint); background-size: cover; animation: cf-swap var(--dur) var(--ease-out); }.uc-ucc .cf-frame::before{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.12; mix-blend-mode: soft-light; }.uc-ucc .cf-frame::after{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, color-mix(in srgb, #fff 34%, transparent), transparent 55%); }.uc-ucc .cf-play{ position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, #fff 82%, transparent); color: var(--red); box-shadow: 0 6px 20px rgba(0,0,0,.12); }.uc-ucc .cf-cap{ position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.74rem; color: color-mix(in srgb, var(--card-ink) 64%, transparent); background: color-mix(in srgb, #fff 55%, transparent); padding: 0.3em 0.75em; border-radius: var(--r-pill); }.uc-ucc .cf-note{ margin-top: var(--space-4); animation: cf-swap var(--dur) var(--ease-out); }.uc-ucc .cf-tag{ display: inline-block; margin-bottom: var(--space-2); font-size: 0.6rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); background: color-mix(in srgb, var(--fg) 5%, transparent); border: none; padding: 0.28em 0.62em; border-radius: var(--r-pill); white-space: nowrap; }.uc-ucc .cf-note-desc{ font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 48ch; }.uc-ucc .cf-note-desc code{ font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-90); background: color-mix(in srgb, var(--fg) 6%, var(--surface)); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }@keyframes cf-swap{ from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }@media (max-width: 900px){.uc-ucc .cf{ grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }.uc-ucc .cf-visual{ position: static; }.uc-ucc .cf-frame{ aspect-ratio: 16 / 9; }}@media (prefers-reduced-motion: reduce){.uc-ucc .cf-frame, .uc-ucc .cf-note{ animation: none; }.uc-ucc .cf-row-arw{ transition: color var(--dur-fast) var(--ease-out); }}.uc-ucc{ --font-sans: "Zalando Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-serif: var(--font-sans); --ink: #0a0a0a; --canvas: #ffffff; --surface: #ffffff; --red: #fd6a35; --red-deep: #e65a2b; --red-aa: #cc4b23; --accent: #fd6a35; --ink-90: #171717; --muted: #737373; --faint: #a3a3a3; --line: #ebebeb; --card-line: #ebebeb; --placeholder: #f0f0f0; --ink-panel: #0a0a0a; --ink-panel-line: rgba(255, 255, 255, 0.10); --on-panel: #ffffff; --on-panel-soft: rgba(255, 255, 255, 0.72); --on-panel-faint: rgba(255, 255, 255, 0.5); --card-ink: #0a0a0a; --card-ink-soft: #4a4c56; --bg: var(--canvas); --fg: var(--ink); background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }@media (prefers-color-scheme: dark){.uc-ucc{ --ink: #0a0a0a; --canvas: #ffffff; --surface: #ffffff; --red: #fd6a35; --red-deep: #e65a2b; --red-aa: #cc4b23; --ink-90: #171717; --muted: #737373; --faint: #a3a3a3; --line: #ebebeb; --card-line: #ebebeb; --placeholder: #f0f0f0; --ink-panel: #0a0a0a; --ink-panel-line: rgba(255, 255, 255, 0.10); }}.uc-ucc .display-xl{ font-family: var(--font-sans); font-weight: 500; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -1.3px; text-wrap: balance; }.uc-ucc .display{ font-family: var(--font-sans); font-weight: 500; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -1px; text-wrap: balance; }.uc-ucc .h1{ font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06; letter-spacing: -0.5px; text-wrap: balance; }.uc-ucc .h2{ font-family: var(--font-sans); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.32px; text-wrap: balance; }.uc-ucc .h3{ font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.33; letter-spacing: -0.18px; }.uc-ucc .ucx-lead{ font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -0.18px; color: var(--muted); }.uc-ucc .body{ font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.16px; }.uc-ucc .small{ font-size: 12px; line-height: 1.5; }.uc-ucc .ucx-eyebrow{ font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; color: var(--red); }.uc-ucc .bands{ background: var(--canvas); }.uc-ucc .band-card, .uc-ucc .band-card--first{ background: var(--canvas); border-radius: 0; padding-bottom: 0; --band-inset: 0px; -webkit-clip-path: none; clip-path: none; }.uc-ucc .band-dark{ background: var(--canvas); color: var(--ink); --fg: var(--ink); --muted: #737373; --faint: #a3a3a3; --line: #ebebeb; --card-line: #ebebeb; }.uc-ucc .band-dark .trap-card--pain{ background: color-mix(in srgb, var(--ink-panel-line) 40%, transparent); border-color: var(--ink-panel-line); }.uc-ucc .ceoletter-label{ color: var(--ink); }.uc-ucc .ceoletter-pull{ color: color-mix(in srgb, var(--ink) 78%, transparent); }.uc-ucc .ceoletter-card{ box-shadow: 0 24px 60px -34px rgba(16, 24, 40, 0.28); }.uc-ucc a.pf-solid{ color: #ffffff; }.uc-ucc a.pf-onchrome{ color: #ffffff; }.uc-ucc .cta-primary .uc-note{ margin-top: var(--spacing-sprout-8); }.uc-ucc .f2w .ucx-sec-head{ display: block; }.uc-ucc #testimonials .mt-3{ margin-top: 0.75rem; }.uc-ucc #testimonials .mt-sprout-12{ margin-top: var(--spacing-sprout-12); }.uc-ucc #testimonials .mt-sprout-48{ margin-top: var(--spacing-sprout-48); }.uc-ucc #testimonials .mb-sprout-16{ margin-bottom: var(--spacing-sprout-16); }.uc-ucc .mp-track{ height: auto; margin-top: 0; }.uc-ucc .mp-sticky{ position: static; }.uc-ucc{ overflow-x: clip; overflow-y: visible; }.uc-ucc{ --uc-gutter: 40px; --uc-container-max: 1320px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --acc: #fd6a35; --acc2: #ff8a5b; --txf: #a3a3a3; --txd: #737373; --tx: #0a0a0a; --cardbd: #ebebeb; --mist: #f4f4f4; --r-card: 14px; }@media (max-width: 1024px){.uc-ucc{ --uc-gutter: 32px; }}@media (max-width: 700px){.uc-ucc{ --uc-gutter: 20px; }}.uc-ucc .section.ax{ --ax-gap: 40px; --ax-gutter: max(var(--uc-gutter), calc((100vw - var(--uc-container-max) + 2 * var(--uc-gutter)) / 2)); --ax-col: calc((min(100vw, var(--uc-container-max)) - 2 * var(--uc-gutter) - 2 * var(--ax-gap)) / 3); padding-bottom: 40px; }.uc-ucc .ax .ucx-sec-head{ max-width: 900px; margin: 0 auto; text-align: center; }.uc-ucc .ax .ucx-sec-head .ucx-lead{ margin-left: auto; margin-right: auto; max-width: 760px; }.uc-ucc .ax-track{ position: relative; height: 540vh; margin-top: 10px; }.uc-ucc .ax-pin{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }.uc-ucc .ax-stage{ display: flex; flex-direction: column; gap: clamp(24px, 4.4vh, 52px); width: 100%; }.uc-ucc .ax-window{ overflow: hidden; padding-block: 8px; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ax-gutter), #000 calc(100% - var(--ax-gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ax-gutter), #000 calc(100% - var(--ax-gutter)), transparent 100%); }.uc-ucc .ax-row{ display: grid; grid-auto-flow: column; grid-auto-columns: var(--ax-col); gap: var(--ax-gap); will-change: transform; }.uc-ucc .ax-media-wrap{ width: 100%; }.uc-ucc .ax-col{ display: flex; flex-direction: column; gap: 18px; opacity: 1; transition: opacity 0.45s var(--ease); }.uc-ucc .ax-col.is-dim{ opacity: 0.42; }.uc-ucc .ax-bar{ position: relative; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }.uc-ucc .ax-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--acc2), var(--acc)); box-shadow: 0 0 10px rgba(253, 106, 53, 0.35); }.uc-ucc .ax-copy{ display: flex; flex-direction: column; gap: 8px; }.uc-ucc .ax-h{ display: flex; align-items: flex-start; gap: 12px; }.uc-ucc .ax-num{ flex: 0 0 auto; margin-top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 14px; font-weight: 700; color: var(--txf); background: #fff; border: 1px solid var(--cardbd); transition: color 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }.uc-ucc .ax-col.ucx-is-active .ax-num, .uc-ucc .ax-col.ucx-is-done .ax-num{ color: #fff; background: var(--acc); border-color: var(--acc); }.uc-ucc .ax-col.ucx-is-active .ax-num{ box-shadow: 0 0 0 5px rgba(253, 106, 53, 0.14), 0 0 18px rgba(253, 106, 53, 0.38); }.uc-ucc .ax-h h3{ margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); line-height: 24px; }.uc-ucc .ax-copy p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }.uc-ucc .ax-media{ position: relative; width: 100%; max-width: calc(60vh * 1240 / 584); margin-inline: auto; aspect-ratio: 1920 / 1050; border-radius: 20px; background: #fff; border: 1px solid var(--cardbd); }.uc-ucc .proof-grid{ max-width: calc(60vh * 1240 / 584); margin-inline: auto; margin-top: -28px; }.uc-ucc .dm{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; font-size: 2.4cqw; color: #fff; }.uc-ucc .dm-bar{ flex: none; display: flex; align-items: center; gap: 0.7em; padding: 1.1em 1.4em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.92em; font-weight: 600; color: rgba(255, 255, 255, 0.62); }.uc-ucc .dm-dots{ display: inline-flex; gap: 0.4em; }.uc-ucc .dm-dots i{ width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }.uc-ucc .dm-body{ display: flex; flex-direction: column; justify-content: center; gap: 0.9em; padding: 1.3em 1.4em; flex: 1; }.uc-ucc .dm-field{ display: flex; flex-direction: column; gap: 0.4em; }.uc-ucc .dm-field label{ font-size: 0.82em; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.5); }.uc-ucc .dm-input{ padding: 0.68em 0.85em; border-radius: 0.55em; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.95em; color: #fff; }.uc-ucc .dm-swatches{ display: flex; gap: 0.55em; margin-top: 0.15em; }.uc-ucc .dm-swatches i{ width: 1.5em; height: 1.5em; border-radius: 0.42em; border: 1px solid rgba(255, 255, 255, 0.16); }.uc-ucc .dm-code{ flex: 1; margin: 0; padding: 1.3em 1.5em; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.98em; line-height: 1.7; color: rgba(255, 255, 255, 0.82); white-space: pre; overflow: hidden; align-content: center; }.uc-ucc .dm-code .k{ color: #ff8a5b; }.uc-ucc .dm-code .s{ color: #7ee0c8; }.uc-ucc .ax-screen{ position: absolute; inset: 4px; border-radius: 16px; overflow: hidden; background: var(--mist); }.uc-ucc .ax-slide{ position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }.uc-ucc .ax-track.is-off{ display: none; }.uc-ucc .ax-stack{ display: none; margin-top: 48px; flex-direction: column; gap: 44px; }.uc-ucc .ax-s{ display: flex; flex-direction: column; gap: 14px; }.uc-ucc .ax-s .ax-num{ color: #fff; background: var(--acc); border-color: var(--acc); }.uc-ucc .ax-s h3{ margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); line-height: 24px; }.uc-ucc .ax-s p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }.uc-ucc .ax-s-frame{ padding: 4px; border-radius: var(--r-card); background: var(--mist); }@media (max-width: 860px){.uc-ucc .ax-track{ display: none; }.uc-ucc .ax-stack{ display: flex; }}.uc-ucc .ax-screen .mp-media{ position: absolute; inset: 0; display: flex; }.uc-ucc .ax-screen .builder, .uc-ucc .ax-screen .mp-alt{ margin: 0 !important; width: 100%; height: 100%; border: 0; border-radius: 0; }.uc-ucc .ax-s-frame .builder, .uc-ucc .ax-s-frame .mp-alt{ margin: 0 !important; }.uc-ucc .ucx-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--color-sprout-color-text-default); background: none; border: 0; padding: 0; border-radius: 0; }.uc-ucc .ucx-eyebrow::before{ display: none; }.uc-ucc .ucx-eyebrow .ucx-d{ display: none; }.uc-ucc .trap-card--pain .trap-inner::before{ background: radial-gradient(560px 280px at 12% -8%, rgba(253, 106, 53, 0.16), transparent 60%); }.uc-ucc .cta-band::before, .uc-ucc .shimmer-cta{ }.uc-ucc .ucx-uc-container{ width: 100%; max-width: var(--uc-container-max); margin-inline: auto; padding-inline: var(--uc-gutter); }.uc-ucc .band-dark .trap-card, .uc-ucc .band-dark .trap-card--pain, .uc-ucc .band-dark .trap-card--fix, .uc-ucc .trap-card{ background: var(--color-sprout-color-background-default); border: 1px solid var(--color-sprout-color-border-weak); padding: 4px; border-radius: 16px; box-shadow: var(--shadow-sprout-xs, 0 1px 2px rgba(16,24,40,.05)); }.uc-ucc .trap-inner{ border-radius: 12px; }.uc-ucc .ps-brand{ background: radial-gradient(85% 120% at 20% 10%, var(--color-sprout-color-primary-lightest), transparent 62%), var(--color-sprout-color-background-weaker); }.uc-ucc .ls-video{ display: none; }.uc-ucc .ls-box::after{ display: none; }.uc-ucc .ls-box{ background: radial-gradient(70% 120% at 16% 6%, var(--color-sprout-color-primary-lightest), transparent 58%), var(--color-sprout-color-background-default); border: 1px solid var(--color-sprout-color-border-weak); }.uc-ucc .trap-card--fix .trap-inner{ background: var(--color-sprout-color-background-weaker); }.uc-ucc .fm-cell--shader{ background: var(--color-sprout-color-background-weaker); }.uc-ucc .fm-ico{ transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease; }.uc-ucc .fm-cell:hover{ border-color: var(--red); transform: none; }.uc-ucc .fm-cell:hover .fm-ico{ background: var(--red); border-color: var(--red); color: #fff; }.uc-ucc .fm-cell--big{ padding: var(--space-5); }.uc-ucc .fm-cta{ align-self: flex-start; margin-top: var(--space-4); }.uc-ucc .fm-cta svg{ transition: transform 0.2s ease; }.uc-ucc .fm-cell:hover .fm-cta svg{ transform: translateX(3px); }.uc-ucc .trap-kicker{ font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }.uc-ucc .trap-kicker--pain .ucx-d{ background: var(--color-sprout-color-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sprout-color-error) 22%, transparent); }.uc-ucc .trap-mark--x{ color: var(--color-sprout-color-error); background: color-mix(in srgb, var(--color-sprout-color-error) 16%, transparent); }.uc-ucc .trap-kicker--fix{ color: var(--color-sprout-color-success-darker); }.uc-ucc .trap-kicker--fix .ucx-d{ background: var(--color-sprout-color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sprout-color-success) 22%, transparent); }.uc-ucc .trap-mark--check{ color: #fff; background: var(--color-sprout-color-success); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-sprout-color-success) 32%, transparent); }.uc-ucc .doors-shader-card{ background: var(--color-sprout-color-background-default); border: 1px solid var(--color-sprout-color-border-weak); padding: 4px; box-shadow: none; }.uc-ucc .doors-shader-card .dsc-shader{ display: none; }.uc-ucc .doors-visual{ background: var(--color-sprout-color-background-weaker); box-shadow: none; }.uc-ucc .cta-band{ --canvas: #ffffff; background: var(--color-sprout-color-background-default); color: var(--color-sprout-color-text-default); border-top: 1px solid var(--color-sprout-color-border-weak); }.uc-ucc .cta-band h2{ color: var(--color-titlelight); }.uc-ucc .cta-band .ucx-lead{ color: var(--color-sprout-color-text-weaker); }.uc-ucc .ax .ucx-sec-head{ display: block; text-align: center; max-width: 900px; margin: 0 auto; }.uc-ucc .display-xl, .uc-ucc .display, .uc-ucc .h1, .uc-ucc .h2, .uc-ucc .h3, .uc-ucc .ucx-sec h2, .uc-ucc .dot-red, .uc-ucc .ucx-accent-lemon{ color: var(--color-titlelight); }.uc-ucc .proof .pf-ico{ color: var(--color-sprout-color-text-default); }.uc-ucc .trap-card--fix .trap-head{ border-bottom-color: color-mix(in srgb, var(--color-sprout-color-success) 22%, transparent); }.uc-ucc .trap-cta{ align-items: flex-start; }.uc-ucc .trap-mark--check{ box-shadow: none; }.uc-ucc .trap-card:hover{ transform: none; }.uc-ucc .fx-plate{ position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-4); aspect-ratio: 4 / 3; width: 100%; border-radius: 16px; overflow: hidden; color: var(--card-ink); background-color: var(--mint); background-size: cover; animation: cf-swap var(--dur) var(--ease-out); }.uc-ucc .fx-plate::before{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.12; mix-blend-mode: soft-light; }.uc-ucc .fx-plate::after{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, color-mix(in srgb, #fff 34%, transparent), transparent 55%); }.uc-ucc.uc-night{ --ink: #f5f5f5; --ink-90: #e5e5e5; --canvas: #171717; --surface: #1f1f1f; --muted: #a1a1a1; --faint: #7d7d7d; --line: rgba(255, 255, 255, 0.10); --card-line: rgba(255, 255, 255, 0.12); --placeholder: #262626; --ink-panel: #262626; --ink-panel-line: rgba(255, 255, 255, 0.10); --card-ink: #f5f5f5; --card-ink-soft: #a1a1a1; --bg: var(--canvas); --fg: var(--ink); --tx: #f5f5f5; --txd: #a1a1a1; --txf: #7d7d7d; --cardbd: rgba(255, 255, 255, 0.12); --cardbg: #1f1f1f; --mist: #262626; --color-titlelight: #f5f5f5; }.uc-ucc.uc-night #explore-features{ --color-sprout-color-background-weaker: #171717; --color-sprout-color-background-default: #1f1f1f; --color-sprout-color-background-stronger: #262626; --color-sprout-color-background-strongest: #2b2b2b; --color-sprout-color-text-default: #f5f5f5; --color-sprout-color-text-stronger: #ffffff; --color-sprout-color-text-weaker: #a1a1a1; --color-sprout-color-text-weakest: #7d7d7d; --color-sprout-color-border-weak: rgba(255, 255, 255, 0.10); --color-sprout-color-border-default: rgba(255, 255, 255, 0.16); }.uc-ucc.uc-night .ax-media{ background: #2e2e2e; }.uc-ucc.uc-night .ax-num{ background: #262626; }.uc-ucc.uc-night .ax-col.ucx-is-active .ax-num, .uc-ucc.uc-night .ax-col.ucx-is-done .ax-num, .uc-ucc.uc-night .ax-s .ax-num{ background: var(--acc); }.uc-ucc.uc-night .trap-card--pain .trap-inner{ background: #0a0a0a; }.uc-ucc.uc-night .trap-card--fix .trap-inner{ background: #262626; }.uc-ucc{ transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }.uc-ucc .band-card, .uc-ucc .band-card--first, .uc-ucc .band-dark, .uc-ucc section, .uc-ucc h1, .uc-ucc h2, .uc-ucc h3, .uc-ucc h4, .uc-ucc p, .uc-ucc li, .uc-ucc [class*="card"], .uc-ucc [class*="tile"], .uc-ucc [class*="panel"], .uc-ucc [class*="door"], .uc-ucc [class*="feat"], .uc-ucc [class*="trap"], .uc-ucc [class*="mega"], .uc-ucc [class*="step"]{ 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); }.uc-ucc .fm-cell{ 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.24s ease; }.uc-ucc .fmap-frame{ transition: opacity 0.64s cubic-bezier(0.22, 1, 0.36, 1), transform 0.64s cubic-bezier(0.22, 1, 0.36, 1), background-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-ucc, .uc-ucc *{ transition: none !important; }}:where(.uc-ucc) .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: 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); }:where(.uc-ucc) .Button_button__8M0Ui:focus-visible{ outline: 2px solid var(--uc-ring); outline-offset: 2px; }:where(.uc-ucc) .Button_button__8M0Ui:active:not(:disabled){ transform: translateY(0.5px); }:where(.uc-ucc) .Button_button__8M0Ui:disabled{ opacity: 0.5; cursor: not-allowed; box-shadow: none; }:where(.uc-ucc) .Button_sm__CjQl1{ --_h: var(--uc-control-h-sm); --_px: var(--uc-space-12); --_fs: var(--uc-text-sm); }:where(.uc-ucc) .Button_md__0_bmU{ --_h: var(--uc-control-h-md); --_px: var(--uc-space-16); --_fs: var(--uc-text-base); }:where(.uc-ucc) .Button_lg__7yGRs{ --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); }:where(.uc-ucc) .Button_iconOnly__eY4j_{ padding: 0; width: var(--_h); }:where(.uc-ucc) .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)); }:where(.uc-ucc) .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); }:where(.uc-ucc) .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); }:where(.uc-ucc) .Button_solid__hu289.Button_neutral__jwE0u{ color: var(--uc-inverse-fg); background: var(--uc-inverse-bg); box-shadow: var(--uc-shadow-control); }:where(.uc-ucc) .Button_solid__hu289.Button_neutral__jwE0u:hover:not(:disabled){ background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.16)); }:where(.uc-ucc) .Button_solid__hu289.Button_neutral__jwE0u:active:not(:disabled){ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)); }:where(.uc-ucc) .Button_soft__o47wg{ color: var(--_fg, var(--uc-brand-fg)); background: var(--_soft, var(--uc-brand-soft)); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--uc-shadow-1); }:where(.uc-ucc) .Button_soft__o47wg:hover:not(:disabled){ background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }:where(.uc-ucc) .Button_outline__Zwmoe{ color: var(--_fg, var(--uc-brand-fg)); background: var(--uc-surface-control); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); }:where(.uc-ucc) .Button_outline__Zwmoe.Button_neutral__jwE0u{ color: var(--uc-text-strong); }:where(.uc-ucc) .Button_outline__Zwmoe:hover:not(:disabled){ background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }:where(.uc-ucc) .Button_ghost__e52lE{ color: var(--_fg, var(--uc-brand-fg)); background: transparent; }:where(.uc-ucc) .Button_ghost__e52lE.Button_neutral__jwE0u{ color: var(--uc-text); }:where(.uc-ucc) .Button_ghost__e52lE:hover:not(:disabled){ background: var(--_glow, var(--uc-brand-glow-hover)); color: var(--uc-text-strong); }:where(.uc-ucc) .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); }:where(.uc-ucc) .Button_success__ox09j{ --_fill: var(--uc-success); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_glow: var(--uc-success-glow-hover); --_shadow: var(--uc-shadow-control-brand); }:where(.uc-ucc) .Button_danger__uQDDH{ --_fill: var(--uc-danger); --_fg: var(--uc-danger-fg); --_soft: var(--uc-danger-soft); --_border: var(--uc-danger-border); --_glow: var(--uc-danger-glow-hover); --_shadow: var(--uc-shadow-control-brand); }:where(.uc-ucc) .Button_neutral__jwE0u{ --_fg: var(--uc-text-strong); --_soft: var(--uc-surface-sunken); --_border: var(--uc-border-strong); --_glow: rgba(128, 128, 128, 0.12); }:where(.uc-ucc) .Button_loading__ZvEzX{ color: transparent !important; pointer-events: none; }:where(.uc-ucc) .Button_spinner__D8hjY{ position: absolute; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--uc-brand-on); animation: Button_uc-spin__zZG4c 0.6s linear infinite; }:where(.uc-ucc) .Button_soft__o47wg .Button_spinner__D8hjY, :where(.uc-ucc) .Button_outline__Zwmoe .Button_spinner__D8hjY, :where(.uc-ucc) .Button_ghost__e52lE .Button_spinner__D8hjY{ color: var(--uc-text); }:where(.uc-ucc) .Button_solid__hu289.Button_neutral__jwE0u .Button_spinner__D8hjY{ color: var(--uc-inverse-fg); }@keyframes Button_uc-spin__zZG4c{ to { transform: rotate(360deg); } }:where(.uc-ucc) .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); }:where(.uc-ucc) :has(.f2w), :where(.uc-ucc) :has(.f2w), :where(.uc-ucc) :has(.f2w){ background-color: #fff; }:where(.uc-ucc) .f2w *{ box-sizing: border-box; }:where(.uc-ucc) .f2w.is-night{ --acc2: #ff8a5b; --pg: #171717; --pg2: #1f1f1f; --tx: #f5f5f5; --txd: #a1a1a1; --txf: #7d7d7d; --acc-dk: #f5f5f5; --acc-soft: #262626; --acc-line: rgba(255, 255, 255, 0.14); --cardbg: #1f1f1f; --cardbd: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.10); --mist: #262626; --ink: #f5f5f5; --color-sprout-color-background-weaker: #171717; --color-sprout-color-background-default: #1f1f1f; --color-sprout-color-background-stronger: #262626; --color-sprout-color-background-strongest: #2b2b2b; --color-sprout-color-text-default: #f5f5f5; --color-sprout-color-text-stronger: #ffffff; --color-sprout-color-text-weaker: #a1a1a1; --color-sprout-color-text-weakest: #7d7d7d; --color-sprout-color-text-disabled: #6b6b6b; --color-sprout-color-border-weak: rgba(255, 255, 255, 0.10); --color-sprout-color-border-default: rgba(255, 255, 255, 0.16); --color-sprout-color-primary: #fd6a35; }:where(.uc-ucc) .f2w, :where(.uc-ucc) .f2w .ucx-sec, :where(.uc-ucc) .f2w .ucx-sec-head, :where(.uc-ucc) .f2w .ucx-eyebrow, :where(.uc-ucc) .f2w .ucx-accent-lemon, :where(.uc-ucc) .f2w h1, :where(.uc-ucc) .f2w h2, :where(.uc-ucc) .f2w h3, :where(.uc-ucc) .f2w p, :where(.uc-ucc) .f2w li, :where(.uc-ucc) .f2w .ds-fine, :where(.uc-ucc) .f2w .faq2-eyebrow, :where(.uc-ucc) .f2w .conv-eyebrow, :where(.uc-ucc) .f2w .conv-title, :where(.uc-ucc) .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); }:where(.uc-ucc) .f2w :is([class*="bg-sprout-color-"], [class*="border-sprout-color-"], [class*="text-sprout-color-"]):not(a, button, input, select, textarea, [role="button"], [role="tab"], [class*="hover:"], [class*="transition"]){ 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), box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1); }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w, :where(.uc-ucc) .f2w .ucx-sec, :where(.uc-ucc) .f2w .ucx-sec-head, :where(.uc-ucc) .f2w .ucx-eyebrow, :where(.uc-ucc) .f2w .ucx-accent-lemon, :where(.uc-ucc) .f2w h1, :where(.uc-ucc) .f2w h2, :where(.uc-ucc) .f2w h3, :where(.uc-ucc) .f2w p, :where(.uc-ucc) .f2w li, :where(.uc-ucc) .f2w .ds-fine, :where(.uc-ucc) .f2w .faq2-eyebrow, :where(.uc-ucc) .f2w .conv-eyebrow, :where(.uc-ucc) .f2w .conv-title, :where(.uc-ucc) .f2w .conv-sub{ transition: none; }:where(.uc-ucc) .f2w :is([class*="bg-sprout-color-"], [class*="border-sprout-color-"], [class*="text-sprout-color-"]):not(a, button, input, select, textarea, [role="button"], [role="tab"], [class*="hover:"], [class*="transition"]){ transition: none; }:where(.uc-ucc) .f2w{ transition: none; }}:where(.uc-ucc) .f2w.is-night .ax-num{ background: #262626; }:where(.uc-ucc) .f2w.is-night .ax-media{ background: #2e2e2e; }:where(.uc-ucc) .f2w.is-night .hp-card{ background: var(--cardbg); }:where(.uc-ucc) .f2w.is-night .hero-chip{ background: #1f1f1f; border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }:where(.uc-ucc) .f2w.is-night .hero-chip:hover{ border-color: rgba(255, 255, 255, 0.24); }:where(.uc-ucc) .f2w.is-night .widget-chip{ background: #1f1f1f; border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }:where(.uc-ucc) .f2w.is-night .rp-ic{ color: #525252; border-color: rgba(10, 10, 10, 0.12); }:where(.uc-ucc) .f2w.is-night .rp-ic:hover{ color: #0a0a0a; border-color: rgba(10, 10, 10, 0.28); }:where(.uc-ucc) .f2w .conv-card, :where(.uc-ucc) .f2w .conv-tile{ transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1); }:where(.uc-ucc) .f2w img{ max-width: 100%; }:where(.uc-ucc) .f2w .ucx-uc-container{ max-width: var(--uc-container-max); margin-inline: auto; padding-inline: var(--uc-gutter); }:where(.uc-ucc) .f2w .ucx-sec{ position: relative; padding: 104px 0; scroll-margin-top: 80px; }@media (max-width: 700px){:where(.uc-ucc) .f2w .ucx-sec{ padding: 68px 0; }}:where(.uc-ucc) .f2w .ucx-sec-head{ max-width: 900px; margin: 0 auto; text-align: center; }:where(.uc-ucc) .f2w .ucx-sec h2{ font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; margin: 16px 0 14px; text-wrap: balance; color: var(--tx); }@media (min-width: 768px){:where(.uc-ucc) .f2w .ucx-sec h2{ font-size: 46px; line-height: 50px; }}:where(.uc-ucc) .f2w .ucx-sec .ucx-sub{ color: var(--txd); font-size: 18px; line-height: 28px; margin: 0; }:where(.uc-ucc) .f2w .ucx-sec-head .ucx-sub{ margin-left: auto; margin-right: auto; max-width: 760px; }:where(.uc-ucc) .f2w .ucx-accent-lemon{ color: var(--tx); }:where(.uc-ucc) .f2w .sec-note{ text-align: center; color: var(--txf); font-size: 14px; line-height: 22px; margin: 20px 0 0; }:where(.uc-ucc) .f2w .ucx-eyebrow{ display: inline-flex; align-items: center; gap: 8px; color: var(--tx); background: none; border: 0; padding: 0; border-radius: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 24px; }:where(.uc-ucc) .f2w .badge-new{ display: inline-block; height: var(--spacing-sprout-16); line-height: var(--spacing-sprout-16); padding: 0 var(--spacing-sprout-8); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; text-transform: uppercase; background: var(--acc2-solid); color: #fff; }:where(.uc-ucc) .f2w .mcp-link{ position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--acc-dk); text-decoration: none; font-size: 16px; font-weight: 500; line-height: 26px; }:where(.uc-ucc) .f2w .mcp-link svg{ width: 17px; height: 17px; transition: transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .mcp-link:hover svg{ transform: translateX(3px); }:where(.uc-ucc) .f2w .mcp-link::after{ content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; border-radius: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }:where(.uc-ucc) .f2w .mcp-link:hover::after{ transform: scaleX(1); }:where(.uc-ucc) .f2w .btn-wp-dl{ color: var(--tx); }:where(.uc-ucc) .f2w .btn-wp-dl img{ width: 18px; height: auto; display: block; flex: 0 0 auto; filter: brightness(0); transition: filter 0.55s cubic-bezier(0.4, 0, 0.2, 1); }:where(.uc-ucc) .f2w.is-night .btn-wp-dl img{ filter: brightness(1); }:where(.uc-ucc) .f2w .ucx-reveal{ opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); will-change: opacity, transform; }:where(.uc-ucc) .f2w .ucx-reveal.ucx-in{ opacity: 1; transform: none; }:where(.uc-ucc) .f2w .ucx-frame{ position: relative; margin: 52px auto 0; max-width: 960px; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--mist); border: 1px solid var(--cardbd); box-shadow: 0 18px 44px -24px rgba(16, 24, 40, 0.28); }:where(.uc-ucc) .f2w .ucx-frame .fi{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--txd); }:where(.uc-ucc) .f2w .ucx-frame .fi svg{ width: 40px; height: 40px; }:where(.uc-ucc) .f2w .ucx-frame .fi span{ font-size: 14px; line-height: 20px; }:where(.uc-ucc) .f2w .ucx-vplay{ width: 72px; height: 72px; border-radius: 50%; background: var(--acc); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(253, 106, 53, 0.35); }:where(.uc-ucc) .f2w .ucx-vplay svg{ fill: #fff; }:where(.uc-ucc) .f2w .ucx-hero{ position: relative; overflow: hidden; text-align: center; padding: clamp(120px, 15vh, 176px) 0 clamp(56px, 7vw, 88px); background: var(--pg); }:where(.uc-ucc) .f2w .ucx-hero > .ucx-uc-container{ position: relative; z-index: 2; }:where(.uc-ucc) .f2w .ucx-hero .ucx-eyebrow{ margin-bottom: 18px; }:where(.uc-ucc) .f2w .ucx-hero .ucx-sub{ max-width: 900px; margin: 0 auto 34px; color: var(--txd); font-size: 18px; line-height: 28px; }:where(.uc-ucc) .f2w .ucx-hero::before, :where(.uc-ucc) .f2w .ucx-hero::after{ content: none; }:where(.uc-ucc) .f2w .uic-spell-layer{ position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; --mx: 0; --my: 0; }:where(.uc-ucc) .f2w .uic-orb{ position: absolute; border-radius: 50%; filter: blur(55px); will-change: transform; opacity: 0.5; }:where(.uc-ucc) .f2w .uic-orb-1{ width: 480px; height: 480px; left: -4%; top: 12%; background: radial-gradient(circle, rgba(253, 106, 53, 0.28) 0%, transparent 68%); animation: f2w-float-a 14s ease-in-out infinite alternate; transform: translate(calc(var(--mx) * 24px), calc(var(--my) * 24px)); }:where(.uc-ucc) .f2w .uic-orb-2{ width: 400px; height: 400px; right: -3%; top: 40%; background: radial-gradient(circle, rgba(82, 2, 253, 0.18) 0%, transparent 68%); animation: f2w-float-b 18s ease-in-out infinite alternate; transform: translate(calc(var(--mx) * -32px), calc(var(--my) * -32px)); }:where(.uc-ucc) .f2w .uic-orb-3{ width: 300px; height: 300px; left: 40%; top: 55%; background: radial-gradient(circle, rgba(253, 106, 53, 0.16) 0%, transparent 68%); animation: f2w-float-a 22s ease-in-out infinite alternate-reverse; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 16px)); }:where(.uc-ucc) .f2w .uic-orb-4{ width: 420px; height: 420px; left: -8%; top: 66%; background: radial-gradient(circle, rgba(253, 106, 53, 0.2) 0%, transparent 68%); animation: f2w-float-b 20s ease-in-out infinite alternate; transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)); }:where(.uc-ucc) .f2w .uic-orb-5{ width: 360px; height: 360px; right: -7%; top: 80%; background: radial-gradient(circle, rgba(82, 2, 253, 0.14) 0%, transparent 66%); animation: f2w-float-a 24s ease-in-out infinite alternate-reverse; transform: translate(calc(var(--mx) * 26px), calc(var(--my) * 26px)); }:where(.uc-ucc) .f2w .uic-orb-6{ width: 280px; height: 280px; left: 36%; top: 92%; background: radial-gradient(circle, rgba(253, 106, 53, 0.12) 0%, transparent 66%); animation: f2w-float-a 18s ease-in-out infinite alternate; transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 14px)); }:where(.uc-ucc) .f2w .trusted{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 30px; }:where(.uc-ucc) .f2w .trusted .avatars{ height: 34px; width: auto; }:where(.uc-ucc) .f2w .trusted .stars-wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }:where(.uc-ucc) .f2w .trusted .stars-wrap img{ height: 15px; width: auto; }:where(.uc-ucc) .f2w .trusted .stars-line{ display: flex; align-items: center; gap: 7px; }:where(.uc-ucc) .f2w .trusted .rate-num{ color: var(--tx); font-size: 12px; font-weight: 700; line-height: 14px; }:where(.uc-ucc) .f2w .trusted .tnum{ color: var(--txd); font-size: 12px; font-weight: 500; line-height: 14px; }:where(.uc-ucc) .f2w .ucx-pill-title{ display: block; text-align: center; margin: 18px auto 20px; max-width: 1180px; font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--tx); }@media (min-width: 768px){:where(.uc-ucc) .f2w .ucx-pill-title{ font-size: 54px; line-height: 58px; }}:where(.uc-ucc) .f2w .ucx-pill-title .ucx-bw{ white-space: nowrap; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip{ display: inline-flex; align-items: center; justify-content: center; width: 0.85em; height: 0.85em; padding: 0.08em; box-sizing: border-box; background: var(--cardbg); border: 1px solid var(--cardbd); border-radius: 0.255em; vertical-align: middle; margin: 0 -0.06em; position: relative; top: -0.1em; box-shadow: 0 3px 10px -4px rgba(16, 24, 40, 0.25); }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip img{ max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; border-radius: 8px; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip img[src*="ucwr-figma-mark"]{ border-radius: 0; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip.is-badge{ padding: 0; border: 0; background: transparent; overflow: hidden; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip.is-inset{ padding: 0.12em; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip.is-badge img{ width: 100%; height: 100%; object-fit: cover; }:where(.uc-ucc) .f2w .ucx-pill-title .hero-br{ display: none; }@media (min-width: 1000px){:where(.uc-ucc) .f2w .ucx-pill-title .hero-br{ display: block; }}:where(.uc-ucc) .f2w .hero-checks{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 780px; margin: 0 auto 34px; }:where(.uc-ucc) .f2w .hero-chip{ display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--tx); background: var(--cardbg); border: 1px solid var(--cardbd); box-shadow: 0 2px 6px -3px rgba(16, 24, 40, 0.16); transition: border-color 0.24s var(--ease), transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .hero-chip:hover{ border-color: var(--acc-line); transform: translateY(-2px); }:where(.uc-ucc) .f2w .hero-chip svg{ width: 18px; height: 18px; flex: 0 0 auto; }:where(.uc-ucc) .f2w .hero-logo{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #ffffff; border: 1px solid var(--cardbd); box-shadow: 0 2px 6px -3px rgba(16, 24, 40, 0.16); transition: border-color 0.24s var(--ease), transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .hero-logo:hover{ border-color: var(--acc-line); transform: translateY(-2px); }:where(.uc-ucc) .f2w .hero-logo img, :where(.uc-ucc) .f2w .hero-logo svg{ width: 28px; height: 28px; object-fit: contain; }:where(.uc-ucc) .f2w .ucx-cta-row{ display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }:where(.uc-ucc) .f2w .cta-primary{ position: relative; display: inline-flex; }@media (max-width: 640px){:where(.uc-ucc) .f2w .cta-primary{ flex-direction: column; align-items: center; }:where(.uc-ucc) .f2w .cta-primary .uc-note{ position: static; transform: none; translate: none; margin-top: var(--spacing-sprout-8, 8px); text-align: center; }}:where(.uc-ucc) .f2w .hero-reassure{ margin: 18px 0 0; text-align: center; color: var(--txf); font-size: 14px; line-height: 20px; }:where(.uc-ucc) .f2w .hero-video{ cursor: pointer; background: var(--cardbg); box-shadow: none; }:where(.uc-ucc) .f2w .hero-video .hero-screen{ position: absolute; inset: 4px; border-radius: 28px; overflow: hidden; background: var(--mist); }:where(.uc-ucc) .f2w .hero-video .ucx-demo-thumb{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }:where(.uc-ucc) .f2w .hero-video .ucx-demo-play{ position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 0; cursor: pointer; z-index: 2; }:where(.uc-ucc) .f2w .hero-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }@media (min-width: 640px){:where(.uc-ucc) .f2w .hero-video .hero-screen{ border-radius: 44px; }}@media (min-width: 768px){:where(.uc-ucc) .f2w .hero-video .hero-screen{ border-radius: 60px; }}:where(.uc-ucc) .f2w .stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 1020px; margin: clamp(32px, 4vw, 44px) auto 0; background: var(--cardbd); border: 1px solid var(--cardbd); border-radius: 24px; overflow: hidden; }:where(.uc-ucc) .f2w .stat{ display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; background: var(--cardbg); padding: 24px 20px; }:where(.uc-ucc) .f2w .stat .num{ font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; color: var(--tx); line-height: 1; flex: 0 0 auto; }:where(.uc-ucc) .f2w .stat .num em{ font-style: normal; color: var(--txd); }:where(.uc-ucc) .f2w .stat .lbl{ color: var(--txd); font-size: 14px; line-height: 20px; margin-top: 0; max-width: 126px; }@media (max-width: 900px){:where(.uc-ucc) .f2w .stats{ grid-template-columns: repeat(2, 1fr); }}@media (max-width: 520px){:where(.uc-ucc) .f2w .stats{ grid-template-columns: 1fr; }}:where(.uc-ucc) .f2w .diff-stage{ position: relative; aspect-ratio: 16/10; background: var(--mist); }:where(.uc-ucc) .f2w .dl-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }:where(.uc-ucc) .f2w .diff-play{ position: absolute; top: 10px; right: 10px; z-index: 3; width: 24px; height: 24px; border-radius: 999px; cursor: pointer; border: 0; background: rgba(0, 0, 0, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #171717; display: grid; place-items: center; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }:where(.uc-ucc) .f2w .diff-play:hover{ background: rgba(0, 0, 0, 0.22); transform: scale(1.06); }:where(.uc-ucc) .f2w .diff-play svg{ width: 12px; height: 12px; }:where(.uc-ucc) .f2w .diff-play .i-pause{ display: none; }:where(.uc-ucc) .f2w #diffReal:not(.is-paused) .diff-play .i-play{ display: none; }:where(.uc-ucc) .f2w #diffReal:not(.is-paused) .diff-play .i-pause{ display: block; }:where(.uc-ucc) .f2w .ax{ --ax-gap: 40px; --ax-gutter: max(var(--uc-gutter), calc((100vw - var(--uc-container-max) + 2 * var(--uc-gutter)) / 2)); --ax-col: calc((min(100vw, var(--uc-container-max)) - 2 * var(--uc-gutter) - 2 * var(--ax-gap)) / 3); padding-bottom: 40px; }:where(.uc-ucc) .f2w .ax-track{ position: relative; height: 540vh; margin-top: 10px; }:where(.uc-ucc) .f2w .ax-pin{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }:where(.uc-ucc) .f2w .ax-stage{ display: flex; flex-direction: column; gap: clamp(24px, 4.4vh, 52px); width: 100%; }:where(.uc-ucc) .f2w .ax-window{ overflow: hidden; padding-block: 8px; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ax-gutter), #000 calc(100% - var(--ax-gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ax-gutter), #000 calc(100% - var(--ax-gutter)), transparent 100%); }:where(.uc-ucc) .f2w .ax-row{ display: grid; grid-auto-flow: column; grid-auto-columns: var(--ax-col); gap: var(--ax-gap); will-change: transform; }:where(.uc-ucc) .f2w .ax-media-wrap{ width: 100%; }:where(.uc-ucc) .f2w .ax-col{ display: flex; flex-direction: column; gap: 18px; opacity: 1; transition: opacity 0.45s var(--ease); }:where(.uc-ucc) .f2w .ax-col.is-dim{ opacity: 0.42; }:where(.uc-ucc) .f2w .ax-bar{ position: relative; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }:where(.uc-ucc) .f2w .ax-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--acc2), var(--acc)); box-shadow: 0 0 10px rgba(253, 106, 53, 0.35); }:where(.uc-ucc) .f2w .ax-copy{ display: flex; flex-direction: column; gap: 8px; }:where(.uc-ucc) .f2w .ax-h{ display: flex; align-items: flex-start; gap: 12px; }:where(.uc-ucc) .f2w .ax-num{ flex: 0 0 auto; margin-top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 14px; font-weight: 700; color: var(--txf); background: #fff; border: 1px solid var(--cardbd); transition: color 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }:where(.uc-ucc) .f2w .ax-col.ucx-is-active .ax-num, :where(.uc-ucc) .f2w .ax-col.ucx-is-done .ax-num{ color: #fff; background: var(--acc); border-color: var(--acc); }:where(.uc-ucc) .f2w .ax-col.ucx-is-active .ax-num{ box-shadow: 0 0 0 5px rgba(253, 106, 53, 0.14), 0 0 18px rgba(253, 106, 53, 0.38); }:where(.uc-ucc) .f2w .ax-h h3{ margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); line-height: 24px; }:where(.uc-ucc) .f2w .ax-copy p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }:where(.uc-ucc) .f2w .ax-media{ position: relative; width: 100%; max-width: calc(60vh * 1240 / 584); margin-inline: auto; aspect-ratio: 1240 / 584; border-radius: 20px; background: #fff; border: 1px solid var(--cardbd); }:where(.uc-ucc) .f2w .ax-screen{ position: absolute; inset: 4px; border-radius: 16px; overflow: hidden; background: var(--mist); }:where(.uc-ucc) .f2w .ax-slide{ position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }:where(.uc-ucc) .f2w .ax-vid{ width: 100%; height: 100%; object-fit: cover; display: block; background: var(--mist); }:where(.uc-ucc) .f2w .ax-track.is-off{ display: none; }:where(.uc-ucc) .f2w .ax-stack{ display: none; margin-top: 48px; flex-direction: column; gap: 44px; }:where(.uc-ucc) .f2w .ax-s{ display: flex; flex-direction: column; gap: 14px; }:where(.uc-ucc) .f2w .ax-s .ax-num{ color: #fff; background: var(--acc); border-color: var(--acc); }:where(.uc-ucc) .f2w .ax-s h3{ margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); line-height: 24px; }:where(.uc-ucc) .f2w .ax-s p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }:where(.uc-ucc) .f2w .ax-s-frame{ padding: 4px; border-radius: var(--r-card); background: var(--mist); }:where(.uc-ucc) .f2w .ax-s-inner{ position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--mist); border: 1px solid var(--cardbd); }:where(.uc-ucc) .f2w .ax-m-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }@media (max-width: 860px){:where(.uc-ucc) .f2w .ax-track{ display: none; }:where(.uc-ucc) .f2w .ax-stack{ display: flex; }}:where(.uc-ucc) .f2w .ax--six .ax-track{ height: 660vh; }:where(.uc-ucc) .f2w .ax--six .ax-media{ aspect-ratio: 1920 / 1050; }:where(.uc-ucc) .f2w .zz{ display: flex; flex-direction: column; gap: 64px; margin-top: 60px; }:where(.uc-ucc) .f2w .zz-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }:where(.uc-ucc) .f2w .zz-row:nth-child(even) .zz-media{ order: -1; }:where(.uc-ucc) .f2w .zz-text h3{ font-size: 24px; margin: 0 0 12px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); }:where(.uc-ucc) .f2w .zz-text .ucx-eyebrow{ margin-bottom: 14px; }:where(.uc-ucc) .f2w .zz-text p{ color: var(--txd); font-size: 16px; line-height: 26px; margin: 0; }:where(.uc-ucc) .f2w .zz-media .ucx-frame{ margin: 0; max-width: none; }:where(.uc-ucc) .f2w .zz-media .ucx-frame{ transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease), border-color 0.34s var(--ease); }:where(.uc-ucc) .f2w .zz-media .ucx-frame:hover{ transform: translateY(-6px); border-color: var(--acc-line); box-shadow: 0 28px 60px -30px rgba(16, 24, 40, 0.34); }@media (max-width: 820px){:where(.uc-ucc) .f2w .zz-row{ grid-template-columns: minmax(0, 1fr); gap: 24px; }:where(.uc-ucc) .f2w .zz-row:nth-child(even) .zz-media{ order: 0; }:where(.uc-ucc) .f2w .zz-media, :where(.uc-ucc) .f2w .zz-media .ucx-frame{ max-width: 100%; min-width: 0; overflow: hidden; }}:where(.uc-ucc) .f2w .demo-chip, :where(.uc-ucc) .f2w .scan-chip, :where(.uc-ucc) .f2w .dfx-chip, :where(.uc-ucc) .f2w .hf-chip{ position: absolute; left: 14px; bottom: 14px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--tx); background: rgba(255, 255, 255, 0.86); border: 1px solid var(--cardbd); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); line-height: 14px; box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.4); }:where(.uc-ucc) .f2w .demo-chip i, :where(.uc-ucc) .f2w .scan-chip i{ width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px 1px rgba(253, 106, 53, 0.6); animation: f2w-blink 1.6s ease-in-out infinite; }:where(.uc-ucc) .f2w .ucx-frame.scan{ overflow: hidden; place-items: stretch; background: #eef0f3; }:where(.uc-ucc) .f2w .scan-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 0; }:where(.uc-ucc) .f2w .scan-veil{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(16, 24, 40, 0.08)); }:where(.uc-ucc) .f2w .scan-grid{ position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(rgba(253, 106, 53, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 106, 53, 0.16) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }:where(.uc-ucc) .f2w .scan-line{ position: absolute; left: 0; right: 0; top: 4%; height: 2px; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(82, 2, 253, 0.6) 14%, var(--acc) 50%, rgba(82, 2, 253, 0.6) 86%, transparent); box-shadow: 0 0 18px 3px rgba(253, 106, 53, 0.5); animation: f2w-scan-sweep 3s var(--ease) infinite alternate; }:where(.uc-ucc) .f2w .scan-line::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 64px; background: linear-gradient(180deg, transparent, rgba(253, 106, 53, 0.16)); }:where(.uc-ucc) .f2w .scan-line::after{ content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 64px; background: linear-gradient(180deg, rgba(253, 106, 53, 0.18), transparent); }:where(.uc-ucc) .f2w .scan-dot{ position: absolute; z-index: 5; left: var(--x); top: var(--y); width: var(--s, 7px); height: var(--s, 7px); border-radius: 50%; transform: translate(-50%, -50%) scale(0.2); opacity: 0; background: var(--acc); box-shadow: 0 0 6px 1px rgba(253, 106, 53, 0.5); animation: f2w-scan-pop var(--dur, 3.2s) ease-in-out infinite; animation-delay: var(--d, 0s); }:where(.uc-ucc) .f2w .ucx-frame.dfx{ overflow: hidden; place-items: center; background: #ffffff; aspect-ratio: 16/10; }:where(.uc-ucc) .f2w .dfx-bento{ --dfxgap: 24px; position: relative; display: flex; gap: var(--dfxgap); width: 100%; height: 100%; padding: 16px; align-items: stretch; }:where(.uc-ucc) .f2w .dfx-col{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--dfxgap); }:where(.uc-ucc) .f2w .dfx-col.c3{ animation: f2w-dfx-slide 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .dfx-g{ flex: 1 1 0; min-height: 0; border-radius: 12px; overflow: hidden; }:where(.uc-ucc) .f2w .dfx-g.card{ background: #234540; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }:where(.uc-ucc) .f2w .dfx-g.img{ background-size: cover; background-position: center; position: relative; }:where(.uc-ucc) .f2w .dfx-g.img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0.52)); }:where(.uc-ucc) .f2w .dfx-ic{ width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.32); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }:where(.uc-ucc) .f2w .dfx-ic svg{ width: 16px; height: 16px; }:where(.uc-ucc) .f2w .dfx-tx b{ display: block; color: #fff; font-size: clamp(0.625rem, 1.25vw, 0.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }:where(.uc-ucc) .f2w .dfx-g.card .big{ display: block; color: #fff; font-weight: 700; letter-spacing: -0.01em; font-size: clamp(0.75rem, 1.7vw, 1rem); line-height: 1.3; }:where(.uc-ucc) .f2w .dfx-tx p{ margin: 4px 0 0; color: #dfe4e1; font-size: clamp(0.375rem, 0.85vw, 0.5rem); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }:where(.uc-ucc) .f2w .dfx-pills{ display: flex; gap: 6px; margin-top: 7px; }:where(.uc-ucc) .f2w .dfx-pills span{ background: #f2f2f0; color: #1e2b28; font-size: 8px; font-weight: 500; padding: 3px 8px; border-radius: 20px; white-space: nowrap; line-height: 10px; }:where(.uc-ucc) .f2w .dfx-mark{ position: absolute; top: 50%; left: 66.4%; transform: translate(-50%, -50%); z-index: 7; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 7px; border-radius: 6px; line-height: 12px; }:where(.uc-ucc) .f2w .dfx-mark.bad{ color: #b42318; background: #fff1ef; border: 1px solid rgba(246, 82, 88, 0.5); animation: f2w-dfx-bad 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .dfx-mark.good{ color: #067647; background: #ecfdf3; border: 1px solid rgba(46, 163, 67, 0.5); opacity: 0; animation: f2w-dfx-good 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .dfx-chip i.ucx-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: f2w-dfx-dot 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .dfx-lbls{ position: relative; display: inline-grid; }:where(.uc-ucc) .f2w .dfx-lbls em{ grid-area: 1/1; font-style: normal; white-space: nowrap; }:where(.uc-ucc) .f2w .dfx-lbls .a{ animation: f2w-dfx-lbl-a 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .dfx-lbls .b{ opacity: 0; animation: f2w-dfx-lbl-b 4.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .ucx-frame.mtn{ overflow: hidden; place-items: center; background: #fbf8f1; }:where(.uc-ucc) .f2w .mtn-page{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px; text-align: center; }:where(.uc-ucc) .f2w .mtn-eye{ font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: #8a94a0; margin-bottom: 7px; line-height: 12px; }:where(.uc-ucc) .f2w .mtn-h{ font-family: Georgia, "Times New Roman", serif; color: #1b2534; font-weight: 600; font-size: clamp(1rem, 2.3vw, 1.375rem); line-height: 1.18; max-width: 92%; }:where(.uc-ucc) .f2w .mtn-sub{ color: #5c6b7a; font-size: 12px; margin-top: 8px; max-width: 80%; line-height: 16px; }:where(.uc-ucc) .f2w .mtn-cards{ display: flex; align-items: stretch; justify-content: center; gap: 10px; margin-top: 18px; width: 100%; }:where(.uc-ucc) .f2w .mtn-card{ flex: 1 1 0; max-width: 98px; background: #fffdf9; border: 1px solid rgba(20, 30, 45, 0.07); border-radius: 12px; box-shadow: 0 10px 22px -14px rgba(20, 30, 45, 0.28); padding: 12px 8px 11px; display: flex; flex-direction: column; align-items: center; gap: 5px; }:where(.uc-ucc) .f2w .mtn-av{ width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center; background: radial-gradient(circle at 50% 34%, #e6e5e6, #c2c3c6); }:where(.uc-ucc) .f2w .mtn-av svg{ width: 32px; height: 32px; color: #a3a9b2; }:where(.uc-ucc) .f2w .mtn-card b{ font-size: 10px; font-weight: 700; color: #1b2534; letter-spacing: -0.01em; white-space: nowrap; line-height: 12px; }:where(.uc-ucc) .f2w .mtn-card i{ font-size: 10px; font-style: normal; color: #8a94a0; white-space: nowrap; line-height: 12px; }:where(.uc-ucc) .f2w .mtn-eye, :where(.uc-ucc) .f2w .mtn-h, :where(.uc-ucc) .f2w .mtn-sub, :where(.uc-ucc) .f2w .mtn-card{ opacity: 0; will-change: opacity, transform; }:where(.uc-ucc) .f2w .mtn-eye{ --fy: -10px; animation: f2w-mt-eye 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-h{ --fy: -12px; animation: f2w-mt-h 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-sub{ --fy: -10px; animation: f2w-mt-sub 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-card:nth-child(1){ --fy: 16px; animation: f2w-mt-c1 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-card:nth-child(2){ --fy: 16px; animation: f2w-mt-c2 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-card:nth-child(3){ --fy: 16px; animation: f2w-mt-c3 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-card:nth-child(4){ --fy: 16px; animation: f2w-mt-c4 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .mtn-card:nth-child(5){ --fy: 16px; animation: f2w-mt-c5 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .ucx-frame.rzc{ aspect-ratio: auto; height: 305px; background: var(--mist); }:where(.uc-ucc) .f2w .rz-vid, :where(.uc-ucc) .f2w .gl-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }:where(.uc-ucc) .f2w .ucx-frame.gl{ overflow: hidden; place-items: center; background: var(--mist); aspect-ratio: 299/216; }:where(.uc-ucc) .f2w .ucx-frame.hf{ overflow: hidden; place-items: center; background: #eef0f3; }:where(.uc-ucc) .f2w .hf-stage{ position: absolute; inset: 0; }:where(.uc-ucc) .f2w .hf-page{ position: absolute; left: 3%; top: 8%; width: 44%; height: 84%; z-index: 0; background: #ffffff; border: 1px solid var(--cardbd); border-radius: 10px; box-shadow: 0 8px 22px -14px rgba(16, 24, 40, 0.3); }:where(.uc-ucc) .f2w .hf-body{ position: absolute; z-index: 1; border-radius: 3px; }:where(.uc-ucc) .f2w .hf-body.b1{ left: 6%; top: 31%; width: 22%; height: 4.5%; background: rgba(20, 20, 40, 0.16); }:where(.uc-ucc) .f2w .hf-body.b2{ left: 6%; top: 39%; width: 17%; height: 3.5%; background: rgba(20, 20, 40, 0.1); }:where(.uc-ucc) .f2w .hf-body.b4{ left: 6%; top: 47%; width: 20%; height: 3.5%; background: rgba(20, 20, 40, 0.1); }:where(.uc-ucc) .f2w .hf-body.b3{ left: 29%; top: 31%; width: 15%; height: 24%; border-radius: 6px; background: linear-gradient(135deg, #ffe3d6, #ffc9b3); }:where(.uc-ucc) .f2w .hf-h, :where(.uc-ucc) .f2w .hf-f{ display: flex; align-items: center; gap: 5%; padding: 0 4%; border-radius: 6px; box-sizing: border-box; will-change: transform; }:where(.uc-ucc) .f2w .hf-h{ position: absolute; left: 6%; top: 13%; width: 38%; height: 11%; z-index: 2; background: #fff; border: 1px solid rgba(20, 20, 40, 0.08); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); animation: f2w-hf-lift-h 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-f{ position: absolute; left: 6%; top: 74%; width: 38%; height: 13%; z-index: 2; background: #1b2230; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); animation: f2w-hf-lift-f 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-logo{ width: 11%; aspect-ratio: 1; border-radius: 3px; background: var(--acc); flex: 0 0 auto; }:where(.uc-ucc) .f2w .hf-nav{ width: 13%; height: 16%; border-radius: 2px; background: rgba(20, 20, 40, 0.2); flex: 0 0 auto; }:where(.uc-ucc) .f2w .hf-btn{ margin-left: auto; width: 20%; height: 36%; border-radius: 20px; background: var(--acc); flex: 0 0 auto; }:where(.uc-ucc) .f2w .hf-fcol{ width: 15%; height: 26%; border-radius: 2px; background: rgba(255, 255, 255, 0.4); flex: 0 0 auto; }:where(.uc-ucc) .f2w .hf-slot{ position: absolute; z-index: 1; border: 1px dashed var(--acc-line); border-radius: 8px; background: rgba(16, 24, 40, 0.03); }:where(.uc-ucc) .f2w .hf-slot.s1{ left: 53%; top: 12%; width: 44%; height: 32%; }:where(.uc-ucc) .f2w .hf-slot.s2{ left: 53%; top: 56%; width: 44%; height: 32%; }:where(.uc-ucc) .f2w .hf-slot-label{ position: absolute; top: 7px; left: 9px; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc-dk); line-height: 10px; }:where(.uc-ucc) .f2w .hf-ck{ position: absolute; top: 6px; right: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 8px; font-weight: 900; display: grid; place-items: center; opacity: 0; line-height: 8px; }:where(.uc-ucc) .f2w .hf-ck.ck1{ animation: f2w-hf-ck1 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-ck.ck2{ animation: f2w-hf-ck2 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-chip i.ucx-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--acc2); animation: f2w-hf-dot 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-lbls{ position: relative; display: inline-grid; }:where(.uc-ucc) .f2w .hf-lbls em{ grid-area: 1/1; font-style: normal; white-space: nowrap; }:where(.uc-ucc) .f2w .hf-lbls .a{ animation: f2w-hf-la 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .hf-lbls .b{ opacity: 0; animation: f2w-hf-lb 6.5s var(--ease) infinite; }:where(.uc-ucc) .f2w .chatai{ display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 42px; align-items: center; margin-top: 44px; }@media (max-width: 980px){:where(.uc-ucc) .f2w .chatai{ grid-template-columns: minmax(0, 1fr); gap: 28px; }}:where(.uc-ucc) .f2w .chatai-tabs{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }:where(.uc-ucc) .f2w .chatai-tab{ display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--cardbd); border-left: 3px solid transparent; transition: background 0.24s var(--ease), border-color 0.24s var(--ease); }:where(.uc-ucc) .f2w .chatai-tab:hover{ background: var(--mist); }:where(.uc-ucc) .f2w .chatai-tab.active{ background: var(--acc-soft); border-color: var(--acc-line); border-left-color: var(--acc); }:where(.uc-ucc) .f2w .chatai-tab h3{ color: var(--tx); margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }:where(.uc-ucc) .f2w .chatai-tab p{ color: var(--txd); font-size: 16px; line-height: 24px; margin: 7px 0 0; }:where(.uc-ucc) .f2w .chatai-stage{ position: relative; min-width: 0; }:where(.uc-ucc) .f2w .chatai-viewport{ overflow: hidden; border-radius: 16px; }:where(.uc-ucc) .f2w .chatai-track{ display: flex; transition: transform 0.45s var(--ease); will-change: transform; }:where(.uc-ucc) .f2w .chatai-slide{ min-width: 100%; }:where(.uc-ucc) .f2w .chatai-slide .ucx-frame{ margin: 0; max-width: none; }:where(.uc-ucc) .f2w .chatai-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 16px; }:where(.uc-ucc) .f2w .chatai-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--cardbd); border: none; padding: 0; cursor: pointer; transition: background 0.24s var(--ease), width 0.24s var(--ease); }:where(.uc-ucc) .f2w .chatai-dot.active{ background: var(--acc); width: 22px; border-radius: 5px; }:where(.uc-ucc) .f2w .mcp-grid{ display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: center; margin-top: 8px; }@media (max-width: 900px){:where(.uc-ucc) .f2w .mcp-grid{ grid-template-columns: 1fr; gap: 30px; }}:where(.uc-ucc) .f2w .mcp-copy .ucx-eyebrow{ margin-bottom: 16px; }:where(.uc-ucc) .f2w .mcp-copy h2{ text-align: left; }:where(.uc-ucc) .f2w .mcp-copy .ucx-sub{ max-width: 56ch; }:where(.uc-ucc) .f2w .term{ position: relative; display: flex; flex-direction: column; height: 375px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #16121f, #0c0910); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 60px -28px rgba(16, 24, 40, 0.5); transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease); }@media (max-width: 560px){:where(.uc-ucc) .f2w .term{ height: 430px; }}:where(.uc-ucc) .f2w .term:hover{ transform: translateY(-6px); } /* --- legacy hover-transform conflict (swept 2026-09-02) --------------------- #uichemy-btn-global (retired design system) ships .uc-btn:hover, ..., [class*="-card"]:hover, [class*="-tile"]:hover, [class*="-chip"]:hover { transform: none !important; } Those attribute selectors match a SUBSTRING of the class attribute, so no ucx- rename dodges them (.ucx-hero-chip still contains "-chip"). They were killing every hover lift this page inherited from components/uichemy/*.css. Each rule below restates the source's own value above the legacy (0,2,0), so sheet order does not matter. Deliberate transform:none values from the source are restated too, so this cannot resurrect a lift the design suppressed on purpose. Per CLAUDE.md section 5 this !important asserts the page's value over a block being deleted; it becomes a no-op once that block goes. ------------------------- */ .uc-ucc .sw-card.sw-card.sw-tile:hover{ transform: translateY(-4px) !important; } .uc-ucc .trap-card.trap-card:hover{ transform: none !important; } :where(.uc-ucc) .f2w .hero-chip.hero-chip:hover{ transform: translateY(-2px) !important; } :where(.uc-ucc) .f2w .hp-card.hp-card:hover{ transform: translateY(-8px) !important; } :where(.uc-ucc) .f2w .src-tile.src-tile:not(.is-soon):hover{ transform: translateY(-4px) !important; } :where(.uc-ucc) .f2w .sup-card-tray .sup-card.sup-card:hover{ transform: none !important; } :where(.uc-ucc) .f2w .sup-card.sup-card:hover{ transform: translateY(-5px) !important; } :where(.uc-ucc) .f2w .term.term:hover{ transform: translateY(-6px) !important; } :where(.uc-ucc) .f2w .tpl-card.tpl-card:hover{ transform: translateY(-4px) !important; } :where(.uc-ucc) .uc-hero-chip.uc-hero-chip:hover{ transform: translateY(-2px) !important; } :where(.uc-ucc) .f2w .term-grid{ position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(253, 106, 53, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 106, 53, 0.06) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(120% 90% at 72% 0%, #000, transparent 78%); mask-image: radial-gradient(120% 90% at 72% 0%, #000, transparent 78%); }:where(.uc-ucc) .f2w .term-glow{ position: absolute; top: -28%; right: -12%; width: 62%; height: 82%; background: radial-gradient(circle, rgba(253, 106, 53, 0.24), transparent 70%); filter: blur(42px); pointer-events: none; }:where(.uc-ucc) .f2w .term-scan{ position: absolute; left: 0; right: 0; top: 0; height: 84px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(253, 106, 53, 0.1), transparent); animation: f2w-term-scan 5s linear infinite; }:where(.uc-ucc) .f2w .term-bar{ position: relative; display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); }:where(.uc-ucc) .f2w .term-dot{ width: 11px; height: 11px; border-radius: 999px; }:where(.uc-ucc) .f2w .term-file{ margin-left: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.42); font-family: ui-monospace, monospace; line-height: 14px; }:where(.uc-ucc) .f2w .term-live{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--acc); line-height: 14px; }:where(.uc-ucc) .f2w .term-live i{ width: 7px; height: 7px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }:where(.uc-ucc) .f2w .term-body{ position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 20px; font-family: ui-monospace, monospace; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.62); }:where(.uc-ucc) .f2w .term-line{ animation: f2w-term-swap 0.42s ease both; }:where(.uc-ucc) .f2w .term-line .ucx-p, :where(.uc-ucc) .f2w .term-line .ok{ color: var(--acc); }:where(.uc-ucc) .f2w .term-caret{ display: inline-block; width: 8px; height: 15px; margin-left: 3px; vertical-align: -2px; border-radius: 1px; background: var(--acc); animation: f2w-term-blink 1s steps(1) infinite; }:where(.uc-ucc) .f2w .term-tabs{ position: relative; display: flex; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }:where(.uc-ucc) .f2w .term-tab{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.62); transition: background 0.24s var(--ease), border-color 0.24s var(--ease), color 0.24s var(--ease); line-height: 18px; }:where(.uc-ucc) .f2w .term-tab:not(.on):hover{ background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); color: #fff; }:where(.uc-ucc) .f2w .term-tab.on{ background: rgba(253, 106, 53, 0.16); border-color: rgba(253, 106, 53, 0.5); color: var(--acc); }:where(.uc-ucc) .f2w .term-tab-ic{ width: 15px; height: 15px; display: block; }:where(.uc-ucc) .f2w .src-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }@media (max-width: 900px){:where(.uc-ucc) .f2w .src-grid{ grid-template-columns: repeat(2, 1fr); }}@media (max-width: 480px){:where(.uc-ucc) .f2w .src-grid{ grid-template-columns: 1fr; }}:where(.uc-ucc) .f2w .src-tile{ position: relative; display: block; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--cardbd); text-decoration: none; color: inherit; box-shadow: 0 10px 26px -20px rgba(16, 24, 40, 0.22); transition: transform 0.24s var(--ease), border-color 0.24s var(--ease); }:where(.uc-ucc) .f2w .src-tile.is-soon{ cursor: default; }:where(.uc-ucc) .f2w .src-tile.is-soon::after{ content: "Soon"; position: absolute; top: 14px; right: 14px; font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acc2); background: color-mix(in srgb, var(--acc2) 10%, #fff); border: 1px solid color-mix(in srgb, var(--acc2) 22%, transparent); padding: 2px 8px; border-radius: 999px; }:where(.uc-ucc) .f2w .src-tile:not(.is-soon):hover{ transform: translateY(-4px); border-color: var(--acc-line); }:where(.uc-ucc) .f2w .src-ic{ width: 40px; height: 40px; border-radius: 10px; background: var(--mist); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; overflow: hidden; }:where(.uc-ucc) .f2w .src-ic img.logo-img{ width: 24px; height: 24px; object-fit: contain; }:where(.uc-ucc) .f2w .src-ic svg{ width: 22px; height: 22px; color: var(--txd); }:where(.uc-ucc) .f2w .src-tile h3{ margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .src-tile p{ margin: 0; font-size: 14px; line-height: 20px; color: var(--txd); }:where(.uc-ucc) .f2w .mode-seg-wrap{ display: flex; justify-content: center; margin-top: 36px; }:where(.uc-ucc) .f2w .mode-seg{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--mist); border: 1px solid var(--cardbd); }:where(.uc-ucc) .f2w .mode-opt{ padding: 9px 18px; border-radius: 9px; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 500; background: transparent; color: var(--txd); transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); }:where(.uc-ucc) .f2w .mode-opt.on{ background: #fff; color: var(--tx); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }:where(.uc-ucc) .f2w .pbx-pane{ display: none; }:where(.uc-ucc) .f2w .pbx-pane.ucx-is-active{ display: block; animation: f2w-pwfade 0.35s var(--ease); }:where(.uc-ucc) .f2w .pbx-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; margin-top: 40px; }:where(.uc-ucc) .f2w .pbx-ic{ display: flex; flex-direction: column; align-items: center; gap: 11px; width: 112px; }:where(.uc-ucc) .f2w .pbx-tile{ display: grid; place-items: center; background: none; border: 0; box-shadow: none; transition: transform 0.28s var(--ease); animation: f2w-pbx-float 3.6s var(--ease) infinite; }:where(.uc-ucc) .f2w .pbx-tile img{ width: 60px; height: 60px; display: block; border-radius: 15px; }:where(.uc-ucc) .f2w .pbx-ic:not(.is-soon) .pbx-tile img{ filter: drop-shadow(0 8px 20px rgba(253, 106, 53, 0.28)); }:where(.uc-ucc) .f2w .pbx-name{ font-size: 14px; font-weight: 500; color: var(--tx); text-align: center; line-height: 18px; }:where(.uc-ucc) .f2w .pbx-live{ font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--acc); padding: 2px 9px; border-radius: 999px; line-height: 12px; }:where(.uc-ucc) .f2w .pbx-soon{ font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--txf); background: var(--mist); border: 1px solid var(--cardbd); padding: 2px 9px; border-radius: 999px; line-height: 12px; }:where(.uc-ucc) .f2w .pbx-ic:hover .pbx-tile{ transform: translateY(-5px); }:where(.uc-ucc) .f2w .pbx-ic.is-soon .pbx-tile{ animation: none; }:where(.uc-ucc) .f2w .pbx-ic.is-soon .pbx-tile img{ filter: grayscale(1); opacity: 0.42; }:where(.uc-ucc) .f2w .pbx-ic.is-soon .pbx-name{ color: var(--txf); }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(2) .pbx-tile{ animation-delay: 0.3s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(3) .pbx-tile{ animation-delay: 0.6s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(4) .pbx-tile{ animation-delay: 0.9s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(5) .pbx-tile{ animation-delay: 1.2s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(6) .pbx-tile{ animation-delay: 1.5s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(7) .pbx-tile{ animation-delay: 1.8s; }:where(.uc-ucc) .f2w .pbx-grid .pbx-ic:nth-child(8) .pbx-tile{ animation-delay: 2.1s; }:where(.uc-ucc) .f2w .hp-stage{ position: relative; z-index: 2; margin-top: 52px; overflow: hidden; padding: 20px 0; }:where(.uc-ucc) .f2w .hp-stage::before, :where(.uc-ucc) .f2w .hp-stage::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 3; pointer-events: none; }:where(.uc-ucc) .f2w .hp-stage::before{ left: 0; background: linear-gradient(90deg, var(--pg) 0%, transparent 100%); }:where(.uc-ucc) .f2w .hp-stage::after{ right: 0; background: linear-gradient(270deg, var(--pg) 0%, transparent 100%); }:where(.uc-ucc) .f2w .hp-grid{ display: flex; flex-direction: column; gap: 22px; }:where(.uc-ucc) .f2w .hp-row{ display: flex; gap: 22px; justify-content: flex-start; will-change: transform; padding: 0 clamp(20px, 5vw, 80px); }:where(.uc-ucc) .f2w .hp-card{ flex: 0 0 300px; width: 300px; box-sizing: border-box; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--cardbd); box-shadow: 0 14px 34px -22px rgba(16, 24, 40, 0.26); transition: transform 0.34s var(--ease), border-color 0.34s var(--ease), box-shadow 0.34s var(--ease); }:where(.uc-ucc) .f2w .hp-card:hover{ transform: translateY(-8px); border-color: var(--acc-line); box-shadow: 0 26px 54px -28px rgba(16, 24, 40, 0.34); }:where(.uc-ucc) .f2w .hp-thumb{ position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #f4f0ff, #fef2ec); border-bottom: 1px solid var(--line); }:where(.uc-ucc) .f2w .hp-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.45s var(--ease); }:where(.uc-ucc) .f2w .hp-vid.ucx-ready{ opacity: 1; }:where(.uc-ucc) .f2w .hp-badge{ position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx); background: rgba(255, 255, 255, 0.86); border: 1px solid var(--cardbd); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); line-height: 12px; }:where(.uc-ucc) .f2w .hp-meta{ padding: 14px 16px 16px; }:where(.uc-ucc) .f2w .hp-meta h3{ margin: 0 0 5px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .hp-meta p{ font-size: 14px; color: var(--txd); line-height: 20px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }@media (max-width: 640px){:where(.uc-ucc) .f2w .hp-card{ flex-basis: 230px; width: 230px; }}@media (max-width: 768px){:where(.uc-ucc) .f2w .hp-slider .hp-grid{ padding: 0; }:where(.uc-ucc) .f2w .hp-slider .hp-row{ transform: none !important; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; gap: 14px; padding: 4px 16px 16px; scrollbar-width: none; }:where(.uc-ucc) .f2w .hp-slider .hp-row::-webkit-scrollbar{ display: none; }:where(.uc-ucc) .f2w .hp-slider .hp-card{ scroll-snap-align: center; }}:where(.uc-ucc) .f2w .cmp-sec .ucx-sec-head{ max-width: 1040px; }:where(.uc-ucc) .f2w .cmp-sec .ucx-sec-head .ucx-sub{ max-width: 1040px; }:where(.uc-ucc) .f2w .cmp{ --c1: 1.1; --c2: 1.16; --c3: 1.16; --ct: 3.42; position: relative; max-width: 1020px; margin: 68px auto 0; }:where(.uc-ucc) .f2w .cmp-grid{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1.16fr 1.16fr; }:where(.uc-ucc) .f2w .cmp-base{ position: absolute; inset: 0; background: var(--cardbg); border: 1px solid var(--cardbd); border-radius: 20px; z-index: 0; }:where(.uc-ucc) .f2w .cmp-spot{ position: absolute; top: -28px; bottom: -28px; left: calc(100% * var(--c1) / var(--ct)); width: calc(100% * var(--c2) / var(--ct)); border-radius: 20px; background: #0b0b0f; box-shadow: 0 34px 70px -34px rgba(10, 10, 15, 0.6); overflow: hidden; z-index: 1; }:where(.uc-ucc) .f2w .cmp-spot::before{ content: ""; position: absolute; inset: -34px 0 auto 0; height: 122px; background: radial-gradient(120% 150% at 88% -10%, rgba(158, 72, 236, 1) 0%, rgba(158, 72, 236, 0.5) 30%, transparent 62%), radial-gradient(120% 150% at 8% -6%, rgba(255, 194, 128, 1) 0%, rgba(246, 132, 78, 0.66) 32%, transparent 64%), linear-gradient(96deg, #fbad6b 0%, #f0623d 46%, #9741d6 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); }:where(.uc-ucc) .f2w .cmp-cell{ position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 16px 22px; font-size: 16px; line-height: 22px; min-width: 0; overflow-wrap: break-word; word-break: break-word; }:where(.uc-ucc) .f2w .cmp-cell.feat{ color: var(--txd); font-weight: 400; }:where(.uc-ucc) .f2w .cmp-cell.classic{ color: var(--txd); }:where(.uc-ucc) .f2w .cmp-cell.ai{ color: #fff; font-weight: 500; }:where(.uc-ucc) .f2w .cmp-cell.feat:not(.hd), :where(.uc-ucc) .f2w .cmp-cell.classic:not(.hd){ border-top: 1px solid var(--line); }:where(.uc-ucc) .f2w .cmp-cell.ai:not(.hd){ border-top: 1px solid rgba(255, 255, 255, 0.1); }:where(.uc-ucc) .f2w .cmp-cell.ai.first{ border-top: 0; }:where(.uc-ucc) .f2w .cmp-logos{ display: inline-flex; align-items: center; }:where(.uc-ucc) .f2w .cmp-logo{ position: relative; display: inline-flex; transition: transform 0.2s var(--ease); }:where(.uc-ucc) .f2w .cmp-logo + .cmp-logo{ margin-left: -6px; }:where(.uc-ucc) .f2w .cmp-logo img{ width: 32px; height: 32px; border-radius: 9px; display: block; }:where(.uc-ucc) .f2w .cmp-cell.ai .cmp-logo img{ box-shadow: 0 0 0 2.5px #0b0b0f; }:where(.uc-ucc) .f2w .cmp-cell.classic .cmp-logo img{ box-shadow: 0 0 0 2.5px var(--cardbg); }:where(.uc-ucc) .f2w .cmp-logo--fill img{ background: #0a0a0a; object-fit: contain; padding: 5px; }:where(.uc-ucc) .f2w .cmp-logo:hover{ transform: translateY(-6px); z-index: 5; }:where(.uc-ucc) .f2w .cmp-cell.hd{ padding-top: 20px; padding-bottom: 20px; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }:where(.uc-ucc) .f2w .cmp-cell.feat.hd{ color: var(--txf); }:where(.uc-ucc) .f2w .cmp-cell.classic.hd{ color: var(--txf); }:where(.uc-ucc) .f2w .cmp-cell.ai.hd{ padding-top: 24px; padding-bottom: 22px; }:where(.uc-ucc) .f2w .cmp-brand{ display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 14px; line-height: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }@media (max-width: 700px){:where(.uc-ucc) .f2w .cmp{ --c1: 0.9; --c2: 1; --c3: 1; --ct: 2.9; margin-top: 44px; }:where(.uc-ucc) .f2w .cmp-grid{ grid-template-columns: 0.9fr 1fr 1fr; }:where(.uc-ucc) .f2w .cmp-spot{ top: 0; bottom: 0; box-shadow: none; }:where(.uc-ucc) .f2w .cmp-cell{ padding: 12px 12px; font-size: 14px; line-height: 22px; gap: 8px; align-items: flex-start; }:where(.uc-ucc) .f2w .cmp-cell.ai.hd{ padding-top: 14px; }:where(.uc-ucc) .f2w .cmp-brand{ font-size: 12px; line-height: 18px; gap: 6px; }}:where(.uc-ucc) .f2w .rev-wall{ margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; height: 660px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }:where(.uc-ucc) .f2w .rev-col{ overflow: hidden; }:where(.uc-ucc) .f2w .rev-track{ display: flex; flex-direction: column; gap: 18px; animation: f2w-rev-up linear infinite; will-change: transform; }:where(.uc-ucc) .f2w .rev-col:hover .rev-track{ animation-play-state: paused; }:where(.uc-ucc) .f2w .rev-card{ border-radius: 16px; background: #fff; border: 1px solid var(--cardbd); box-shadow: none; transition: border-color 0.28s var(--ease); }:where(.uc-ucc) .f2w .rev-card:hover{ border-color: var(--acc-line); }:where(.uc-ucc) .f2w a.rev-card{ display: block; text-decoration: none; color: inherit; cursor: pointer; }:where(.uc-ucc) .f2w .rev-txt{ padding: 21px; }:where(.uc-ucc) .f2w .rev-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }:where(.uc-ucc) .f2w .rev-who{ display: flex; align-items: center; gap: 11px; }:where(.uc-ucc) .f2w .rev-av{ width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto; background: linear-gradient(135deg, var(--acc), #cc4b23); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; line-height: 18px; }:where(.uc-ucc) .f2w .rev-av.has-img, :where(.uc-ucc) .f2w .rev-yt-row .av.has-img{ position: relative; overflow: hidden; }:where(.uc-ucc) .f2w .rev-av img, :where(.uc-ucc) .f2w .rev-yt-row .av img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--mist); }:where(.uc-ucc) .f2w .rev-handle{ font-size: 14px; font-weight: 500; color: var(--tx); line-height: 18px; }:where(.uc-ucc) .f2w .rev-meta{ font-size: 12px; color: var(--txf); line-height: 14px; }:where(.uc-ucc) .f2w .rev-body{ margin: 0; font-size: 14px; line-height: 22px; color: var(--txd); }:where(.uc-ucc) .f2w .rev-stars{ margin-top: 13px; color: var(--acc); letter-spacing: 1px; font-size: 12px; line-height: 14px; }:where(.uc-ucc) .f2w .rev-glyph{ flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; }:where(.uc-ucc) .f2w .rev-glyph svg{ width: 18px; height: 18px; }:where(.uc-ucc) .f2w .rev-yt-thumb{ position: relative; }:where(.uc-ucc) .f2w .rev-yt-thumb img{ display: block; width: 100%; height: 168px; object-fit: cover; }:where(.uc-ucc) .f2w .rev-yt-thumb .ucx-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 999px; background: #ff3b4e; display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4); }:where(.uc-ucc) .f2w .rev-yt-cap{ padding: 15px 18px 17px; }:where(.uc-ucc) .f2w .rev-yt-cap p{ margin: 0; font-size: 14px; line-height: 20px; color: var(--tx); font-weight: 500; }:where(.uc-ucc) .f2w .rev-yt-row{ margin-top: 13px; display: flex; align-items: center; gap: 10px; }:where(.uc-ucc) .f2w .rev-yt-row .av{ width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, var(--acc), #cc4b23); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; line-height: 14px; }:where(.uc-ucc) .f2w .rev-glyph svg[data-x] path{ fill: var(--tx); }@media (max-width: 1024px){:where(.uc-ucc) .f2w .rev-wall{ grid-template-columns: repeat(2, 1fr); height: 560px; }:where(.uc-ucc) .f2w .rev-wall .rev-col:nth-child(3){ display: none; }}@media (max-width: 640px){:where(.uc-ucc) .f2w .rev-wall{ grid-template-columns: 1fr; height: 620px; }:where(.uc-ucc) .f2w .rev-wall .rev-col:nth-child(n+2){ display: none; }}:where(.uc-ucc) .f2w .faq2{ display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); max-width: 1020px; margin-inline: auto; }:where(.uc-ucc) .f2w .faq2-title{ text-align: left; }:where(.uc-ucc) .f2w .faq2-title .faq2-eyebrow{ display: inline-block; margin-bottom: 16px; }:where(.uc-ucc) .f2w .faq2-title h2{ text-align: left; margin: 0; }:where(.uc-ucc) .f2w .faq2-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; }@media (min-width: 900px){:where(.uc-ucc) .f2w .faq2-grid{ grid-template-columns: minmax(220px, 260px) 1fr; gap: 28px; align-items: start; }}:where(.uc-ucc) .f2w .faq2-side{ display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cardbd); border-radius: 16px; overflow: hidden; }:where(.uc-ucc) .f2w .faq2-cta{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; background: none; border: 0; color: var(--txd); font-size: 16px; line-height: 26px; }:where(.uc-ucc) .f2w .faq2-cta a{ display: inline-flex; align-items: center; gap: 7px; color: var(--acc-dk); text-decoration: none; font-weight: 600; }:where(.uc-ucc) .f2w .faq2-cta a svg{ width: 16px; height: 16px; color: var(--acc); }:where(.uc-ucc) .f2w .faq2-tabs{ position: relative; display: flex; flex-direction: column; gap: 4px; margin: 4px 4px 0; padding: 4px; box-shadow: inset 0 0 0 1px var(--cardbd); border-radius: 12px; background: var(--mist); }:where(.uc-ucc) .f2w .faq2-tab-ind{ position: absolute; left: 4px; right: 4px; top: 0; height: 0; opacity: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); transition: transform 0.24s cubic-bezier(0.3, 0, 0, 1), height 0.24s cubic-bezier(0.3, 0, 0, 1); z-index: 0; pointer-events: none; }:where(.uc-ucc) .f2w .faq2-tab{ position: relative; z-index: 1; text-align: left; padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--txd); transition: color 0.2s var(--ease); }:where(.uc-ucc) .f2w .faq2-tab:hover{ color: var(--tx); }:where(.uc-ucc) .f2w .faq2-tab.on{ color: var(--tx); }:where(.uc-ucc) .f2w .faq-pane{ display: none; flex-direction: column; gap: 12px; }:where(.uc-ucc) .f2w .faq-pane.ucx-is-active{ display: flex; }:where(.uc-ucc) .f2w .faq-item{ border-radius: 16px; background: #fff; border: 1px solid var(--cardbd); overflow: hidden; transition: border-color 0.24s var(--ease); }:where(.uc-ucc) .f2w .faq-item.ucx-open, :where(.uc-ucc) .f2w .faq-item:hover{ border-color: var(--tx); }:where(.uc-ucc) .f2w .faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--tx); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 26px; }:where(.uc-ucc) .f2w .faq-ic{ flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--tx); transition: transform 0.3s var(--ease); }:where(.uc-ucc) .f2w .faq-ic svg{ width: 20px; height: 20px; }:where(.uc-ucc) .f2w .faq-item.ucx-open .faq-ic{ transform: rotate(135deg); }:where(.uc-ucc) .f2w .faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }:where(.uc-ucc) .f2w .faq-item.ucx-open .faq-a{ grid-template-rows: 1fr; }:where(.uc-ucc) .f2w .faq-a > div{ overflow: hidden; }:where(.uc-ucc) .f2w .faq-a p{ margin: 0; padding: 0 24px 22px; color: var(--txd); font-size: 16px; line-height: 26px; }:where(.uc-ucc) .f2w .faq-a a{ color: var(--acc-dk); font-weight: 500; }:where(.uc-ucc) .f2w .sup-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }@media (max-width: 820px){:where(.uc-ucc) .f2w .sup-grid{ grid-template-columns: 1fr 1fr; }}@media (max-width: 440px){:where(.uc-ucc) .f2w .sup-grid{ grid-template-columns: 1fr; }}:where(.uc-ucc) .f2w .sup-card{ padding: 26px 22px; text-align: center; border-radius: 16px; background: #fff; border: 1px solid var(--cardbd); box-shadow: 0 12px 30px -22px rgba(16, 24, 40, 0.22); transition: transform 0.24s var(--ease), border-color 0.24s var(--ease); }:where(.uc-ucc) .f2w .sup-card:hover{ transform: translateY(-5px); border-color: var(--acc-line); }:where(.uc-ucc) .f2w .sup-ic{ width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 15px; background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc-dk); }:where(.uc-ucc) .f2w .sup-ic svg{ width: 23px; height: 23px; }:where(.uc-ucc) .f2w .sup-card h3{ margin: 0 0 6px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .sup-card p{ margin: 0; font-size: 14px; color: var(--txd); line-height: 20px; }:where(.uc-ucc) .f2w .news{ position: relative; margin-top: 40px; border-radius: 20px; padding: 40px 44px; background: var(--mist); border: 1px solid var(--cardbd); }:where(.uc-ucc) .f2w .news-badge{ position: absolute; top: 0; left: 32px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 12px; font-weight: 500; box-shadow: 0 10px 26px -10px rgba(253, 106, 53, 0.7); line-height: 14px; }:where(.uc-ucc) .f2w .news-badge svg{ width: 15px; height: 15px; }:where(.uc-ucc) .f2w .news-inner{ display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }:where(.uc-ucc) .f2w .news-copy{ flex: 1 1 380px; }:where(.uc-ucc) .f2w .news-title{ font-size: 24px; line-height: 30px; margin: 6px 0 0; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; color: var(--tx); }:where(.uc-ucc) .f2w .news-sub{ margin: 10px 0 0; color: var(--txd); font-size: 16px; line-height: 26px; max-width: 56ch; }:where(.uc-ucc) .f2w .news-form{ display: flex; gap: 12px; flex: 0 0 auto; }:where(.uc-ucc) .f2w .news-input{ width: 300px; max-width: 100%; padding: 13px 18px; border-radius: 12px; border: 1px solid var(--cardbd); background: #fff; color: var(--tx); font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.2s var(--ease); line-height: 22px; }:where(.uc-ucc) .f2w .news-input::placeholder{ color: var(--txf); }:where(.uc-ucc) .f2w .news-input:focus{ border-color: var(--acc); }@media (max-width: 860px){:where(.uc-ucc) .f2w .news{ padding: 36px 28px 32px; }:where(.uc-ucc) .f2w .news-inner{ flex-direction: column; align-items: flex-start; gap: 24px; }:where(.uc-ucc) .f2w .news-form{ width: 100%; }:where(.uc-ucc) .f2w .news-input{ flex: 1; width: auto; }}@media (max-width: 560px){:where(.uc-ucc) .f2w .news-form{ flex-direction: column; }:where(.uc-ucc) .f2w .news-form .uc-btn{ width: 100%; }}:where(.uc-ucc) .f2w .logo-eyebrow{ text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txf); margin-bottom: 24px; line-height: 14px; }:where(.uc-ucc) .f2w .logo-band{ position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }:where(.uc-ucc) .f2w .logo-track{ display: flex; gap: 14px; width: max-content; will-change: transform; }:where(.uc-ucc) .f2w .logo-track.no-anim{ animation: f2w-logo-marq 34s linear infinite; }:where(.uc-ucc) .f2w .logo-band .ucx-brand-chip{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 28px; flex: 0 0 auto; will-change: transform; background: none; border: 0; box-shadow: none; }:where(.uc-ucc) .f2w .logo-band .ucx-brand-chip .bc-ic{ height: 22px; width: auto; max-width: none; object-fit: contain; display: block; opacity: 0.5; filter: grayscale(1); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }:where(.uc-ucc) .f2w .logo-band .ucx-brand-chip .bc-tx{ display: inline; font-weight: 700; font-size: 20px; line-height: 20px; letter-spacing: -0.01em; color: var(--tx); opacity: 0.4; white-space: nowrap; transition: opacity 0.4s var(--ease); }:where(.uc-ucc) .f2w .logo-band .ucx-brand-chip.ucx-lit .bc-ic{ opacity: 1; filter: none; }:where(.uc-ucc) .f2w .logo-band .ucx-brand-chip.ucx-lit .bc-tx{ opacity: 0.9; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .ucx-reveal{ opacity: 1 !important; transform: none !important; transition: none; }:where(.uc-ucc) .f2w .ucx-hero, :where(.uc-ucc) .f2w .ucx-hero::before, :where(.uc-ucc) .f2w .ucx-hero::after, :where(.uc-ucc) .f2w .uic-orb, :where(.uc-ucc) .f2w .scan-line, :where(.uc-ucc) .f2w .scan-dot, :where(.uc-ucc) .f2w .dfx-col.c3, :where(.uc-ucc) .f2w .dfx-mark, :where(.uc-ucc) .f2w .dfx-chip i.ucx-dot, :where(.uc-ucc) .f2w .dfx-lbls em, :where(.uc-ucc) .f2w [class*="mtn-"], :where(.uc-ucc) .f2w .hf-h, :where(.uc-ucc) .f2w .hf-f, :where(.uc-ucc) .f2w .hf-ck, :where(.uc-ucc) .f2w .hf-chip i.ucx-dot, :where(.uc-ucc) .f2w .hf-lbls em, :where(.uc-ucc) .f2w .term-scan, :where(.uc-ucc) .f2w .pbx-tile, :where(.uc-ucc) .f2w .rev-track, :where(.uc-ucc) .f2w .logo-track, :where(.uc-ucc) .f2w .demo-chip i, :where(.uc-ucc) .f2w .scan-chip i{ animation: none !important; }:where(.uc-ucc) .f2w .scan-line{ top: 50%; }:where(.uc-ucc) .f2w .mtn-eye, :where(.uc-ucc) .f2w .mtn-h, :where(.uc-ucc) .f2w .mtn-sub, :where(.uc-ucc) .f2w .mtn-card{ opacity: 1 !important; }}@keyframes f2w-drift{ 0% { transform: translate(-8%, 4%) scale(1); } 50% { transform: translate(9%, -7%) scale(1.15); } 100% { transform: translate(-6%, 8%) scale(1.05); } }@keyframes f2w-drift-reverse{ 0% { transform: translate(7%, -5%) scale(1.12); } 50% { transform: translate(-9%, 7%) scale(1); } 100% { transform: translate(6%, -8%) scale(1.18); } }@keyframes f2w-float-a{ 0% { translate: 0 0; } 50% { translate: 5% -7%; } 100% { translate: -4% 6%; } }@keyframes f2w-float-b{ 0% { translate: 0 0; } 50% { translate: -6% 7%; } 100% { translate: 5% -5%; } }@keyframes f2w-blink{ 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }@keyframes f2w-scan-sweep{ from { top: 4%; } to { top: 95%; } }@keyframes f2w-scan-pop{ 0%, 100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1); opacity: 0.92; } 68% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; } }@keyframes f2w-dfx-slide{ 0%, 32% { transform: translateX(calc(-1 * var(--dfxgap, 24px))); } 58%, 90% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--dfxgap, 24px))); } }@keyframes f2w-dfx-bad{ 0%, 30% { opacity: 1; } 42%, 100% { opacity: 0; } }@keyframes f2w-dfx-good{ 0%, 50% { opacity: 0; } 60%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }@keyframes f2w-dfx-dot{ 0%, 45% { background: var(--coral); } 60%, 100% { background: var(--acc); } }@keyframes f2w-dfx-lbl-a{ 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }@keyframes f2w-dfx-lbl-b{ 0%, 50% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }@keyframes f2w-mt-eye{ 0%, 2% { opacity: 0; transform: translateY(var(--fy)); } 9%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-h{ 0%, 6% { opacity: 0; transform: translateY(var(--fy)); } 14%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-sub{ 0%, 11% { opacity: 0; transform: translateY(var(--fy)); } 19%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-c1{ 0%, 22% { opacity: 0; transform: translateY(var(--fy)); } 29%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-c2{ 0%, 25% { opacity: 0; transform: translateY(var(--fy)); } 32%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-c3{ 0%, 28% { opacity: 0; transform: translateY(var(--fy)); } 35%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-c4{ 0%, 31% { opacity: 0; transform: translateY(var(--fy)); } 38%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-mt-c5{ 0%, 34% { opacity: 0; transform: translateY(var(--fy)); } 41%, 85% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(var(--fy)); } }@keyframes f2w-hf-lift-h{ 0%, 10% { transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); } 16%, 88% { transform: translateY(-8px); box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.28), 0 0 0 2px var(--acc); } 100% { transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); } }@keyframes f2w-hf-lift-f{ 0%, 20% { transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } 26%, 88% { transform: translateY(-8px); box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.32), 0 0 0 2px var(--acc); } 100% { transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } }@keyframes f2w-hf-ck1{ 0%, 30% { opacity: 0; transform: scale(0.4); } 36% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 93%, 100% { opacity: 0; } }@keyframes f2w-hf-ck2{ 0%, 40% { opacity: 0; transform: scale(0.4); } 46% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 93%, 100% { opacity: 0; } }@keyframes f2w-hf-dot{ 0%, 42% { background: var(--acc2); } 48%, 100% { background: var(--acc); } }@keyframes f2w-hf-la{ 0%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }@keyframes f2w-hf-lb{ 0%, 44% { opacity: 0; } 50%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }@keyframes f2w-term-scan{ 0% { transform: translateY(-84px); } 100% { transform: translateY(330px); } }@keyframes f2w-term-swap{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }@keyframes f2w-term-blink{ 50% { opacity: 0; } }@keyframes f2w-rev-up{ from { transform: translateY(0); } to { transform: translateY(-50%); } }@keyframes f2w-logo-marq{ to { transform: translateX(-50%); } }@keyframes f2w-pbx-float{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }@keyframes f2w-pwfade{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }:where(.uc-ucc) .f2w .hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }:where(.uc-ucc) .f2w .hero-copy{ display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }:where(.uc-ucc) .f2w .hero-eyebrow{ display: inline-flex; align-items: center; gap: var(--spacing-sprout-8); color: var(--txd); font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; }:where(.uc-ucc) .f2w .hero-copy .uc-eyebrow{ margin-bottom: var(--spacing-sprout-24); }:where(.uc-ucc) .f2w .hero-copy .hero-eyebrow{ margin-bottom: var(--spacing-sprout-20); }:where(.uc-ucc) .f2w .hero-copy .ucx-pill-title{ margin: 0 auto var(--spacing-sprout-20); }:where(.uc-ucc) .f2w .hero-copy .ucx-sub{ max-width: 1100px; margin: 0 auto var(--spacing-sprout-32); }:where(.uc-ucc) .f2w .hero-copy .ucx-cta-row{ gap: var(--spacing-sprout-12); }:where(.uc-ucc) .f2w .ucx-hero .uc-marquee-wrap{ margin-top: 80px; }:where(.uc-ucc) .f2w .hero-video-wrap{ position: relative; margin-top: 80px; }:where(.uc-ucc) .f2w .ucx-pill-title .ucx-brand-chip .ai-cluster{ display: block; width: 100%; height: 100%; }:where(.uc-ucc) .f2w .ucx-hero .hero-video{ position: relative; z-index: 1; margin-top: 0; max-width: none; width: 100%; border-radius: 32px; }@media (min-width: 640px){:where(.uc-ucc) .f2w .ucx-hero .hero-video{ border-radius: 48px; }}@media (min-width: 768px){:where(.uc-ucc) .f2w .ucx-hero .hero-video{ border-radius: 64px; }}@media (min-width: 1025px){:where(.uc-ucc) .f2w .ucx-hero .hero-video{ width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }}:where(.uc-ucc) .f2w .hero-glow{ pointer-events: none; user-select: none; position: absolute; left: 50%; top: 50%; z-index: 0; width: 176%; max-width: none; transform: translate(-50%, -64%); }:where(.uc-ucc) .f2w .ucx-hero .hero-checks{ margin-top: clamp(24px, 3vw, 34px); }:where(.uc-ucc) .f2w .mcpset{ max-width: 640px; margin: 52px auto 0; }:where(.uc-ucc) .f2w .mcpset-panel{ position: relative; background: var(--uc-surface-sunken); border: 1px solid var(--uc-border-subtle); border-radius: var(--uc-radius-16); padding: var(--uc-space-4) var(--uc-space-4) 0; box-shadow: var(--uc-shadow-5); text-align: left; }:where(.uc-ucc) .f2w .mcpset-inner{ background: var(--uc-surface-raised); border: 1px solid var(--uc-border-subtle); border-radius: var(--uc-radius-12); padding: var(--uc-space-24) var(--uc-space-28); }:where(.uc-ucc) .f2w .mcpset-eyebrow{ display: block; font-size: var(--uc-text-xs); font-weight: var(--uc-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--uc-text-subtle); line-height: var(--uc-leading-tight); margin-bottom: var(--uc-space-16); }:where(.uc-ucc) .f2w .mcpset-tabs{ margin-bottom: var(--uc-space-20); }:where(.uc-ucc) .f2w .mcpset-tab-ic{ width: 17px; height: 17px; display: block; object-fit: contain; flex: 0 0 auto; }:where(.uc-ucc) .f2w .mcpset-intro{ margin: 0 0 var(--uc-space-16); color: var(--uc-text-strong); font-size: var(--uc-text-md); line-height: var(--uc-leading-normal); }:where(.uc-ucc) .f2w .mcpset-intro b{ font-weight: var(--uc-weight-semibold); }:where(.uc-ucc) .f2w .mcpset-steps{ margin: 0; padding: 0 0 0 var(--uc-space-20); list-style: decimal; display: flex; flex-direction: column; gap: var(--uc-space-16); }:where(.uc-ucc) .f2w .mcpset-steps > li{ color: var(--uc-text-muted); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); padding-left: var(--uc-space-6); }:where(.uc-ucc) .f2w .mcpset-steps > li::marker{ color: var(--uc-text-subtle); font-weight: var(--uc-weight-semibold); }:where(.uc-ucc) .f2w .mcpset-steps b{ color: var(--uc-text-strong); font-weight: var(--uc-weight-semibold); }:where(.uc-ucc) .f2w .mcpset-steps code{ font-family: var(--uc-font-mono); font-size: var(--uc-text-sm); padding: var(--uc-space-1) var(--uc-space-6); border-radius: var(--uc-radius-6); background: var(--uc-surface-sunken); border: 1px solid var(--uc-border-subtle); color: var(--uc-text-strong); white-space: nowrap; }:where(.uc-ucc) .f2w .mcpset-code{ position: relative; display: flex; align-items: center; margin-top: var(--uc-space-10); background: var(--uc-surface-sunken); border: 1px solid var(--uc-border-subtle); border-radius: var(--uc-radius-8); padding: var(--uc-space-12) var(--uc-space-48) var(--uc-space-12) var(--uc-space-14); overflow: hidden; }:where(.uc-ucc) .f2w .mcpset-code code{ flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--uc-font-mono); font-size: var(--uc-text-sm); line-height: var(--uc-leading-normal); color: var(--uc-text-strong); background: none; border: 0; padding: 0; scrollbar-width: none; }:where(.uc-ucc) .f2w .mcpset-code code::-webkit-scrollbar{ display: none; }:where(.uc-ucc) .f2w .mcpset-copy{ position: absolute; right: var(--uc-space-8); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--uc-radius-8); border: 1px solid var(--uc-border-subtle); background: var(--uc-surface-raised); color: var(--uc-text-muted); cursor: pointer; transition: color var(--uc-dur-fast) var(--uc-ease-standard), border-color var(--uc-dur-fast) var(--uc-ease-standard), background var(--uc-dur-fast) var(--uc-ease-standard); }:where(.uc-ucc) .f2w .mcpset-copy:hover{ color: var(--uc-text-strong); border-color: var(--uc-brand-border); }:where(.uc-ucc) .f2w .mcpset-copy.done{ color: var(--uc-success); border-color: var(--uc-success-border); }:where(.uc-ucc) .f2w .mcpset-copy svg{ width: 16px; height: 16px; }:where(.uc-ucc) .f2w .mcpset-docs{ display: flex; align-items: center; gap: var(--uc-space-3); margin: 0; padding: var(--uc-space-12) var(--uc-space-28); color: var(--uc-text-strong); font-size: var(--uc-text-base); line-height: var(--uc-leading-snug); text-decoration: underline; text-underline-offset: 2px; }:where(.uc-ucc) .f2w .mcpset-docs > svg{ width: 14px; height: 14px; }:where(.uc-ucc) .f2w .mcpset-docs:hover{ color: var(--uc-brand-fg); }:where(.uc-ucc) .f2w .mcpset-docs .mcpset-docs-tail{ color: var(--uc-text-subtle); text-decoration: none; }@media (max-width: 560px){:where(.uc-ucc) .f2w .mcpset-inner{ padding: var(--uc-space-20) var(--uc-space-16); }:where(.uc-ucc) .f2w .mcpset-docs{ padding: var(--uc-space-12) var(--uc-space-16); }}:where(.uc-ucc) .f2w .conv-card{ --conv-gutter: clamp(12px, 1.8vw, 36px); position: relative; overflow: hidden; margin-top: var(--uc-space-40); margin-left: calc(50% - 50vw + var(--conv-gutter)); margin-right: calc(50% - 50vw + var(--conv-gutter)); border-radius: var(--uc-radius-32); padding: clamp(80px, 11vw, 140px) var(--uc-space-24); text-align: center; background: #171717; transform: scale(var(--cs, 0.9)); transform-origin: center; will-change: transform; }:where(.uc-ucc) .f2w .conv-card::before{ content: ""; position: absolute; z-index: 0; pointer-events: none; left: -24.11%; top: -71.84%; width: 148.46%; height: 221.72%; opacity: 0.8; background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI1OTIuNTUiIGhlaWdodD0iMTY4NS4xMSIgdmlld0JveD0iMCAwIDI1OTIuNTUgMTY4NS4xMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDIxNDcyMzc2NDAiPgo8ZyBpZD0iVmVjdG9yIDI3MjYxIiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzM0MjRfMzYwODkpIj4KPHBhdGggZD0iTTE3My4zMDcgMzY5LjQ1NEM0NzQuMjAxIDExMDMuNyAxMzM2LjM3IDEyMzYgMTgxMC44NiAxMjA3LjU4QzE4MjcuNzMgMTIwNi41NyAxODMyLjkyIDEyMzEuMDggMTgxNy42MSAxMjM4LjI0QzM2Mi42NTUgMTkxOC4yNCA5My45Njc0IDk4Ny41OTcgMTQzLjc4NyAzNzMuMDg5QzE0NS4wNzcgMzU3LjE4MiAxNjcuMjU1IDM1NC42ODYgMTczLjMwNyAzNjkuNDU0WiIgZmlsbD0iI0ZGQzU3NCIvPgo8L2c+CjxnIGlkPSJWZWN0b3IgMjcyNjIiIGZpbHRlcj0idXJsKCNmaWx0ZXIxX2ZfMzQyNF8zNjA4OSkiPgo8cGF0aCBkPSJNMjQyNC40OSAzOTguNTEzQzIwNTguNCAxMTY1LjcyIDExMjYuNTMgMTI1MC4wMiA2MjQuNzg2IDExODguNDhDNjA4LjAxMSAxMTg2LjQyIDYwMS41NzIgMTIxMC41OSA2MTYuNDIyIDEyMTguNjZDMjEyNi4yMyAyMDM5LjIyIDI0NjkuNDIgMTA2MC40OSAyNDUzLjc1IDQwMy44NTZDMjQ1My4zNyAzODcuOTAxIDI0MzEuMzYgMzg0LjEwOSAyNDI0LjQ5IDM5OC41MTNaIiBmaWxsPSIjRkQ2QTM1Ii8+CjwvZz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzM0MjRfMzYwODkiIHg9Ii03LjYyOTM5ZS0wNiIgeT0iMjIxLjM1MSIgd2lkdGg9IjE5NjUuMDEiIGhlaWdodD0iMTM5My4zMiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2OS4xNTE1IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMzQyNF8zNjA4OSIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyMV9mXzM0MjRfMzYwODkiIHg9IjQ2OS44MDgiIHk9IjI1MS4yNDIiIHdpZHRoPSIyMTIyLjc1IiBoZWlnaHQ9IjE0MTguNjQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNjkuMTUxNSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzM0MjRfMzYwODkiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg=="); background-size: 100% 100%; background-repeat: no-repeat; }:where(.uc-ucc) .f2w .conv-card > *{ position: relative; z-index: 1; }:where(.uc-ucc) .f2w .conv-card .conv-dots{ position: absolute; inset: 0; z-index: 0; }:where(.uc-ucc) .f2w .conv-eyebrow{ color: var(--uc-text); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 24px; text-transform: none; }:where(.uc-ucc) .f2w .reveal-text{ color: transparent; -webkit-background-clip: text; background-clip: text; }:where(.uc-ucc) .f2w .conv-card .conv-title{ margin: 18px auto 0; max-width: 780px; font-size: 48px; line-height: 56px; font-weight: var(--uc-weight-medium); letter-spacing: -0.02em; text-wrap: balance; color: var(--uc-text-strong); }:where(.uc-ucc) .f2w .conv-card .conv-sub{ margin: var(--uc-space-16) auto 0; max-width: 1040px; font-size: 18px; line-height: 30px; text-wrap: balance; color: var(--uc-text); }:where(.uc-ucc) .f2w .conv-cta{ margin-top: clamp(40px, 5vw, 64px); text-align: center; }:where(.uc-ucc) .f2w .conv-marquee-wrap{ position: relative; display: flex; justify-content: flex-start; margin-top: clamp(40px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%); }:where(.uc-ucc) .f2w .conv-marquee{ display: flex; flex: 0 0 auto; width: max-content; animation: conv-marquee-x 45s linear infinite; will-change: transform; }:where(.uc-ucc) .f2w .conv-marquee-wrap:hover .conv-marquee{ animation-play-state: paused; }:where(.uc-ucc) .f2w .conv-tile{ flex: 0 0 auto; display: grid; place-items: center; width: 90px; height: 90px; margin-right: var(--uc-space-16); border-radius: var(--uc-radius-24); background: var(--uc-inverse-bg); cursor: default; }:where(.uc-ucc) .f2w .conv-tile img{ width: 48px; height: 48px; object-fit: contain; }:where(.uc-ucc) .f2w .conv-tip{ position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: flex; flex-direction: column; gap: 4px; max-width: 300px; padding: 12px 14px; border-radius: 12px; text-align: left; background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); opacity: 0; transform-origin: top left; transition: opacity 0.14s cubic-bezier(0.2, 0, 0, 1); will-change: transform; }:where(.uc-ucc) .f2w .conv-tip.ucx-in{ opacity: 1; }:where(.uc-ucc) .f2w .conv-tip-t{ color: #fff; font-size: 14px; font-weight: 600; line-height: 18px; }:where(.uc-ucc) .f2w .conv-tip-d{ color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 20px; }@keyframes conv-marquee-x{ from { transform: translateX(0); } to { transform: translateX(-50%); } }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .conv-marquee{ animation: none; }}:where(.uc-ucc) .f2w .xway-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; margin: 52px auto 0; max-width: 1120px; }:where(.uc-ucc) .f2w .xway-card{ border-radius: var(--r-xl); overflow: visible; background: var(--pg2); padding: 4px; }:where(.uc-ucc) .f2w .xway-solo .xway-card{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: stretch; }:where(.uc-ucc) .f2w .xway-media{ position: relative; overflow: hidden; min-height: 320px; border: 1px solid var(--cardbd); border-radius: 16px; background: radial-gradient(circle at 1px 1px, rgba(16, 24, 40, 0.07) 1px, transparent 0) 0 0 / 22px 22px, #fff; }:where(.uc-ucc) .f2w.is-night .xway-media{ background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0) 0 0 / 22px 22px, #171717; }:where(.uc-ucc) .f2w .xway-stack{ position: absolute; inset: 0; }:where(.uc-ucc) .f2w .xway-shot{ position: absolute; top: 50%; left: 50%; height: 84%; width: auto; max-width: 62%; object-fit: contain; object-position: top; border-radius: 12px; border: 1px solid var(--cardbd); box-shadow: 0 22px 46px -18px rgba(16, 24, 40, 0.45); background: #fff; transition: transform 0.55s var(--ease); will-change: transform; }:where(.uc-ucc) .f2w .xway-shot.s1{ transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }:where(.uc-ucc) .f2w .xway-shot.s2{ transform: translate(-88%, -46%) rotate(-8deg) scale(0.94); z-index: 2; }:where(.uc-ucc) .f2w .xway-shot.s3{ transform: translate(-12%, -46%) rotate(8deg) scale(0.94); z-index: 1; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s1{ transform: translate(-12%, -46%) rotate(8deg) scale(0.94); z-index: 1; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s2{ transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s3{ transform: translate(-88%, -46%) rotate(-8deg) scale(0.94); z-index: 2; }:where(.uc-ucc) .f2w .xway-body{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 30px 34px; }:where(.uc-ucc) .f2w .xway-body .xic{ width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: #f2f2f2; border: 1px solid #dcdcdc; color: #171717; margin-bottom: 12px; }:where(.uc-ucc) .f2w.is-night .xway-body .xic{ background: var(--cardbg); border-color: var(--cardbd); color: var(--tx); }:where(.uc-ucc) .f2w .xway-body .xic svg{ width: 24px; height: 24px; }:where(.uc-ucc) .f2w .xway-body .xeye{ font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }:where(.uc-ucc) .f2w .xway-body .xeye--live{ display: inline-flex; align-items: center; gap: 7px; color: var(--acc); }:where(.uc-ucc) .f2w .xway-body .xeye--live::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 24%, transparent); }:where(.uc-ucc) .f2w .xway-body h3{ margin: 4px 0 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); }:where(.uc-ucc) .f2w .xway-body p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }:where(.uc-ucc) .f2w .xway-body .xway-link{ margin-top: 6px; color: var(--acc); }:where(.uc-ucc) .f2w .xway-body .xway-link::after{ background: var(--acc); }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .xway-shot{ transition: none; }}@media (max-width: 860px){:where(.uc-ucc) .f2w .xway-solo .xway-card{ grid-template-columns: 1fr; }:where(.uc-ucc) .f2w .xway-media{ border-right: 0; border-bottom: 1px solid var(--line); min-height: 300px; }:where(.uc-ucc) .f2w .xway-body{ padding: 32px 28px 34px; }}:where(.uc-ucc) .f2w .map-ba{ position: relative; width: 100%; max-width: 940px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--cardbd); box-shadow: 0 30px 70px -44px rgba(16, 24, 40, 0.5); user-select: none; touch-action: none; background: #0a0a0a; }:where(.uc-ucc) .f2w .map-ba-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }:where(.uc-ucc) .f2w .map-ba-top{ z-index: 2; will-change: clip-path; }:where(.uc-ucc) .f2w .map-ba-handle{ position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }:where(.uc-ucc) .f2w .map-ba-knob{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.45); cursor: ew-resize; }:where(.uc-ucc) .f2w .map-ba-knob svg{ width: 22px; height: 22px; color: var(--acc); }:where(.uc-ucc) .f2w .map-ba-tag{ position: absolute; z-index: 4; top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; color: #fff; background: rgba(10, 10, 10, 0.62); backdrop-filter: blur(6px); }:where(.uc-ucc) .f2w .map-ba-tag.l{ left: 14px; }:where(.uc-ucc) .f2w .map-ba-tag.r{ right: 14px; }:where(.uc-ucc) .f2w .map-hint{ text-align: center; color: var(--txf); font-size: 14px; line-height: 22px; margin: 16px 0 0; }:where(.uc-ucc) .f2w .map-chips{ margin-top: 30px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }:where(.uc-ucc) .f2w .map-chip-row{ display: flex; gap: 12px; width: max-content; will-change: transform; }:where(.uc-ucc) .f2w .map-chip-row.a{ animation: cm-chips-l 42s linear infinite; }:where(.uc-ucc) .f2w .map-chip-row.b{ animation: cm-chips-r 48s linear infinite; }:where(.uc-ucc) .f2w .widget-chip{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--cardbd); color: var(--txd); font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 16px -12px rgba(16, 24, 40, 0.4); }:where(.uc-ucc) .f2w .widget-chip svg{ width: var(--spacing-sprout-16); height: var(--spacing-sprout-16); flex: 0 0 auto; }:where(.uc-ucc) .f2w .map-cta{ text-align: center; margin-top: 28px; }@keyframes cm-chips-l{ to { transform: translateX(-50%); } }@keyframes cm-chips-r{ from { transform: translateX(-50%); } to { transform: translateX(0); } }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .map-chip-row.a, :where(.uc-ucc) .f2w .map-chip-row.b{ animation: none; }}:where(.uc-ucc) .f2w .tm-bars{ max-width: 980px; margin: 0 auto 44px; display: flex; flex-direction: column; gap: 30px; }:where(.uc-ucc) .f2w .tm-row .tm-top{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }:where(.uc-ucc) .f2w .tm-name{ font-size: 16px; line-height: 24px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .tm-hrs{ font-size: 22px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }:where(.uc-ucc) .f2w .tm-hrs.red{ color: var(--coral); }:where(.uc-ucc) .f2w .tm-hrs.brand{ color: var(--acc); }:where(.uc-ucc) .f2w .tm-track{ position: relative; height: 16px; border-radius: 999px; background: var(--mist); overflow: visible; }:where(.uc-ucc) .f2w .tm-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; }:where(.uc-ucc) .f2w .tm-fill.red{ background: linear-gradient(90deg, #f97b70, var(--coral)); }:where(.uc-ucc) .f2w .tm-fill.brand{ background: linear-gradient(90deg, var(--acc2), var(--acc)); }:where(.uc-ucc) .f2w .tm-live{ position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--cardbd); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--tx); box-shadow: 0 4px 12px -4px rgba(16, 24, 40, 0.3); white-space: nowrap; opacity: 0; transition: opacity 0.4s var(--ease); }:where(.uc-ucc) .f2w .tm-live svg{ width: 12px; height: 12px; color: var(--acc); }:where(.uc-ucc) .f2w .tm-runner{ position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }:where(.uc-ucc) .f2w .tm-runner.red{ background: var(--coral); box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 18%, transparent), 0 4px 14px -2px rgba(16, 24, 40, 0.3); }:where(.uc-ucc) .f2w .tm-runner.brand{ background: var(--acc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 20%, transparent), 0 4px 14px -2px rgba(16, 24, 40, 0.3); }:where(.uc-ucc) .f2w .tm-bars.go .lane-without .tm-fill{ animation: tm-fill 7.2s var(--ease) forwards; }:where(.uc-ucc) .f2w .tm-bars.go .lane-without .tm-runner{ animation: tm-run 7.2s var(--ease) forwards; }:where(.uc-ucc) .f2w .tm-bars.go .lane-with .tm-fill{ animation: tm-fill 1.5s var(--ease) forwards; }:where(.uc-ucc) .f2w .tm-bars.go .lane-with .tm-runner{ animation: tm-run 1.5s var(--ease) forwards; }:where(.uc-ucc) .f2w .tm-bars.go .tm-live{ opacity: 1; transition-delay: 1.4s; }@keyframes tm-fill{ from { width: 0; } to { width: 100%; } }@keyframes tm-run{ from { left: 0; } to { left: 100%; } }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .tm-bars .tm-fill{ width: 100%; animation: none; }:where(.uc-ucc) .f2w .tm-bars .tm-runner{ left: 100%; animation: none; }:where(.uc-ucc) .f2w .tm-bars .tm-live{ opacity: 1; transition: none; }}:where(.uc-ucc) .f2w .tm-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }:where(.uc-ucc) .f2w .tm-card{ padding: 4px; border-radius: var(--r-xl); background: var(--pg2); }:where(.uc-ucc) .f2w .tm-card-in{ background: #fff; border: 1px solid var(--cardbd); border-radius: 16px; padding: 24px 22px; height: 100%; }:where(.uc-ucc) .f2w .tm-card-h{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }:where(.uc-ucc) .f2w .tm-pill{ display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 14px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; }:where(.uc-ucc) .f2w .tm-pill.red{ color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, #fff); }:where(.uc-ucc) .f2w .tm-pill.brand{ color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, #fff); }:where(.uc-ucc) .f2w .tm-card-h h3{ margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .tm-item{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }:where(.uc-ucc) .f2w .tm-item:first-of-type{ border-top: 0; }:where(.uc-ucc) .f2w .tm-item span{ color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .tm-item b{ flex: 0 0 auto; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }:where(.uc-ucc) .f2w .tm-item.red b{ color: var(--coral); }:where(.uc-ucc) .f2w .tm-item.brand b{ color: var(--acc); }:where(.uc-ucc) .f2w .tm-item .tm-free{ color: var(--acc); }:where(.uc-ucc) .f2w .tm-saved{ text-align: center; margin: 40px auto 0; max-width: 640px; }:where(.uc-ucc) .f2w .tm-saved-num{ font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--acc); line-height: 44px; }:where(.uc-ucc) .f2w .tm-saved p{ margin: 12px 0 0; color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .tm-note{ text-align: center; color: var(--txf); font-size: 14px; line-height: 22px; margin: 18px 0 0; }:where(.uc-ucc) .f2w.is-night .tm-card-in{ background: #262626; }:where(.uc-ucc) .f2w.is-night .tm-live{ background: #262626; border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }:where(.uc-ucc) .f2w.is-night .tm-pill.red{ background: color-mix(in srgb, var(--coral) 20%, #1f1f1f); }:where(.uc-ucc) .f2w.is-night .tm-pill.brand{ background: color-mix(in srgb, var(--acc) 20%, #1f1f1f); }@media (max-width: 720px){:where(.uc-ucc) .f2w .tm-cards{ grid-template-columns: 1fr; }}:where(.uc-ucc) .f2w .watch-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }:where(.uc-ucc) .f2w .watch-main-wrap{ padding: 4px; border-radius: var(--r-xl); background: var(--pg2); }:where(.uc-ucc) .f2w .watch-main{ position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--cardbd); background: #000; aspect-ratio: 16 / 9; cursor: pointer; }:where(.uc-ucc) .f2w .watch-main img, :where(.uc-ucc) .f2w .watch-main iframe{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }:where(.uc-ucc) .f2w .watch-main .watch-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 74px; height: 74px; border-radius: 999px; background: var(--acc); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(253, 106, 53, 0.7); transition: transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .watch-main:hover .watch-play{ transform: translate(-50%, -50%) scale(1.06); }:where(.uc-ucc) .f2w .watch-play svg{ width: 30px; height: 30px; color: #fff; margin-left: 3px; }:where(.uc-ucc) .f2w .watch-main .watch-cap{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 20px 18px; color: #fff; font-size: 16px; line-height: 24px; font-weight: 500; background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent); }:where(.uc-ucc) .f2w .watch-list{ display: flex; flex-direction: column; gap: 10px; max-height: 500px; overflow-y: auto; padding: 6px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 7%, #000 88%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 7%, #000 88%, transparent 100%); }:where(.uc-ucc) .f2w .watch-list::-webkit-scrollbar{ width: 0; height: 0; display: none; }:where(.uc-ucc) .f2w .watch-item{ display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; text-align: left; background: none; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }:where(.uc-ucc) .f2w .watch-item:hover{ background: var(--pg2); }:where(.uc-ucc) .f2w .watch-item.on{ background: color-mix(in srgb, var(--acc) 7%, #fff); border-color: var(--acc-line); }:where(.uc-ucc) .f2w.is-night .watch-item.on{ background: color-mix(in srgb, var(--acc) 15%, #1f1f1f); }:where(.uc-ucc) .f2w .watch-thumb{ position: relative; flex: 0 0 108px; width: 108px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }:where(.uc-ucc) .f2w .watch-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }:where(.uc-ucc) .f2w .watch-thumb::after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fd6a35'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-size: 15px; background-repeat: no-repeat; background-position: 56% 50%; }:where(.uc-ucc) .f2w .watch-item .watch-t{ font-size: 14px; font-weight: 500; color: var(--tx); line-height: 20px; }:where(.uc-ucc) .f2w .watch-cta{ text-align: center; margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--txd); font-size: 16px; line-height: 24px; }@media (max-width: 820px){:where(.uc-ucc) .f2w .watch-grid{ grid-template-columns: 1fr; }:where(.uc-ucc) .f2w .watch-list{ flex-direction: row; overflow-x: auto; overflow-y: visible; max-height: none; -webkit-mask-image: none; mask-image: none; }:where(.uc-ucc) .f2w .watch-item{ flex: 0 0 240px; }}:where(.uc-ucc) .f2w .sprout-shot{ max-width: 1000px; margin: 8px auto 0; padding: 4px; border-radius: var(--r-xl); background: var(--pg2); }:where(.uc-ucc) .f2w .sprout-shot img{ display: block; width: 100%; height: auto; border: 1px solid var(--cardbd); border-radius: 16px; }:where(.uc-ucc) .f2w .tpl-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }:where(.uc-ucc) .f2w .tpl-card{ display: flex; flex-direction: column; padding: 4px; border-radius: var(--r-xl); background: var(--pg2); transition: transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .tpl-card:hover{ transform: translateY(-4px); }:where(.uc-ucc) .f2w .tpl-thumb{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border: 1px solid var(--cardbd); border-radius: 16px; }:where(.uc-ucc) .f2w .tpl-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 15px; }:where(.uc-ucc) .f2w .tpl-badge{ position: absolute; top: 12px; left: 12px; z-index: 2; }:where(.uc-ucc) .f2w .tpl-body{ padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }:where(.uc-ucc) .f2w .tpl-body h3{ margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--tx); }:where(.uc-ucc) .f2w .tpl-body p{ margin: 0; color: var(--txd); font-size: 14px; line-height: 20px; }:where(.uc-ucc) .f2w .tpl-cta{ text-align: center; margin-top: 36px; }@media (max-width: 900px){:where(.uc-ucc) .f2w .tpl-grid{ grid-template-columns: 1fr 1fr; }}@media (max-width: 560px){:where(.uc-ucc) .f2w .tpl-grid{ grid-template-columns: 1fr; }}:where(.uc-ucc) .f2w .feat-wrap{ display: grid; grid-template-columns: 250px 1fr; gap: 32px; margin-top: 44px; align-items: start; }:where(.uc-ucc) .f2w .feat-side{ position: sticky; top: 96px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cardbd); border-radius: 16px; overflow: hidden; }:where(.uc-ucc) .f2w .feat-tabs{ position: relative; display: flex; flex-direction: column; gap: 4px; margin: 4px; padding: 4px; box-shadow: inset 0 0 0 1px var(--cardbd); border-radius: 12px; background: var(--mist); }:where(.uc-ucc) .f2w .feat-tab-ind{ position: absolute; left: 4px; right: 4px; top: 0; height: 0; opacity: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); transition: transform 0.24s cubic-bezier(0.3, 0, 0, 1), height 0.24s cubic-bezier(0.3, 0, 0, 1); z-index: 0; pointer-events: none; }:where(.uc-ucc) .f2w .feat-tab{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; padding: 11px 14px; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--txd); transition: color 0.2s var(--ease); }:where(.uc-ucc) .f2w .feat-tab:hover{ color: var(--tx); }:where(.uc-ucc) .f2w .feat-tab.ucx-is-active{ color: var(--tx); }:where(.uc-ucc) .f2w .ft-count{ flex: 0 0 auto; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--txf); background: #fff; box-shadow: inset 0 0 0 1px var(--cardbd); border-radius: 999px; padding: 2px 9px; transition: color 0.2s var(--ease), background 0.2s var(--ease); }:where(.uc-ucc) .f2w .feat-tab.ucx-is-active .ft-count{ color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, #fff); box-shadow: none; }:where(.uc-ucc) .f2w.is-night .feat-side{ background: var(--pg2); }:where(.uc-ucc) .f2w.is-night .feat-tab-ind{ background: #383838; box-shadow: none; }:where(.uc-ucc) .f2w.is-night .ft-count{ background: #262626; color: var(--txd); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }:where(.uc-ucc) .f2w.is-night .feat-tab.ucx-is-active .ft-count{ color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, #1f1f1f); box-shadow: none; }:where(.uc-ucc) .f2w .fbento{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; }:where(.uc-ucc) .f2w .fcard{ padding: 4px; border-radius: var(--r-xl); background: var(--pg2); transition: transform 0.24s var(--ease); }:where(.uc-ucc) .f2w .fcard:hover{ transform: translateY(-4px); }:where(.uc-ucc) .f2w .fcard-in{ display: flex; flex-direction: column; height: 100%; background: transparent; }:where(.uc-ucc) .f2w .fcard .bento-media{ position: relative; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; border: 1px solid var(--cardbd); border-radius: 16px; }:where(.uc-ucc) .f2w .fcard .bento-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }:where(.uc-ucc) .f2w .fcard .bento-vid.ucx-ready{ opacity: 1; }:where(.uc-ucc) .f2w .fcard:hover .bento-vid{ transform: scale(1.03); }:where(.uc-ucc) .f2w .bento-body{ padding: 12px; }:where(.uc-ucc) .f2w .bento-body h3{ margin: 0 0 5px; font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); }:where(.uc-ucc) .f2w .bento-body p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .bento-note{ color: var(--acc); font-weight: 600; }@media (max-width: 900px){:where(.uc-ucc) .f2w .feat-wrap{ grid-template-columns: 1fr; gap: 20px; }:where(.uc-ucc) .f2w .feat-side{ position: static; }}@media (max-width: 620px){:where(.uc-ucc) .f2w .fbento{ grid-template-columns: 1fr; }}@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .fcard .bento-vid{ transition: opacity 0.3s; }:where(.uc-ucc) .f2w .fcard:hover{ transform: none; }:where(.uc-ucc) .f2w .fcard:hover .bento-vid{ transform: none; }}:where(.uc-ucc) .f2w .opt-zig{ margin-top: 44px; display: flex; flex-direction: column; gap: 96px; }:where(.uc-ucc) .f2w .opt-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }:where(.uc-ucc) .f2w .opt-media .ucx-frame{ position: relative; margin: 0; max-width: none; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--cardbd); background: #0b0912; }:where(.uc-ucc) .f2w .opt-media .step-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }:where(.uc-ucc) .f2w .step-replay{ position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; z-index: 3; display: grid; place-items: center; color: #fff; background: rgba(10, 6, 20, 0.6); box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: opacity 0.28s var(--ease), transform 0.2s var(--ease), background 0.2s ease; }:where(.uc-ucc) .f2w .step-replay svg{ margin-left: 3px; }:where(.uc-ucc) .f2w .step-replay:hover{ transform: scale(1.07); background: var(--acc); }:where(.uc-ucc) .f2w .ucx-frame.ucx-vid-playing .step-replay{ opacity: 0; pointer-events: none; transform: scale(0.9); }:where(.uc-ucc) .f2w .opt-copy .ucx-eyebrow, :where(.uc-ucc) .f2w .opt-rail .ucx-eyebrow{ margin-bottom: 16px; }:where(.uc-ucc) .f2w .opt-copy h3, :where(.uc-ucc) .f2w .opt-rail h3{ font-size: 26px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--tx); }:where(.uc-ucc) .f2w .opt-copy p, :where(.uc-ucc) .f2w .opt-rail p{ color: var(--txd); font-size: 16px; line-height: 26px; margin: 0 0 12px; }:where(.uc-ucc) .f2w .opt-copy .opt-note{ color: var(--txf); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .opt-manual{ display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; min-height: 2860px; }:where(.uc-ucc) .f2w .opt-rail{ position: sticky; top: 110px; align-self: start; }:where(.uc-ucc) .f2w .opt-titles{ list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }:where(.uc-ucc) .f2w .opt-title{ display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 12px; color: var(--txf); font-weight: 500; font-size: 16px; line-height: 24px; border: 1px solid transparent; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }:where(.uc-ucc) .f2w .opt-title .ot-num{ font-size: 12px; line-height: 18px; font-weight: 500; color: var(--txf); font-variant-numeric: tabular-nums; }:where(.uc-ucc) .f2w .opt-title.ucx-is-done{ color: var(--txd); }:where(.uc-ucc) .f2w .opt-title.ucx-is-done .ot-num{ color: var(--tx); }:where(.uc-ucc) .f2w .opt-title.ucx-is-active{ color: var(--tx); background: #f1f1f1; border-color: #d6d6d6; }:where(.uc-ucc) .f2w .opt-title.ucx-is-active .ot-num{ color: var(--txd); }:where(.uc-ucc) .f2w .opt-list{ position: sticky; top: calc(50vh - 270px); height: 540px; overflow: hidden; isolation: isolate; }:where(.uc-ucc) .f2w .opt-list::before, :where(.uc-ucc) .f2w .opt-list::after{ content: ""; position: absolute; z-index: 2; right: 0; left: 0; height: 150px; pointer-events: none; }:where(.uc-ucc) .f2w .opt-list::before{ top: 0; background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.96) 24%, rgba(255, 255, 255, 0) 100%); }:where(.uc-ucc) .f2w .opt-list::after{ bottom: 0; background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.96) 24%, rgba(255, 255, 255, 0) 100%); }:where(.uc-ucc) .f2w .opt-list-track{ display: flex; flex-direction: column; gap: 16px; will-change: transform; transition: transform 0.55s cubic-bezier(.2,.7,.2,1); }:where(.uc-ucc) .f2w .opt-item{ display: flex; gap: 14px; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--cardbd); opacity: 0.45; transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); }:where(.uc-ucc) .f2w .opt-item .oi-check{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f2f2f2; border: 1px solid #dcdcdc; color: #cfcfcf; transition: color 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); }:where(.uc-ucc) .f2w .opt-item .oi-check svg{ width: 15px; height: 15px; }:where(.uc-ucc) .f2w .opt-item h4{ margin: 0 0 5px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }:where(.uc-ucc) .f2w .opt-item p{ margin: 0; font-size: 16px; line-height: 26px; color: var(--txd); }:where(.uc-ucc) .f2w .opt-item.is-seen{ opacity: 0.85; }:where(.uc-ucc) .f2w .opt-item.is-seen .oi-check{ color: #171717; border-color: #dcdcdc; background: #f2f2f2; }:where(.uc-ucc) .f2w .opt-item.ucx-is-active{ opacity: 1; background: #f1f1f1; border-color: #d6d6d6; }:where(.uc-ucc) .f2w .opt-item.ucx-is-active .oi-check{ color: #171717; background: #fff; border-color: #d6d6d6; }:where(.uc-ucc) .f2w .opt-item.ucx-is-active h4{ color: var(--tx); }:where(.uc-ucc) .f2w .opt-item.ucx-is-active p{ color: var(--txd); }:where(.uc-ucc) .f2w.is-night .opt-title.ucx-is-active{ background: #262626; border-color: rgba(255, 255, 255, 0.14); }:where(.uc-ucc) .f2w.is-night .opt-list::before{ background: linear-gradient(to bottom, var(--pg) 0%, rgba(23, 23, 23, 0.96) 24%, rgba(23, 23, 23, 0) 100%); }:where(.uc-ucc) .f2w.is-night .opt-list::after{ background: linear-gradient(to top, var(--pg) 0%, rgba(23, 23, 23, 0.96) 24%, rgba(23, 23, 23, 0) 100%); }:where(.uc-ucc) .f2w.is-night .opt-item{ background: var(--cardbg); }:where(.uc-ucc) .f2w.is-night .opt-item .oi-check{ background: #262626; border-color: rgba(255, 255, 255, 0.12); color: #7d7d7d; }:where(.uc-ucc) .f2w.is-night .opt-item.is-seen .oi-check{ background: #262626; border-color: rgba(255, 255, 255, 0.14); color: #f5f5f5; }:where(.uc-ucc) .f2w.is-night .opt-item.ucx-is-active{ background: #262626; border-color: rgba(255, 255, 255, 0.16); }:where(.uc-ucc) .f2w.is-night .opt-item.ucx-is-active .oi-check{ background: #1f1f1f; border-color: rgba(255, 255, 255, 0.18); color: #f5f5f5; }@media (max-width: 900px){:where(.uc-ucc) .f2w .opt-zig{ gap: 56px; }:where(.uc-ucc) .f2w .opt-row{ grid-template-columns: 1fr; gap: 28px; }:where(.uc-ucc) .f2w .opt-manual{ grid-template-columns: 1fr; gap: 28px; min-height: 0; }:where(.uc-ucc) .f2w .opt-rail{ position: static; }:where(.uc-ucc) .f2w .opt-list{ position: static; height: auto; overflow: visible; }:where(.uc-ucc) .f2w .opt-list::before, :where(.uc-ucc) .f2w .opt-list::after{ display: none; }:where(.uc-ucc) .f2w .opt-list-track{ transform: none !important; }}@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .opt-item{ opacity: 1; }:where(.uc-ucc) .f2w .opt-list-track{ transition: none; }}:where(.uc-ucc) .f2w .ucx-sec-head + .uc-content, :where(.uc-ucc) .f2w .ucx-sec-head + .xway-grid, :where(.uc-ucc) .f2w .ucx-sec-head + .feat-wrap, :where(.uc-ucc) .f2w .ucx-sec-head + .opt-zig, :where(.uc-ucc) .f2w .ucx-sec-head + .tm-bars, :where(.uc-ucc) .f2w .ucx-sec-head + .watch-grid, :where(.uc-ucc) .f2w .ucx-sec-head + .sprout-shot, :where(.uc-ucc) .f2w .ucx-sec-head + .map-wrap, :where(.uc-ucc) .f2w .ucx-sec-head + .tpl-grid{ margin-top: 52px; }:where(.uc-ucc) .cm-page .f2w .ucx-sec{ padding-top: 66px; padding-bottom: 66px; }:where(.uc-ucc) .cm-page .f2w .ucx-sec.ax{ padding-bottom: 66px; }:where(.uc-ucc) .cm-page .f2w .ucx-hero{ padding-top: clamp(120px, 15vh, 176px); padding-bottom: 66px; }:where(.uc-ucc) .cm-page .uc-section{ padding-block: 66px; }:where(.uc-ucc) .cm-page .f2w .ucx-sec.sec-faq{ padding-bottom: 132px; }:where(.uc-ucc) .f2w .cm-btabs{ background: #fff; }:where(.uc-ucc) .f2w.is-night .cm-btabs{ background: transparent; }:where(.uc-ucc) .f2w .prob-grid, :where(.uc-ucc) .f2w .sol-grid, :where(.uc-ucc) .f2w .resp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }:where(.uc-ucc) .f2w .sol-grid--swap .sol-media{ order: -1; }:where(.uc-ucc) .f2w .prob-list{ display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }:where(.uc-ucc) .f2w .prob-item{ display: flex; gap: 14px; align-items: flex-start; }:where(.uc-ucc) .f2w .prob-item .pk{ flex-shrink: 0; margin-top: -3px; font-size: 12px; font-weight: 700; color: var(--acc-dk); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--acc-soft); border: 1px solid var(--acc-line); line-height: 14px; }:where(.uc-ucc) .f2w .prob-item p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .prob-item strong{ color: var(--tx); font-weight: 700; }:where(.uc-ucc) .f2w .prob-closing{ margin-top: 24px; color: var(--tx); font-size: 16px; line-height: 26px; border-left: 2px solid var(--acc); padding-left: 16px; }:where(.uc-ucc) .f2w .checklist-tray{ align-self: start; padding: 4px; background: var(--mist); border-radius: var(--r-card); }:where(.uc-ucc) .f2w .checklist{ padding: 24px 26px; border-radius: var(--r-card); background: var(--cardbg); border: 1px solid var(--cardbd); }:where(.uc-ucc) .f2w .cl-ttl{ font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txf); margin-bottom: 4px; line-height: 14px; }:where(.uc-ucc) .f2w .cl-list{ display: flex; flex-direction: column; }:where(.uc-ucc) .f2w .cl-item{ display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 18px; }:where(.uc-ucc) .f2w .cl-item:last-child{ border-bottom: 0; }:where(.uc-ucc) .f2w .cl-box{ width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; position: relative; border: 1.5px solid var(--acc); background: var(--cardbg); transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease); }:where(.uc-ucc) .f2w .cl-text{ position: relative; color: var(--tx); }:where(.uc-ucc) .f2w .cl-pending{ margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--cardbg)); border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent); padding: 2px 8px; border-radius: 999px; opacity: 0; transition: opacity 0.4s var(--ease); line-height: 12px; }:where(.uc-ucc) .f2w .cl-item.done .cl-box::after{ content: ""; position: absolute; inset: 0; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat; transform: scale(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }:where(.uc-ucc) .f2w .cl-item.done .cl-text{ color: var(--txf); }:where(.uc-ucc) .f2w .cl-item.done .cl-text::after{ content: ""; position: absolute; left: -3px; right: -4px; top: 52%; height: 1.4px; border-radius: 2px; background: var(--acc); opacity: .9; transform: translateY(-50%) rotate(-1deg) scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done .cl-box::after{ transform: scale(1); }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done .cl-text::after{ transform: translateY(-50%) rotate(-1deg) scaleX(1); }:where(.uc-ucc) .f2w .checklist.struck .cl-item:not(.done) .cl-box{ border-color: color-mix(in srgb, var(--coral) 60%, transparent); background: color-mix(in srgb, var(--coral) 9%, var(--cardbg)); }:where(.uc-ucc) .f2w .checklist.struck .cl-item:not(.done) .cl-pending{ opacity: 1; animation: f2w-pending-nudge 2.6s var(--ease) infinite; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(1) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(1) .cl-text::after{ transition-delay: 0s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(2) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(2) .cl-text::after{ transition-delay: .2s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(3) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(3) .cl-text::after{ transition-delay: .4s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(4) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(4) .cl-text::after{ transition-delay: .6s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(5) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(5) .cl-text::after{ transition-delay: .8s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(6) .cl-box::after, :where(.uc-ucc) .f2w .checklist.struck .cl-item.done:nth-child(6) .cl-text::after{ transition-delay: 1s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item:nth-child(n+7) .cl-box{ transition-delay: 1.2s; }:where(.uc-ucc) .f2w .checklist.struck .cl-item:nth-child(n+7) .cl-pending{ transition-delay: 1.2s; }@keyframes f2w-pending-nudge{ 0%,80%,100% { transform: translateX(0) rotate(0); } 84% { transform: translateX(-1.5px) rotate(-2.5deg); } 88% { transform: translateX(1.5px) rotate(2.5deg); } 92% { transform: translateX(-1px) rotate(-1.5deg); } 96% { transform: translateX(1px) rotate(1.5deg); } }:where(.uc-ucc) .f2w .sol-points{ list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }:where(.uc-ucc) .f2w .sol-points li{ display: flex; gap: 12px; align-items: flex-start; color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .sol-points .ck{ color: var(--txd); font-weight: 700; flex-shrink: 0; }:where(.uc-ucc) .f2w .sol-points strong{ color: var(--tx); font-weight: 700; }:where(.uc-ucc) .f2w .sol-shot-tray{ align-self: center; padding: 4px; background: var(--mist); border-radius: var(--r-card); }:where(.uc-ucc) .f2w .sol-shot{ border-radius: var(--r-card); overflow: hidden; background: var(--cardbg); border: 1px solid var(--cardbd); transition: border-color 0.34s var(--ease); }:where(.uc-ucc) .f2w .sol-shot img{ width: 100%; height: auto; display: block; }:where(.uc-ucc) .f2w .sol-shot:hover{ border-color: var(--acc-line); }:where(.uc-ucc) .f2w .prob-grid > div > .ucx-eyebrow, :where(.uc-ucc) .f2w .sol-grid > div > .ucx-eyebrow, :where(.uc-ucc) .f2w .resp-grid > div > .ucx-eyebrow{ margin-bottom: 14px; }:where(.uc-ucc) .f2w .prob-grid h2, :where(.uc-ucc) .f2w .sol-grid h2, :where(.uc-ucc) .f2w .resp-grid h2{ text-align: left; }@media (max-width: 860px){:where(.uc-ucc) .f2w .prob-grid, :where(.uc-ucc) .f2w .sol-grid, :where(.uc-ucc) .f2w .resp-grid{ grid-template-columns: minmax(0,1fr); gap: 30px; }:where(.uc-ucc) .f2w .sol-grid--swap .sol-media{ order: 0; }}:where(.uc-ucc) .f2w .ucx-motion-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin: 44px auto 0; max-width: 1060px; }:where(.uc-ucc) .f2w .ucx-motion-card{ padding: 4px 4px 0; display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--mist); }:where(.uc-ucc) .f2w .ucx-motion-card .ucx-frame{ margin: 0; max-width: none; width: 100%; border-radius: 14px; }:where(.uc-ucc) .f2w .motion-body{ padding: 12px 12px; }:where(.uc-ucc) .f2w .motion-body h3{ font-size: 22px; line-height: 34px; margin: 0 0 9px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); }:where(.uc-ucc) .f2w .motion-body p{ margin: 0; color: var(--txd); font-size: 16px; line-height: 26px; }@media (max-width: 760px){:where(.uc-ucc) .f2w .ucx-motion-grid{ grid-template-columns: minmax(0,1fr); }}:where(.uc-ucc) .f2w .ucx-mmock-frame{ display: block; position: relative; aspect-ratio: 16/10; background: #0e1016; border: 1px solid var(--cardbd); overflow: hidden; place-items: stretch; container-type: inline-size; }:where(.uc-ucc) .f2w .mmock-particles{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }:where(.uc-ucc) .f2w .mmock{ position: relative; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; font-size: 1.965cqw; }:where(.uc-ucc) .f2w .mmock-hero{ padding: 2.2em 1.8em 1em; }:where(.uc-ucc) .f2w .mmock-title{ font-size: 2em; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }:where(.uc-ucc) .f2w .mmock-sub{ font-size: 1.2em; color: rgba(255,255,255,.6); margin-top: 0.583em; max-width: 62%; line-height: 1.3; }:where(.uc-ucc) .f2w .mmock-btn{ display: inline-flex; align-items: center; justify-content: center; margin-top: 1.222em; padding: 0.556em 1.333em; border-radius: 0.667em; background: var(--acc); color: var(--cardbg); font-size: 0.9em; font-weight: 700; line-height: 1.556em; }:where(.uc-ucc) .f2w .mmock-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; padding: 1.8em; margin-top: auto; }:where(.uc-ucc) .f2w .mmock-c{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 1em; padding: 1em; display: flex; flex-direction: column; gap: 0.6em; }:where(.uc-ucc) .f2w .mmock-ci{ width: 2.4em; height: 2.4em; border-radius: 0.7em; border: 1px solid rgba(253,106,53,.5); display: grid; place-items: center; color: var(--acc); flex: 0 0 auto; }:where(.uc-ucc) .f2w .mmock-ci svg{ width: 1.4em; height: 1.4em; }:where(.uc-ucc) .f2w .mmock-c strong{ font-size: 1.2em; font-weight: 700; color: #fff; line-height: 1; }:where(.uc-ucc) .f2w .mmock-c small{ font-size: 1em; line-height: 1.2; color: rgba(255,255,255,.55); }:where(.uc-ucc) .f2w .mmock--subtle .mmock-title, :where(.uc-ucc) .f2w .mmock--subtle .mmock-sub, :where(.uc-ucc) .f2w .mmock--subtle .mmock-btn, :where(.uc-ucc) .f2w .mmock--subtle .mmock-c{ opacity: 0; animation: f2w-mm-rise 6s var(--ease) infinite; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-title{ animation-delay: .3s; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-sub{ animation-delay: .5s; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-btn{ animation-delay: .7s; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-cards .mmock-c:nth-child(1){ animation-delay: .95s; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-cards .mmock-c:nth-child(2){ animation-delay: 1.1s; }:where(.uc-ucc) .f2w .mmock--subtle .mmock-cards .mmock-c:nth-child(3){ animation-delay: 1.25s; }:where(.uc-ucc) .f2w .ucx-mmock-frame:has(.mmock--immersive){ background: linear-gradient(rgba(14,16,22,.6), rgba(14,16,22,.6)), radial-gradient(120% 100% at 20% -10%, rgba(253,106,53,.28), transparent 60%); }:where(.uc-ucc) .f2w .mmock--immersive .mmock-btn{ animation: f2w-mm-pulse 2.6s var(--ease) infinite; }:where(.uc-ucc) .f2w .mmock--immersive .mmock-cards .mmock-c{ animation: f2w-mm-float 4.4s var(--ease) infinite; }:where(.uc-ucc) .f2w .mmock--immersive .mmock-cards .mmock-c:nth-child(2){ animation-delay: .5s; }:where(.uc-ucc) .f2w .mmock--immersive .mmock-cards .mmock-c:nth-child(3){ animation-delay: 1s; }@keyframes f2w-mm-rise{ 0% { opacity: 0; transform: translateY(15px); } 12%,82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(15px); } }@keyframes f2w-mm-pulse{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }@keyframes f2w-mm-float{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .mmock--subtle .mmock-title, :where(.uc-ucc) .f2w .mmock--subtle .mmock-sub, :where(.uc-ucc) .f2w .mmock--subtle .mmock-btn, :where(.uc-ucc) .f2w .mmock--subtle .mmock-c{ opacity: 1; animation: none; }:where(.uc-ucc) .f2w .mmock--immersive .mmock-btn, :where(.uc-ucc) .f2w .mmock--immersive .mmock-cards .mmock-c{ animation: none; }}:where(.uc-ucc) .f2w .rp{ display: flex; flex-direction: column; align-items: center; gap: 20px; }:where(.uc-ucc) .f2w .rp-stage{ width: 100%; height: 340px; display: flex; align-items: center; justify-content: center; }:where(.uc-ucc) .f2w .rp-frame{ width: 480px; max-width: 100%; height: 340px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--acc), var(--acc2) 60%, var(--acc)) border-box; box-shadow: 0 22px 54px -30px rgba(16,24,40,.35); transition: width 0.5s var(--ease); display: flex; flex-direction: column; }:where(.uc-ucc) .f2w .rp-frame[data-device="tablet"]{ width: 320px; }:where(.uc-ucc) .f2w .rp-frame[data-device="mobile"]{ width: 210px; }:where(.uc-ucc) .f2w .rp-chrome{ display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--mist); border-bottom: 1px solid var(--line); flex-shrink: 0; }:where(.uc-ucc) .f2w .rp-cdot{ width: 8px; height: 8px; border-radius: 50%; background: var(--cardbd); }:where(.uc-ucc) .f2w .rp-url{ margin-left: 8px; font-size: 12px; color: var(--txf); background: #fff; border: 1px solid var(--line); padding: 2px 10px; border-radius: 20px; white-space: nowrap; overflow: hidden; line-height: 14px; }:where(.uc-ucc) .f2w .rp-screen{ position: relative; overflow: hidden; flex: 1; background: #fff; }:where(.uc-ucc) .f2w .rp-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #fff; }:where(.uc-ucc) .f2w .rp-vid.ucx-is-active{ display: block; }:where(.uc-ucc) .f2w .rp-icons{ display: flex; gap: 8px; }:where(.uc-ucc) .f2w .rp-ic{ width: 44px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--cardbd); color: var(--txd); cursor: pointer; transition: color 0.26s var(--ease), background 0.26s var(--ease), border-color 0.26s var(--ease); }:where(.uc-ucc) .f2w .rp-ic svg{ width: 19px; height: 19px; }:where(.uc-ucc) .f2w .rp-ic:hover{ color: var(--tx); border-color: var(--acc-line); }:where(.uc-ucc) .f2w .rp-ic.ucx-is-active{ color: #fff; background: var(--acc); border-color: var(--acc); }:where(.uc-ucc) .f2w .race{ margin-top: 48px; display: flex; flex-direction: column; gap: 22px; }:where(.uc-ucc) .f2w .race-lane{ display: flex; flex-direction: column; gap: 10px; }:where(.uc-ucc) .f2w .race-meta{ display: flex; align-items: center; justify-content: space-between; }:where(.uc-ucc) .f2w .race-name{ font-size: 14px; font-weight: 700; color: var(--tx); line-height: 18px; }:where(.uc-ucc) .f2w .race-clock{ font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 22px; }:where(.uc-ucc) .f2w .lane-without .race-clock{ color: var(--coral); }:where(.uc-ucc) .f2w .lane-with .race-clock{ color: var(--acc-dk); }:where(.uc-ucc) .f2w .race-track{ position: relative; height: 16px; border-radius: 999px; background: var(--mist); border: 1px solid var(--cardbd); overflow: visible; }:where(.uc-ucc) .f2w .race-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; }:where(.uc-ucc) .f2w .lane-without .race-fill{ background: linear-gradient(90deg, rgba(246,82,88,.4), var(--coral)); }:where(.uc-ucc) .f2w .lane-with .race-fill{ background: linear-gradient(90deg, var(--acc2), var(--acc)); }:where(.uc-ucc) .f2w .race-tick{ position: absolute; top: 50%; width: 2px; height: 10px; transform: translate(-50%, -50%); background: var(--cardbd); border-radius: 2px; }:where(.uc-ucc) .f2w .race-runner{ position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }:where(.uc-ucc) .f2w .lane-without .race-runner{ background: var(--coral); box-shadow: 0 0 0 5px rgba(246,82,88,.16); }:where(.uc-ucc) .f2w .lane-with .race-runner{ background: var(--acc); box-shadow: 0 0 0 5px rgba(253,106,53,.18); }:where(.uc-ucc) .f2w .race-flag{ position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 3; font-size: 12px; font-weight: 700; color: #fff; background: var(--acc); padding: 3px 9px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease); line-height: 14px; }:where(.uc-ucc) .f2w .race.go .lane-without .race-fill{ animation: f2w-race-fill 7.2s var(--ease) forwards; }:where(.uc-ucc) .f2w .race.go .lane-without .race-runner{ animation: f2w-race-run 7.2s var(--ease) forwards; }:where(.uc-ucc) .f2w .race.go .lane-with .race-fill{ animation: f2w-race-fill 1.5s var(--ease) forwards; }:where(.uc-ucc) .f2w .race.go .lane-with .race-runner{ animation: f2w-race-run 1.5s var(--ease) forwards; }:where(.uc-ucc) .f2w .race.go .lane-with .race-flag{ opacity: 1; transition-delay: 1.4s; }@keyframes f2w-race-fill{ from { width: 0; } to { width: 100%; } }@keyframes f2w-race-run{ from { left: 0; } to { left: 100%; } }:where(.uc-ucc) .f2w .race-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }:where(.uc-ucc) .f2w .race-col{ padding: 22px 24px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--cardbd); box-shadow: 0 12px 30px -22px rgba(16,24,40,.22); }:where(.uc-ucc) .f2w .rc-head{ display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--tx); margin-bottom: 16px; line-height: 22px; }:where(.uc-ucc) .f2w .rc-badge{ font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; line-height: 14px; }:where(.uc-ucc) .f2w .rc-bad{ color: var(--coral); background: #fff1ef; border: 1px solid rgba(246,82,88,.4); }:where(.uc-ucc) .f2w .rc-good{ color: #fff; background: var(--acc); }:where(.uc-ucc) .f2w .race-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }:where(.uc-ucc) .f2w .race-col li{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--txd); line-height: 18px; }:where(.uc-ucc) .f2w .race-col li:first-child{ border-top: 0; }:where(.uc-ucc) .f2w .race-col li em{ flex: 0 0 auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }:where(.uc-ucc) .f2w .rc-without li em{ color: var(--coral); }:where(.uc-ucc) .f2w .rc-with li em{ color: var(--acc-dk); }:where(.uc-ucc) .f2w .rc-with li em.rc-auto{ color: var(--acc2); font-weight: 500; }:where(.uc-ucc) .f2w .race-saved{ margin-top: 24px; text-align: center; padding: 34px 24px; border-radius: var(--r-card); background-color: var(--pg); background-image: linear-gradient(135deg, rgba(128, 128, 128, 0.10), rgba(128, 128, 128, 0)); border: 1px solid var(--acc-line); transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }:where(.uc-ucc) .f2w .rs-eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc-dk); line-height: 14px; }:where(.uc-ucc) .f2w .rs-num{ display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: clamp(2.375rem, 6vw, 3.625rem); line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }:where(.uc-ucc) .f2w .rs-num .rs-dash{ color: var(--txf); }:where(.uc-ucc) .f2w .rs-num .rs-unit{ font-size: 14px; font-weight: 700; color: var(--txd); line-height: 20px; }:where(.uc-ucc) .f2w .rs-sub{ margin: 14px 0 0; font-size: 16px; color: var(--txd); line-height: 26px; }:where(.uc-ucc) .f2w .rs-sub b{ color: var(--acc-dk); font-weight: 700; }@media (max-width: 760px){:where(.uc-ucc) .f2w .race-cols{ grid-template-columns: 1fr; }}@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .f2w .race .race-fill{ width: 100% !important; animation: none !important; }:where(.uc-ucc) .f2w .race .race-runner{ left: 100% !important; animation: none !important; }:where(.uc-ucc) .f2w .race .lane-with .race-flag{ opacity: 1; }}:where(.uc-ucc) .f2w .pwr{ padding: 96px 0; overflow: hidden; }:where(.uc-ucc) .f2w .pwr-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 var(--uc-gutter); }:where(.uc-ucc) .f2w .pwr-head{ text-align: center; max-width: 720px; margin: 0 auto 54px; }:where(.uc-ucc) .f2w .pwr-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--acc-dk); background: var(--acc-soft); border: 1px solid var(--acc-line); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; line-height: 18px; }:where(.uc-ucc) .f2w .pwr-head h2{ font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--tx); }:where(.uc-ucc) .f2w .pwr-head h2 .lem{ color: var(--tx); }:where(.uc-ucc) .f2w .pwr-head p{ font-size: 16px; line-height: 26px; color: var(--txd); margin: 0; }:where(.uc-ucc) .f2w .pwr-grid{ display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }@media (max-width: 980px){:where(.uc-ucc) .f2w .pwr-grid{ grid-template-columns: 1fr; gap: 40px; }:where(.uc-ucc) .f2w .pwr-copy, :where(.uc-ucc) .f2w .pwr-editor{ min-width: 0; }}:where(.uc-ucc) .f2w .pwr-copy{ position: relative; min-height: 340px; }:where(.uc-ucc) .f2w .pwr-slidewrap{ position: relative; display: grid; }:where(.uc-ucc) .f2w .pwr-slide{ grid-column: 1; grid-row: 1; opacity: 0; transform: translateY(10px); pointer-events: none; padding-left: 24px; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }:where(.uc-ucc) .f2w .pwr-slide.is-on{ opacity: 1; transform: none; pointer-events: auto; }:where(.uc-ucc) .f2w .pwr-slidewrap::before{ content: ""; position: absolute; left: 0; top: 5px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cardbd); }:where(.uc-ucc) .f2w .pwr-slidewrap::after{ content: ""; position: absolute; left: 0; top: 5px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--acc); transform: scaleY(0); transform-origin: top; }:where(.uc-ucc) .f2w .pwr-slidewrap.ucx-play::after{ animation: f2w-pwrline 10s linear forwards; }@keyframes f2w-pwrline{ from { transform: scaleY(0); } to { transform: scaleY(1); } }:where(.uc-ucc) .f2w .pwr-kick{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txf); margin-bottom: 16px; line-height: 14px; }:where(.uc-ucc) .f2w .pwr-kick .ucx-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }:where(.uc-ucc) .f2w .pwr-kick b{ color: var(--tx); font-weight: 700; }:where(.uc-ucc) .f2w .pwr-slide h3{ font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.18; margin: 0 0 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--tx); }:where(.uc-ucc) .f2w .pwr-slide p{ font-size: 16px; line-height: 26px; color: var(--txd); margin: 0 0 18px; max-width: 440px; }:where(.uc-ucc) .f2w .pwr-tags{ display: flex; flex-wrap: wrap; gap: 8px; }:where(.uc-ucc) .f2w .pwr-tags span{ font-size: 12px; color: var(--txd); background: var(--mist); border: 1px solid var(--cardbd); padding: 6px 12px; border-radius: 8px; line-height: 14px; }:where(.uc-ucc) .f2w .pwr-dots{ display: flex; gap: 8px; margin-top: 40px; margin-left: 24px; }:where(.uc-ucc) .f2w .pwr-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--cardbd); border: 0; padding: 0; cursor: pointer; transition: width 0.24s var(--ease), background 0.24s var(--ease); }:where(.uc-ucc) .f2w .pwr-dot:hover{ background: var(--txf); }:where(.uc-ucc) .f2w .pwr-dot.is-on{ width: 22px; border-radius: 5px; background: var(--acc); }:where(.uc-ucc) .f2w .pwr-editor{ position: relative; display: flex; justify-content: center; }:where(.uc-ucc) .f2w .pwr-editor::before{ content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112%; height: 88%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(253,106,53,.28), rgba(253,106,53,.08) 55%, transparent 76%); filter: blur(64px); }:where(.uc-ucc) .f2w .pwr-panel{ width: 480px; max-width: 100%; height: 832px; zoom: 0.85; display: flex; flex-direction: column; position: relative; z-index: 1; background: #15161a; border: 1px solid #3a3c47; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); font-size: 14px; line-height: 20px; }:where(.uc-ucc) .f2w .pwr-modebar{ display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; border-bottom: 1px solid #2a2c33; }:where(.uc-ucc) .f2w .pwr-modeseg{ display: flex; flex: 1; gap: 2px; background: #26262b; border-radius: 8px; padding: 2px; }:where(.uc-ucc) .f2w .pwr-mode{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 0; background: transparent; color: #a1a1a9; border-radius: 6px; cursor: default; font: inherit; font-size: 12px; font-weight: 600; line-height: 14px; }:where(.uc-ucc) .f2w .pwr-mode svg{ width: 12px; height: 12px; flex: 0 0 auto; }:where(.uc-ucc) .f2w .pwr-mode .lbl{ display: none; }:where(.uc-ucc) .f2w .pwr-panel[data-mode="design"] .pwr-mode[data-m="design"], :where(.uc-ucc) .f2w .pwr-panel[data-mode="developer"] .pwr-mode[data-m="developer"]{ background: #09090b; color: #fafafa; box-shadow: 0 1px 2px rgba(0,0,0,.4); }:where(.uc-ucc) .f2w .pwr-panel[data-mode="design"] .pwr-mode[data-m="design"] .lbl, :where(.uc-ucc) .f2w .pwr-panel[data-mode="developer"] .pwr-mode[data-m="developer"] .lbl{ display: inline; }:where(.uc-ucc) .f2w .pwr-layersbtn{ flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: transparent; border: 0; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-layersbtn svg{ width: 14px; height: 14px; }:where(.uc-ucc) .f2w .pwr-tabs{ display: flex; border-bottom: 1px solid #2a2c33; background: #1a1b20; }:where(.uc-ucc) .f2w .pwr-tab{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px; border: 0; background: transparent; color: #a1a1a9; cursor: default; font: inherit; font-size: 12px; font-weight: 500; position: relative; line-height: 14px; }:where(.uc-ucc) .f2w .pwr-tab svg{ width: 16px; height: 16px; }:where(.uc-ucc) .f2w .pwr-tab::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #f4f5f7; border-radius: 2px; transform: scaleX(0); transition: transform 0.3s var(--ease); }:where(.uc-ucc) .f2w .pwr-panel[data-mode="design"] .pwr-tab[data-t="code"]{ display: none; }:where(.uc-ucc) .f2w .pwr-panel[data-tab="chat"] .pwr-tab[data-t="chat"], :where(.uc-ucc) .f2w .pwr-panel[data-tab="editor"] .pwr-tab[data-t="editor"], :where(.uc-ucc) .f2w .pwr-panel[data-tab="code"] .pwr-tab[data-t="code"]{ color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-panel[data-tab="chat"] .pwr-tab[data-t="chat"]::after, :where(.uc-ucc) .f2w .pwr-panel[data-tab="editor"] .pwr-tab[data-t="editor"]::after, :where(.uc-ucc) .f2w .pwr-panel[data-tab="code"] .pwr-tab[data-t="code"]::after{ transform: scaleX(1); }:where(.uc-ucc) .f2w .pwr-screen{ flex: 1; position: relative; overflow: hidden; }:where(.uc-ucc) .f2w .pwr-view{ position: absolute; inset: 0; display: none; flex-direction: column; opacity: 0; }:where(.uc-ucc) .f2w .pwr-view.is-on{ display: flex; opacity: 1; animation: f2w-pwrview 0.45s var(--ease); }@keyframes f2w-pwrview{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }:where(.uc-ucc) .f2w .pwr-scroll{ flex: 1; overflow: hidden; padding: 0; }:where(.uc-ucc) .f2w .pwr-acc{ border-bottom: 1px solid #2a2c33; }:where(.uc-ucc) .f2w .pwr-acc-h{ display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; font-size: 16px; font-weight: 600; color: #9a9ca6; line-height: 22px; }:where(.uc-ucc) .f2w .pwr-acc-h.ucx-open{ color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-acc-h .hint{ width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-left: auto; margin-right: 10px; opacity: 0; }:where(.uc-ucc) .f2w .pwr-acc-h.ucx-dot .hint{ opacity: 1; }:where(.uc-ucc) .f2w .pwr-acc-h .chev{ width: 16px; height: 16px; color: #9a9ca6; transition: transform 0.3s var(--ease); }:where(.uc-ucc) .f2w .pwr-acc-h.ucx-open .chev{ transform: rotate(180deg); }:where(.uc-ucc) .f2w .pwr-acc-b{ padding: 4px 18px 20px; }:where(.uc-ucc) .f2w .pwr-row{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }:where(.uc-ucc) .f2w .pwr-row .rlab{ flex: 0 0 96px; font-size: 14px; color: #9a9ca6; display: flex; align-items: center; gap: 7px; line-height: 20px; }:where(.uc-ucc) .f2w .pwr-row .rlab .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }:where(.uc-ucc) .f2w .pwr-ctrl{ flex: 1; display: flex; align-items: center; justify-content: space-between; background: #1c1d22; border: 1px solid #34363f; border-radius: 9px; padding: 11px 13px; font-size: 14px; color: #d6d7dc; line-height: 20px; }:where(.uc-ucc) .f2w .pwr-ctrl.mut{ color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-ctrl .unit{ color: #6a6c76; font-size: 14px; line-height: 22px; }:where(.uc-ucc) .f2w .pwr-ctrl svg{ width: 14px; height: 14px; color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-inset-lab{ font-size: 14px; line-height: 22px; color: #9a9ca6; margin: 2px 0 8px; }:where(.uc-ucc) .f2w .pwr-inset-top{ display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 18px; letter-spacing: 0.1em; color: #6a6c76; margin-bottom: 6px; }:where(.uc-ucc) .f2w .pwr-inset-top .u{ display: flex; gap: 12px; align-items: center; }:where(.uc-ucc) .f2w .pwr-inset{ border: 1px solid #34363f; border-radius: 11px; padding: 14px; display: grid; grid-template-columns: 38px 1fr 38px; grid-template-rows: 22px 1fr 22px; gap: 6px; text-align: center; color: #9a9ca6; font-size: 14px; line-height: 22px; align-items: center; }:where(.uc-ucc) .f2w .pwr-inset .ucx-c{ grid-column: 2; grid-row: 2; background: #24262c; border: 1px solid #34363f; border-radius: 7px; padding: 9px; color: #d6d7dc; }:where(.uc-ucc) .f2w .pwr-inset .t{ grid-column: 2; grid-row: 1; }:where(.uc-ucc) .f2w .pwr-inset .b{ grid-column: 2; grid-row: 3; }:where(.uc-ucc) .f2w .pwr-inset .l{ grid-column: 1; grid-row: 2; }:where(.uc-ucc) .f2w .pwr-inset .r{ grid-column: 3; grid-row: 2; }:where(.uc-ucc) .f2w .pwr-addprop{ display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 13px; border: 1px dashed #3f4149; border-radius: 10px; color: #9a9ca6; font-size: 14px; line-height: 22px; }:where(.uc-ucc) .f2w .pwr-addprop .ucx-n{ display: flex; align-items: center; gap: 8px; }:where(.uc-ucc) .f2w .pwr-addprop .av{ display: flex; gap: 6px; align-items: center; }:where(.uc-ucc) .f2w .pwr-addprop .pill, :where(.uc-ucc) .f2w .pwr-addprop .sl{ background: #2a2c33; border-radius: 6px; padding: 4px 9px; font-size: 12px; line-height: 18px; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-divider{ display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 18px; letter-spacing: 0.13em; color: #6a6c76; text-transform: uppercase; margin: 6px 0 16px; }:where(.uc-ucc) .f2w .pwr-divider::before, :where(.uc-ucc) .f2w .pwr-divider::after{ content: ""; flex: 1; height: 1px; background: #2a2c33; }:where(.uc-ucc) .f2w .pwr-foot{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #2a2c33; font-size: 14px; line-height: 22px; color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-foot b{ color: #9a9ca6; font-weight: 600; }:where(.uc-ucc) .f2w .pwr-elhead{ display: flex; align-items: center; gap: 10px; padding: 15px 18px 13px; }:where(.uc-ucc) .f2w .pwr-elhead .sel{ font-family: ui-monospace, monospace; font-size: 14px; line-height: 22px; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-elhead .tagpill{ font-family: ui-monospace, monospace; font-size: 12px; line-height: 18px; color: #9a9ca6; background: #24262c; border: 1px solid #34363f; border-radius: 6px; padding: 3px 8px; }:where(.uc-ucc) .f2w .pwr-elhead .pen{ color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-elhead .grow{ flex: 1; }:where(.uc-ucc) .f2w .pwr-btn{ background: #24262c; border: 1px solid #34363f; border-radius: 9px; padding: 8px 13px; font-size: 14px; line-height: 22px; color: #d6d7dc; display: flex; align-items: center; gap: 6px; }:where(.uc-ucc) .f2w .pwr-btn svg{ width: 13px; height: 13px; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-classrow{ display: flex; align-items: center; gap: 6px; padding: 0 16px 14px; border-bottom: 1px dashed #34363f; margin-bottom: 2px; }:where(.uc-ucc) .f2w .pwr-chip{ display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; padding: 6px 9px; border-radius: 7px; white-space: nowrap; background: #1c1d22; border: 1px solid #34363f; color: #9a9ca6; font-family: ui-monospace, monospace; }:where(.uc-ucc) .f2w .pwr-chip svg{ width: 12px; height: 12px; }:where(.uc-ucc) .f2w .pwr-chip .ucx-d{ width: 6px; height: 6px; border-radius: 50%; background: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-chip .x{ color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-chip.on{ background: #34363f; border-color: #4b4d51; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-chip.add{ background: transparent; border: 0; color: #6a6c76; font-family: inherit; padding: 6px 4px; }:where(.uc-ucc) .f2w .pwr-chip.def{ margin-left: auto; font-family: inherit; }:where(.uc-ucc) .f2w .pwr-chip.def .ucx-d{ background: var(--acc); }:where(.uc-ucc) .f2w .pwr-chat{ display: flex; flex-direction: column; height: 100%; }:where(.uc-ucc) .f2w .pwr-chat-top{ display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #2a2c33; }:where(.uc-ucc) .f2w .pwr-chat-top .hist{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-chat-top .hist svg{ width: 15px; height: 15px; }:where(.uc-ucc) .f2w .pwr-modelchip{ display: flex; align-items: center; gap: 6px; background: #24262c; border: 1px solid #34363f; border-radius: 999px; padding: 5px 11px; font-size: 12px; line-height: 18px; color: #f4f5f7; font-weight: 600; }:where(.uc-ucc) .f2w .pwr-modelchip .live{ width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }:where(.uc-ucc) .f2w .pwr-modelchip svg{ width: 12px; height: 12px; color: var(--acc); }:where(.uc-ucc) .f2w .pwr-modelchip .ver{ color: #9a9ca6; font-weight: 500; font-family: ui-monospace, monospace; font-size: 10px; line-height: 16px; }:where(.uc-ucc) .f2w .pwr-wpseg{ display: flex; gap: 4px; margin: 12px 16px 0; background: #1c1d22; border: 1px solid #2a2c33; border-radius: 10px; padding: 3px; }:where(.uc-ucc) .f2w .pwr-wpseg button{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border: 0; background: transparent; color: #9a9ca6; border-radius: 7px; font: inherit; font-size: 14px; line-height: 22px; font-weight: 600; }:where(.uc-ucc) .f2w .pwr-wpseg button svg{ width: 14px; height: 14px; }:where(.uc-ucc) .f2w .pwr-wpseg button.on{ background: #0e0f12; color: #f4f5f7; box-shadow: 0 1px 2px rgba(0,0,0,.4); }:where(.uc-ucc) .f2w .pwr-target{ display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 16px; font-size: 12px; line-height: 14px; color: #d6d7dc; background: #1c1d22; border-top: 1px solid #2a2c33; border-bottom: 1px solid #2a2c33; }:where(.uc-ucc) .f2w .pwr-target svg{ width: 13px; height: 13px; flex: 0 0 auto; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-target .msg{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }:where(.uc-ucc) .f2w .pwr-target code{ font-family: ui-monospace, monospace; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-target .x{ flex: 0 0 auto; color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-chat-mid{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 16px; }:where(.uc-ucc) .f2w .pwr-orb{ width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(253,106,53,.16); color: var(--acc); }:where(.uc-ucc) .f2w .pwr-orb svg{ width: 22px; height: 22px; }:where(.uc-ucc) .f2w .pwr-chat-mid h4{ font-size: 16px; line-height: 24px; margin: 0 0 20px; text-align: center; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-sugg{ width: 100%; display: flex; flex-direction: column; gap: 8px; }:where(.uc-ucc) .f2w .pwr-sugg button{ display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 13px; border-radius: 9px; background: #1c1d22; border: 1px solid #34363f; color: #d6d7dc; font: inherit; font-size: 12px; line-height: 18px; text-align: left; }:where(.uc-ucc) .f2w .pwr-sugg button svg{ width: 15px; height: 15px; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-composer2{ padding: 11px 16px 13px; border-top: 1px solid #2a2c33; }:where(.uc-ucc) .f2w .pwr-ctxrow{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }:where(.uc-ucc) .f2w .pwr-ctxrow .cx{ font-size: 12px; line-height: 18px; letter-spacing: 0.1em; color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-ctxrow .cchip{ display: flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 18px; color: #d6d7dc; background: #24262c; border: 1px solid #34363f; border-radius: 7px; padding: 5px 9px; }:where(.uc-ucc) .f2w .pwr-ctxrow .cchip .x{ color: #6a6c76; }:where(.uc-ucc) .f2w .pwr-ctxrow .mini{ margin-left: auto; display: flex; gap: 8px; }:where(.uc-ucc) .f2w .pwr-ctxrow .mini button{ display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; line-height: 18px; color: #9a9ca6; background: #1c1d22; border: 1px solid #34363f; border-radius: 8px; padding: 7px 11px; }:where(.uc-ucc) .f2w .pwr-ctxrow .mini button svg{ width: 13px; height: 13px; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-prompt{ background: #1c1d22; border: 1px solid #34363f; border-radius: 12px; padding: 11px; }:where(.uc-ucc) .f2w .pwr-prompt .txt{ font-size: 14px; line-height: 20px; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-prompt .txt .car{ display: inline-block; width: 1.5px; height: 1.05em; background: var(--acc); vertical-align: -2px; margin-left: 1px; animation: f2w-pwrcar 1s steps(1) infinite; }@keyframes f2w-pwrcar{ 50% { opacity: 0; } }:where(.uc-ucc) .f2w .pwr-prompt .prow{ display: flex; align-items: center; gap: 10px; margin-top: 11px; }:where(.uc-ucc) .f2w .pwr-prompt .prow .img{ width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #1c1d22; border: 1px solid #34363f; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-prompt .prow .img svg{ width: 15px; height: 15px; }:where(.uc-ucc) .f2w .pwr-prompt .prow .msel{ display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: #d6d7dc; background: #1c1d22; border: 1px solid #34363f; border-radius: 9px; padding: 8px 12px; }:where(.uc-ucc) .f2w .pwr-prompt .prow .msel svg{ width: 13px; height: 13px; color: #9a9ca6; }:where(.uc-ucc) .f2w .pwr-prompt .prow .send{ margin-left: auto; display: flex; align-items: center; gap: 8px; background: #f4f5f7; color: #15161a; font-weight: 700; font-size: 14px; line-height: 22px; border-radius: 10px; padding: 10px 15px; }:where(.uc-ucc) .f2w .pwr-prompt .prow .send svg{ width: 14px; height: 14px; }:where(.uc-ucc) .f2w .pwr-prompt .prow .send kbd{ font-family: ui-monospace, monospace; font-size: 12px; line-height: 18px; color: rgba(10,10,14,.55); }:where(.uc-ucc) .f2w .pwr-code{ display: flex; flex-direction: column; height: 100%; }:where(.uc-ucc) .f2w .pwr-codeseg{ display: flex; align-items: center; gap: 2px; margin: 10px 14px; padding: 2px; background: #26262b; border-radius: 8px; }:where(.uc-ucc) .f2w .pwr-codeseg button{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; background: transparent; border-radius: 6px; color: #a1a1a9; font: inherit; font-size: 12px; line-height: 18px; font-weight: 600; }:where(.uc-ucc) .f2w .pwr-codeseg button svg{ width: 15px; height: 15px; }:where(.uc-ucc) .f2w .pwr-codeseg button.on{ background: #09090b; color: #fafafa; box-shadow: 0 1px 2px rgba(0,0,0,.4); }:where(.uc-ucc) .f2w .pwr-codewrap{ flex: 1; overflow: hidden; padding: 4px 14px 0; display: flex; flex-direction: column; gap: 10px; }:where(.uc-ucc) .f2w .pwr-card{ background: #1c1d22; border: 1px solid #2a2c33; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }:where(.uc-ucc) .f2w .pwr-card-h{ display: flex; align-items: center; gap: 9px; padding: 8px 14px; color: #d6d7dc; font-size: 14px; line-height: 22px; font-weight: 600; }:where(.uc-ucc) .f2w .pwr-card-h .ci{ width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; line-height: 16px; font-weight: 800; color: #15161a; }:where(.uc-ucc) .f2w .pwr-card-h .ci.html{ background: #e34f26; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-card-h .ci.css{ background: #264de4; color: #f4f5f7; }:where(.uc-ucc) .f2w .pwr-card-h .ci.js{ background: var(--acc); color: #15161a; }:where(.uc-ucc) .f2w .pwr-card-h .acts{ margin-left: auto; display: flex; gap: 12px; color: #6a6c76; font-size: 12px; line-height: 18px; font-weight: 500; }:where(.uc-ucc) .f2w .pwr-card-h .acts span{ display: inline-flex; align-items: center; gap: 4px; }:where(.uc-ucc) .f2w .pwr-card-h .acts svg{ width: 12px; height: 12px; }:where(.uc-ucc) .f2w .pwr-card-h .badge{ background: #2a2c33; border-radius: 5px; padding: 1px 5px; font-size: 10px; line-height: 16px; }:where(.uc-ucc) .f2w .pwr-code-b{ display: flex; font-family: ui-monospace, monospace; font-size: 12px; line-height: 20px; }:where(.uc-ucc) .f2w .pwr-gutter{ flex: 0 0 auto; padding: 10px 10px 12px 14px; color: #4b4d55; text-align: right; user-select: none; }:where(.uc-ucc) .f2w .pwr-lines{ flex: 1; min-width: 0; padding: 10px 14px 12px 0; color: #d6d7dc; white-space: pre; overflow: hidden; }:where(.uc-ucc) .f2w .sx-pun{ color: #8a8d97; }:where(.uc-ucc) .f2w .sx-tag{ color: #f0776a; }:where(.uc-ucc) .f2w .sx-attr{ color: #d1a45f; }:where(.uc-ucc) .f2w .sx-str{ color: #a7cf8a; }:where(.uc-ucc) .f2w .sx-com{ color: #5f6270; font-style: italic; }:where(.uc-ucc) .f2w .sx-sel{ color: #e0b062; }:where(.uc-ucc) .f2w .sx-prop{ color: #7db2ef; }:where(.uc-ucc) .f2w .sx-kw{ color: #c98af0; }:where(.uc-ucc) .f2w .sx-fn{ color: #7db2ef; }@media (max-width: 980px){:where(.uc-ucc) .f2w .pwr-panel{ height: 720px; }}@media (max-width: 480px){:where(.uc-ucc) .f2w .hero-copy .ucx-cta-row{ row-gap: 36px; }}@media (max-width: 480px){:where(.uc-ucc) .f2w.aem .cl-item .cl-box, :where(.uc-ucc) .f2w.aem .cl-item .cl-pending{ align-self: flex-start; }}:where(.uc-ucc) .f2w .xway-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 44px auto 0; max-width: 1020px; }:where(.uc-ucc) .f2w .xway-card{ display: flex; flex-direction: column; padding: 4px; background: var(--mist); border-radius: var(--r-card); }:where(.uc-ucc) .f2w .xway-media{ position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid var(--cardbd); background: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.05) 1px, transparent 0) 0 0 / 22px 22px, var(--pg2); }:where(.uc-ucc) .f2w .xway-stack{ position: absolute; inset: 0; }:where(.uc-ucc) .f2w .xway-shot{ position: absolute; top: 50%; left: 50%; height: 84%; width: auto; max-width: 62%; object-fit: contain; border-radius: 10px; border: 1px solid var(--cardbd); background: var(--cardbg); transition: transform 0.55s var(--ease); will-change: transform; }:where(.uc-ucc) .f2w .xway-shot.s1{ transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }:where(.uc-ucc) .f2w .xway-shot.s2{ transform: translate(-88%, -46%) rotate(-8deg) scale(0.94); z-index: 2; }:where(.uc-ucc) .f2w .xway-shot.s3{ transform: translate(-12%, -46%) rotate(8deg) scale(0.94); z-index: 1; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s1{ transform: translate(-12%, -46%) rotate(8deg) scale(0.94); z-index: 1; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s2{ transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }:where(.uc-ucc) .f2w .xway-card:hover .xway-shot.s3{ transform: translate(-88%, -46%) rotate(-8deg) scale(0.94); z-index: 2; }:where(.uc-ucc) .f2w .xway-soon{ position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: linear-gradient(color-mix(in srgb, var(--pg2) 55%, transparent), color-mix(in srgb, var(--pg2) 80%, transparent)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }:where(.uc-ucc) .f2w .xway-soon span{ padding: 8px 18px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txd); border: 1px solid var(--cardbd); background: var(--cardbg); }:where(.uc-ucc) .f2w .xway-body{ display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 12px 12px; }:where(.uc-ucc) .f2w .xic{ display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--cardbg)); border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent); }:where(.uc-ucc) .f2w .xic svg{ width: 22px; height: 22px; }:where(.uc-ucc) .f2w .xeye{ margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 14px; color: var(--txf); }:where(.uc-ucc) .f2w .xeye--live{ color: var(--acc); }:where(.uc-ucc) .f2w .xway-card h3{ margin: 0 0 8px; color: var(--tx); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 26px; }:where(.uc-ucc) .f2w .xway-card p{ margin: 0 0 16px; color: var(--txd); font-size: 16px; line-height: 24px; }:where(.uc-ucc) .f2w .xway-link{ margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--acc); text-decoration: none; font-weight: 600; }:where(.uc-ucc) .f2w .xway-link svg{ width: 18px; height: 18px; }@media (max-width: 760px){:where(.uc-ucc) .f2w .xway-grid{ grid-template-columns: minmax(0, 1fr); }}:where(.uc-ucc) .f2w .sup-card-tray{ display: flex; padding: 4px; background: var(--mist); border-radius: var(--r-card); }:where(.uc-ucc) .f2w .sup-card-tray .sup-card{ flex: 1; box-shadow: none; }:where(.uc-ucc) .f2w .sup-card-tray .sup-card:hover{ transform: none; border-color: var(--cardbd); } @keyframes uc-rev-up{ from { transform: translateY(0); } to { transform: translateY(-50%); } }:where(.uc-ucc) .uc-rev-track{ animation: uc-rev-up var(--dur,48s) linear infinite; will-change: transform; }:where(.uc-ucc) .uc-rev-track.rev{ animation-direction: reverse; }:where(.uc-ucc) .uc-rev-col:hover .uc-rev-track{ animation-play-state: paused; }@media (prefers-reduced-motion: reduce){:where(.uc-ucc) .uc-rev-track{ animation: none; }} /* --------------------------------------------------------------------------- Independence from #uichemy-globals. The ucx- renames dodge every class-scoped rule in the old block. What is left are its BARE-ELEMENT rules, which no rename can reach: body h1..h6 { font-weight:600 !important; letter-spacing:-.02em !important } h1, h2, h3, h4 { line-height: var(--uc-lh-tight); margin: 0 0 var(--uc-s4) } .elementor a { box-shadow: none } The margin half is answered by the generated block at the top of this file. Measured, not guessed: globals' six bare-element rules were injected into the local render and computed styles diffed across all 1142 elements in scope. 34 font-weight, 30 letter-spacing, 12 line-height and 3 box-shadow diffs came back; the blocks below are exactly those, and nothing else. Only an !important beats an !important, so the weights and the tracking are re-asserted from the verified local render, UNLAYERED so they beat globals while still losing to this page's own !important utilities in @layer utilities. Every selector carries a class, to outrank globals' (0,0,2). */ :where(.uc-ucc) h1.ucx-pill-title{font-weight:500!important;letter-spacing:-0.02em!important} :where(.uc-ucc) .ucx-sec-head h2{font-weight:500!important;letter-spacing:-0.02em!important} :where(.uc-ucc) h2.h1{font-weight:500!important;letter-spacing:-0.5px!important} :where(.uc-ucc) h2.display{font-weight:500!important;letter-spacing:-1px!important} :where(.uc-ucc) h2.mt-3.text-\[48px\]{font-weight:500!important;letter-spacing:-0.03em!important} :where(.uc-ucc) .trap-row h3{font-weight:600!important;letter-spacing:-0.01em!important} :where(.uc-ucc) .ax-h h3{font-weight:600!important;letter-spacing:-0.01em!important} :where(.uc-ucc) h3.ds-t18{font-weight:600!important;letter-spacing:-0.18px!important} :where(.uc-ucc) .motion-body h3{font-weight:500!important;letter-spacing:-0.01em!important} :where(.uc-ucc) .fm-body h3{font-weight:500!important;letter-spacing:-0.01em!important} /* --------------------------------------------------------------------------- Heading line-height that the design NEVER SETS. The generated block re-declares the `leading-*` utilities a heading carries, because globals' unlayered `h1..h4 { line-height: var(--uc-lh-tight) }` beats a LAYERED utility. These three signatures carry no leading utility at all: the design takes the inherited 1.6, and an inherited value loses to that rule outright, so globals was shrinking them (16.32px heading 26.1px -> 18.8px). A plain local diff cannot see this, which is what the globals pass is for. Not !important: globals' line-height rule is a NORMAL declaration, so an unlayered normal rule carrying a class already wins. */ :where(.uc-ucc) .trap-row h3, :where(.uc-ucc) .fm-body h3{line-height:1.6} /* --------------------------------------------------------------------------- globals' `.elementor a { box-shadow:none }` at (0,1,1) outranks this page's own button rules at (0,1,0) and flattens all three CTAs. Re-asserted here at (0,2,0)+ with the SAME tokens the page already uses, so there is one source of truth for the values and the state rules keep their relative order. */ .uc-ucc .Button_solid__hu289{box-shadow:var(--_shadow, var(--uc-shadow-control-brand))} .uc-ucc .Button_outline__Zwmoe{box-shadow:inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised)} .uc-ucc .Button_solid__hu289.Button_neutral__jwE0u{box-shadow:var(--uc-shadow-control)} .uc-ucc .Button_solid__hu289:active:not(:disabled){box-shadow:var(--uc-shadow-control-pressed)} /* --------------------------------------------------------------------------- NO img height rule here, deliberately. The awf build needed `.uc-awf.uicawf-root img.h-full{height:100%}` to beat Elementor's `.elementor img{height:auto}`. Copying it here BROKE this page: the wall-of-love avatars are `absolute inset-0`, so with height:auto they size to the containing block (40.80px) and an explicit 100% resolves against the parent instead (40px). Elementor's height:auto produces the correct value on its own, so the rule is both unnecessary and wrong. Measured, not assumed: with it, 20 box and 34 style diffs in the testimonials section; without it, zero. */ /* Radius utilities fail two ways after conversion, both fixed here. 1. Elementor ships `.elementor img{ ... border-radius:0 }` at (0,1,1); these utilities are wrapped in :where() - zero specificity by design - so on an Elementor's reset wins and the corner renders square. 2. Some values used in the markup were purged and had no rule on ANY element. Restating each used value at (0,2,0) covers both, page-scoped, no !important. */ .uc-ucc .rounded-\[9px\]{ border-radius: 9px; }.uc-ucc .rounded-\[10px\]{ border-radius: 10px; }.uc-ucc .rounded-\[12px\]{ border-radius: 12px; }.uc-ucc .rounded-\[16px\]{ border-radius: 16px; }.uc-ucc .rounded-\[20px\]{ border-radius: 20px; }.uc-ucc .rounded-\[24px\]{ border-radius: 24px; }.uc-ucc .rounded-\[28px\]{ border-radius: 28px; }.uc-ucc .rounded-\[30px\]{ border-radius: 30px; }.uc-ucc .rounded-\[34px\]{ border-radius: 34px; }