/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --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: ""
        }
    }
}

@layer theme {

    :root,
    :host {
        --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: "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
        --color-red-50: oklch(97.1% .013 17.38);
        --color-red-100: oklch(93.6% .032 17.717);
        --color-red-200: oklch(88.5% .062 18.334);
        --color-red-300: oklch(80.8% .114 19.571);
        --color-red-400: oklch(70.4% .191 22.216);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-600: oklch(57.7% .245 27.325);
        --color-red-700: oklch(50.5% .213 27.518);
        --color-red-800: oklch(44.4% .177 26.899);
        --color-red-900: oklch(39.6% .141 25.723);
        --color-red-950: oklch(25.8% .092 26.042);
        --color-orange-50: oklch(98% .016 73.684);
        --color-orange-100: oklch(95.4% .038 75.164);
        --color-orange-200: oklch(90.1% .076 70.697);
        --color-orange-300: oklch(83.7% .128 66.29);
        --color-orange-400: oklch(75% .183 55.934);
        --color-orange-500: oklch(70.5% .213 47.604);
        --color-orange-600: oklch(64.6% .222 41.116);
        --color-orange-700: oklch(55.3% .195 38.402);
        --color-orange-800: oklch(47% .157 37.304);
        --color-orange-900: oklch(40.8% .123 38.172);
        --color-orange-950: oklch(26.6% .079 36.259);
        --color-amber-50: oklch(98.7% .022 95.277);
        --color-amber-100: oklch(96.2% .059 95.617);
        --color-amber-200: oklch(92.4% .12 95.746);
        --color-amber-300: oklch(87.9% .169 91.605);
        --color-amber-400: oklch(82.8% .189 84.429);
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-amber-600: oklch(66.6% .179 58.318);
        --color-amber-700: oklch(55.5% .163 48.998);
        --color-amber-800: oklch(47.3% .137 46.201);
        --color-amber-900: oklch(41.4% .112 45.904);
        --color-amber-950: oklch(27.9% .077 45.635);
        --color-yellow-50: oklch(98.7% .026 102.212);
        --color-yellow-100: oklch(97.3% .071 103.193);
        --color-yellow-200: oklch(94.5% .129 101.54);
        --color-yellow-300: oklch(90.5% .182 98.111);
        --color-yellow-400: oklch(85.2% .199 91.936);
        --color-yellow-500: oklch(79.5% .184 86.047);
        --color-yellow-600: oklch(68.1% .162 75.834);
        --color-yellow-700: oklch(55.4% .135 66.442);
        --color-yellow-800: oklch(47.6% .114 61.907);
        --color-yellow-900: oklch(42.1% .095 57.708);
        --color-yellow-950: oklch(28.6% .066 53.813);
        --color-lime-50: oklch(98.6% .031 120.757);
        --color-lime-100: oklch(96.7% .067 122.328);
        --color-lime-200: oklch(93.8% .127 124.321);
        --color-lime-300: oklch(89.7% .196 126.665);
        --color-lime-400: oklch(84.1% .238 128.85);
        --color-lime-500: oklch(76.8% .233 130.85);
        --color-lime-600: oklch(64.8% .2 131.684);
        --color-lime-700: oklch(53.2% .157 131.589);
        --color-lime-800: oklch(45.3% .124 130.933);
        --color-lime-900: oklch(40.5% .101 131.063);
        --color-lime-950: oklch(27.4% .072 132.109);
        --color-green-50: oklch(98.2% .018 155.826);
        --color-green-100: oklch(96.2% .044 156.743);
        --color-green-200: oklch(92.5% .084 155.995);
        --color-green-300: oklch(87.1% .15 154.449);
        --color-green-400: oklch(79.2% .209 151.711);
        --color-green-500: oklch(72.3% .219 149.579);
        --color-green-600: oklch(62.7% .194 149.214);
        --color-green-700: oklch(52.7% .154 150.069);
        --color-green-800: oklch(44.8% .119 151.328);
        --color-green-900: oklch(39.3% .095 152.535);
        --color-green-950: oklch(26.6% .065 152.934);
        --color-emerald-50: oklch(97.9% .021 166.113);
        --color-emerald-100: oklch(95% .052 163.051);
        --color-emerald-200: oklch(90.5% .093 164.15);
        --color-emerald-300: oklch(84.5% .143 164.978);
        --color-emerald-400: oklch(76.5% .177 163.223);
        --color-emerald-500: oklch(69.6% .17 162.48);
        --color-emerald-600: oklch(59.6% .145 163.225);
        --color-emerald-700: oklch(50.8% .118 165.612);
        --color-emerald-800: oklch(43.2% .095 166.913);
        --color-emerald-900: oklch(37.8% .077 168.94);
        --color-emerald-950: oklch(26.2% .051 172.552);
        --color-teal-50: oklch(98.4% .014 180.72);
        --color-teal-100: oklch(95.3% .051 180.801);
        --color-teal-200: oklch(91% .096 180.426);
        --color-teal-300: oklch(85.5% .138 181.071);
        --color-teal-400: oklch(77.7% .152 181.912);
        --color-teal-500: oklch(70.4% .14 182.503);
        --color-teal-600: oklch(60% .118 184.704);
        --color-teal-700: oklch(51.1% .096 186.391);
        --color-teal-800: oklch(43.7% .078 188.216);
        --color-teal-900: oklch(38.6% .063 188.416);
        --color-teal-950: oklch(27.7% .046 192.524);
        --color-cyan-50: oklch(98.4% .019 200.873);
        --color-cyan-100: oklch(95.6% .045 203.388);
        --color-cyan-200: oklch(91.7% .08 205.041);
        --color-cyan-300: oklch(86.5% .127 207.078);
        --color-cyan-400: oklch(78.9% .154 211.53);
        --color-cyan-500: oklch(71.5% .143 215.221);
        --color-cyan-600: oklch(60.9% .126 221.723);
        --color-cyan-700: oklch(52% .105 223.128);
        --color-cyan-800: oklch(45% .085 224.283);
        --color-cyan-900: oklch(39.8% .07 227.392);
        --color-cyan-950: oklch(30.2% .056 229.695);
        --color-sky-50: oklch(97.7% .013 236.62);
        --color-sky-100: oklch(95.1% .026 236.824);
        --color-sky-200: oklch(90.1% .058 230.902);
        --color-sky-300: oklch(82.8% .111 230.318);
        --color-sky-400: oklch(74.6% .16 232.661);
        --color-sky-500: oklch(68.5% .169 237.323);
        --color-sky-600: oklch(58.8% .158 241.966);
        --color-sky-700: oklch(50% .134 242.749);
        --color-sky-800: oklch(44.3% .11 240.79);
        --color-sky-900: oklch(39.1% .09 240.876);
        --color-sky-950: oklch(29.3% .066 243.157);
        --color-blue-50: oklch(97% .014 254.604);
        --color-blue-100: oklch(93.2% .032 255.585);
        --color-blue-200: oklch(88.2% .059 254.128);
        --color-blue-300: oklch(80.9% .105 251.813);
        --color-blue-400: oklch(70.7% .165 254.624);
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-blue-800: oklch(42.4% .199 265.638);
        --color-blue-900: oklch(37.9% .146 265.522);
        --color-blue-950: oklch(28.2% .091 267.935);
        --color-indigo-50: oklch(96.2% .018 272.314);
        --color-indigo-100: oklch(93% .034 272.788);
        --color-indigo-200: oklch(87% .065 274.039);
        --color-indigo-300: oklch(78.5% .115 274.713);
        --color-indigo-400: oklch(67.3% .182 276.935);
        --color-indigo-500: oklch(58.5% .233 277.117);
        --color-indigo-600: oklch(51.1% .262 276.966);
        --color-indigo-700: oklch(45.7% .24 277.023);
        --color-indigo-800: oklch(39.8% .195 277.366);
        --color-indigo-900: oklch(35.9% .144 278.697);
        --color-indigo-950: oklch(25.7% .09 281.288);
        --color-violet-50: oklch(96.9% .016 293.756);
        --color-violet-100: oklch(94.3% .029 294.588);
        --color-violet-200: oklch(89.4% .057 293.283);
        --color-violet-300: oklch(81.1% .111 293.571);
        --color-violet-400: oklch(70.2% .183 293.541);
        --color-violet-500: oklch(60.6% .25 292.717);
        --color-violet-600: oklch(54.1% .281 293.009);
        --color-violet-700: oklch(49.1% .27 292.581);
        --color-violet-800: oklch(43.2% .232 292.759);
        --color-violet-900: oklch(38% .189 293.745);
        --color-violet-950: oklch(28.3% .141 291.089);
        --color-purple-50: oklch(97.7% .014 308.299);
        --color-purple-100: oklch(94.6% .033 307.174);
        --color-purple-200: oklch(90.2% .063 306.703);
        --color-purple-300: oklch(82.7% .119 306.383);
        --color-purple-400: oklch(71.4% .203 305.504);
        --color-purple-500: oklch(62.7% .265 303.9);
        --color-purple-600: oklch(55.8% .288 302.321);
        --color-purple-700: oklch(49.6% .265 301.924);
        --color-purple-800: oklch(43.8% .218 303.724);
        --color-purple-900: oklch(38.1% .176 304.987);
        --color-purple-950: oklch(29.1% .149 302.717);
        --color-fuchsia-50: oklch(97.7% .017 320.058);
        --color-fuchsia-100: oklch(95.2% .037 318.852);
        --color-fuchsia-200: oklch(90.3% .076 319.62);
        --color-fuchsia-300: oklch(83.3% .145 321.434);
        --color-fuchsia-400: oklch(74% .238 322.16);
        --color-fuchsia-500: oklch(66.7% .295 322.15);
        --color-fuchsia-600: oklch(59.1% .293 322.896);
        --color-fuchsia-700: oklch(51.8% .253 323.949);
        --color-fuchsia-800: oklch(45.2% .211 324.591);
        --color-fuchsia-900: oklch(40.1% .17 325.612);
        --color-fuchsia-950: oklch(29.3% .136 325.661);
        --color-pink-50: oklch(97.1% .014 343.198);
        --color-pink-100: oklch(94.8% .028 342.258);
        --color-pink-200: oklch(89.9% .061 343.231);
        --color-pink-300: oklch(82.3% .12 346.018);
        --color-pink-400: oklch(71.8% .202 349.761);
        --color-pink-500: oklch(65.6% .241 354.308);
        --color-pink-600: oklch(59.2% .249 .584);
        --color-pink-700: oklch(52.5% .223 3.958);
        --color-pink-800: oklch(45.9% .187 3.815);
        --color-pink-900: oklch(40.8% .153 2.432);
        --color-pink-950: oklch(28.4% .109 3.907);
        --color-rose-50: oklch(96.9% .015 12.422);
        --color-rose-100: oklch(94.1% .03 12.58);
        --color-rose-200: oklch(89.2% .058 10.001);
        --color-rose-300: oklch(81% .117 11.638);
        --color-rose-400: oklch(71.2% .194 13.428);
        --color-rose-500: oklch(64.5% .246 16.439);
        --color-rose-600: oklch(58.6% .253 17.585);
        --color-rose-700: oklch(51.4% .222 16.935);
        --color-rose-800: oklch(45.5% .188 13.697);
        --color-rose-900: oklch(41% .159 10.272);
        --color-rose-950: oklch(27.1% .105 12.094);
        --color-slate-50: oklch(98.4% .003 247.858);
        --color-slate-100: oklch(96.8% .007 247.896);
        --color-slate-200: oklch(92.9% .013 255.508);
        --color-slate-300: oklch(86.9% .022 252.894);
        --color-slate-400: oklch(70.4% .04 256.788);
        --color-slate-500: oklch(55.4% .046 257.417);
        --color-slate-600: oklch(44.6% .043 257.281);
        --color-slate-700: oklch(37.2% .044 257.287);
        --color-slate-800: oklch(27.9% .041 260.031);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-slate-950: oklch(12.9% .042 264.695);
        --color-gray-50: oklch(98.5% .002 247.839);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-gray-900: oklch(21% .034 264.665);
        --color-gray-950: oklch(13% .028 261.692);
        --color-zinc-50: oklch(98.5% 0 0);
        --color-zinc-100: oklch(96.7% .001 286.375);
        --color-zinc-200: oklch(92% .004 286.32);
        --color-zinc-300: oklch(87.1% .006 286.286);
        --color-zinc-400: oklch(70.5% .015 286.067);
        --color-zinc-500: oklch(55.2% .016 285.938);
        --color-zinc-600: oklch(44.2% .017 285.786);
        --color-zinc-700: oklch(37% .013 285.805);
        --color-zinc-800: oklch(27.4% .006 286.033);
        --color-zinc-900: oklch(21% .006 285.885);
        --color-zinc-950: oklch(14.1% .005 285.823);
        --color-neutral-50: oklch(98.5% 0 0);
        --color-neutral-100: oklch(97% 0 0);
        --color-neutral-200: oklch(92.2% 0 0);
        --color-neutral-300: oklch(87% 0 0);
        --color-neutral-400: oklch(70.8% 0 0);
        --color-neutral-500: oklch(55.6% 0 0);
        --color-neutral-600: oklch(43.9% 0 0);
        --color-neutral-700: oklch(37.1% 0 0);
        --color-neutral-800: oklch(26.9% 0 0);
        --color-neutral-900: oklch(20.5% 0 0);
        --color-neutral-950: oklch(14.5% 0 0);
        --color-stone-50: oklch(98.5% .001 106.423);
        --color-stone-100: oklch(97% .001 106.424);
        --color-stone-200: oklch(92.3% .003 48.717);
        --color-stone-300: oklch(86.9% .005 56.366);
        --color-stone-400: oklch(70.9% .01 56.259);
        --color-stone-500: oklch(55.3% .013 58.071);
        --color-stone-600: oklch(44.4% .011 73.639);
        --color-stone-700: oklch(37.4% .01 67.558);
        --color-stone-800: oklch(26.8% .007 34.298);
        --color-stone-900: oklch(21.6% .006 56.043);
        --color-stone-950: oklch(14.7% .004 49.25);
        --color-black: #000;
        --color-white: #f3f3f3;
        --spacing: .25rem;
        --breakpoint-sm: 40rem;
        --breakpoint-md: 768px;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 1100px;
        --breakpoint-2xl: 96rem;
        --container-3xs: 16rem;
        --container-2xs: 18rem;
        --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-6xl: 72rem;
        --container-7xl: 80rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .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;
        --text-8xl: 6rem;
        --text-8xl--line-height: 1;
        --text-9xl: 8rem;
        --text-9xl--line-height: 1;
        --font-weight-thin: 100;
        --font-weight-extralight: 200;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --font-weight-black: 900;
        --tracking-tighter: -.05em;
        --tracking-tight: -.025em;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --tracking-widest: .1em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --leading-loose: 2;
        --radius-xs: .125rem;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: 20px;
        --radius-xl: 24px;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --radius-4xl: 2rem;
        --shadow-2xs: 0 1px #0000000d;
        --shadow-xs: 0 1px 2px 0 #0000000d;
        --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
        --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
        --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
        --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
        --shadow-2xl: 0 25px 50px -12px #00000040;
        --inset-shadow-2xs: inset 0 1px #0000000d;
        --inset-shadow-xs: inset 0 1px 1px #0000000d;
        --inset-shadow-sm: inset 0 2px 4px #0000000d;
        --drop-shadow-xs: 0 1px 1px #0000000d;
        --drop-shadow-sm: 0 1px 2px #00000026;
        --drop-shadow-md: 0 3px 3px #0000001f;
        --drop-shadow-lg: 0 4px 4px #00000026;
        --drop-shadow-xl: 0 9px 7px #0000001a;
        --drop-shadow-2xl: 0 25px 25px #00000026;
        --ease-in: cubic-bezier(.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --animate-bounce: bounce 1s infinite;
        --blur-xs: 4px;
        --blur-sm: 8px;
        --blur-md: 12px;
        --blur-lg: 16px;
        --blur-xl: 24px;
        --blur-2xl: 40px;
        --blur-3xl: 64px;
        --perspective-dramatic: 100px;
        --perspective-near: 300px;
        --perspective-normal: 500px;
        --perspective-midrange: 800px;
        --perspective-distant: 1200px;
        --aspect-video: 16 / 9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --radius: 12px;
        --color-bg: #191a1f;
        --color-surface: #1e1f28;
        --color-surface-2: #252635;
        --color-violet: #6000ff;
        --color-red: #fe0054;
        --color-lavender: #c769f7;
        --color-pink: #e64e90;
        --color-charcoal: #484848;
        --color-muted: #9ca0b0;
        --color-border: #ffffff12;
        --color-border-strong: #ffffff24;
        --color-deep: #15161b;
        --color-on-accent: #fff;
        --color-success: #1fc77c;
        --color-warning: #f5a524;
        --color-danger: #fe0054;
        --color-info: #3b9eff;
        --color-bg-light: #f5f4f8;
        --color-surface-light: #fff;
        --color-surface-2-light: #ecebf3;
        --color-white-light: #1b1c22;
        --color-muted-light: #5d6170;
        --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, -apple-system, sans-serif;
        --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
        --radius-pill: 999px;
        --ease-reveal: cubic-bezier(.16, 1, .3, 1)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        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
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    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
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    * {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background: var(--color-bg);
        color: var(--color-white);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        -webkit-font-smoothing: antialiased;
        margin: 0;
        overflow-x: hidden
    }

    h1,
    h2,
    h3,
    h4,
    p {
        margin: 0
    }

    a {
        color: inherit;
        text-decoration: none
    }

    img {
        max-width: 100%
    }

    :focus-visible {
        outline: 2px solid var(--color-lavender);
        outline-offset: 3px;
        border-radius: 4px
    }
}

@layer components {
    .container {
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 24px
    }

    .mono {
        font-family: var(--font-mono)
    }

    .eyebrow {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-lavender);
        align-items: center;
        gap: 10px;
        display: inline-flex
    }

    .eyebrow:before {
        content: "";
        background: var(--gradient-brand);
        width: 24px;
        height: 1px
    }

    .grad-text {
        background: var(--gradient-brand);
        color: #0000;
        -webkit-background-clip: text;
        background-clip: text
    }

    .btn {
        border-radius: var(--radius);
        height: 48px;
        font: 600 15px/1 var(--font-display);
        cursor: pointer;
        transition: transform .25s var(--ease-reveal), box-shadow .25s, background .25s, border-color .25s;
        white-space: nowrap;
        border: 1px solid #0000;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 0 28px;
        display: inline-flex
    }

    .btn-primary {
        background: var(--color-violet);
        color: var(--color-on-accent)
    }

    .btn-primary:hover {
        box-shadow: 0 8px 32px var(--glow-violet);
        transform: translateY(-2px)
    }

    .btn-primary:active {
        transform: translateY(0)
    }

    .btn-ghost {
        color: var(--color-white);
        border-color: var(--color-border-strong);
        background: 0 0
    }

    .btn-ghost:hover {
        border-color: var(--color-lavender);
        transform: translateY(-2px)
    }

    .btn-light {
        background: var(--color-surface-2);
        color: var(--color-white);
        border-color: var(--color-border)
    }

    .btn-light:hover {
        border-color: var(--color-lavender);
        transform: translateY(-2px)
    }

    .btn-sm {
        height: 40px;
        padding: 0 20px;
        font-size: 14px
    }

    .btn-lg {
        height: 56px;
        padding: 0 36px;
        font-size: 17px
    }

    .pill {
        border: 1px solid var(--color-border-strong);
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-muted);
        border-radius: 999px;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        display: inline-flex
    }

    .pill .dot {
        background: var(--gradient-brand);
        border-radius: 50%;
        width: 6px;
        height: 6px
    }

    .tag {
        font: 500 11.5px/1 var(--font-mono);
        color: var(--color-muted);
        border: 1px solid var(--color-border-strong);
        border-radius: 999px;
        padding: 6px 12px
    }

    .card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg)
    }

    .seo-chip {
        font: 600 11px/1 var(--font-mono);
        letter-spacing: .04em;
        border: 1px solid var(--color-border-strong);
        color: var(--color-muted);
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        display: inline-flex
    }

    .seo-chip--good {
        color: var(--color-success);
        border-color: var(--color-success)
    }

    .seo-chip--ok {
        color: var(--color-warning);
        border-color: var(--color-warning)
    }

    .seo-chip--bad {
        color: var(--color-danger);
        border-color: var(--color-danger)
    }

    kbd {
        font: 500 11px/1 var(--font-mono);
        color: var(--color-muted);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        border-bottom-width: 2px;
        border-radius: 6px;
        padding: 4px 7px
    }

    .nav {
        z-index: 100;
        border-bottom: 1px solid #0000;
        align-items: center;
        height: 72px;
        transition: background .35s, border-color .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s;
        display: flex;
        position: fixed;
        inset: 0 0 auto
    }

    .nav.scrolled {
        background: #191a1fb8
    }

    @supports (color:color-mix(in lab, red, red)) {
        .nav.scrolled {
            background: color-mix(in srgb, var(--color-bg) 72%, transparent)
        }
    }

    .nav.scrolled {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-bottom-color: var(--color-border)
    }

    .nav-inner {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
        width: 100%;
        display: grid
    }

    .nav-logo {
        font: 700 18px/1 var(--font-display);
        letter-spacing: -.02em;
        flex-shrink: 0;
        justify-self: start;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .nav-links {
        justify-self: center;
        align-items: center;
        gap: 6px;
        display: none
    }

    .nav-links a {
        font: 600 15px/1 var(--font-display);
        color: #f3f3f3cc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .nav-links a {
            color: color-mix(in srgb, var(--color-white) 80%, transparent)
        }
    }

    .nav-links a {
        border-radius: 8px;
        padding: 10px 14px;
        text-decoration: none;
        transition: color .2s, background .2s
    }

    .nav-links a:hover {
        color: var(--color-violet)
    }

    .nav-links a[aria-current=page] {
        color: var(--color-pink)
    }

    .nav-links a:focus-visible {
        color: var(--color-violet);
        outline: 2px solid var(--color-violet);
        outline-offset: 2px
    }

    .nav-actions {
        justify-self: end;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .icon-btn {
        border: 1px solid var(--color-border-strong);
        width: 40px;
        height: 40px;
        color: var(--color-muted);
        cursor: pointer;
        background: 0 0;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        transition: color .2s, border-color .2s;
        display: inline-flex
    }

    .icon-btn:hover {
        color: var(--color-white);
        border-color: var(--color-lavender)
    }

    .section {
        padding: var(--space-12) 0;
        position: relative
    }

    .section-head {
        max-width: 640px;
        margin-bottom: var(--space-8);
        flex-direction: column;
        gap: 18px;
        display: flex
    }

    .section-head h2 {
        font: 700 clamp(32px, 4.6vw, 52px)/1.08 var(--font-display);
        letter-spacing: -.03em;
        text-wrap: balance
    }

    .section-head p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 17px
    }

    .page-hero {
        padding: 180px 0 64px;
        position: relative;
        overflow: hidden
    }

    .page-hero h1 {
        font: 700 clamp(40px, 6vw, 72px)/1.05 var(--font-display);
        letter-spacing: -.03em
    }

    .page-hero p {
        color: var(--color-muted);
        margin-top: 18px
    }

    .reveal {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(28px)
    }

    .reveal.in {
        opacity: 1;
        filter: none;
        transition: opacity var(--dur) var(--ease-reveal), transform var(--dur) var(--ease-reveal), filter var(--dur) var(--ease-reveal);
        transform: none
    }

    .reveal-stagger>* {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(28px)
    }

    .reveal-stagger.in>* {
        opacity: 1;
        filter: none;
        transition: opacity var(--dur) var(--ease-reveal), transform var(--dur) var(--ease-reveal), filter var(--dur) var(--ease-reveal);
        transform: none
    }

    .reveal-stagger.in>:nth-child(2) {
        transition-delay: .12s
    }

    .reveal-stagger.in>:nth-child(3) {
        transition-delay: .24s
    }

    .reveal-stagger.in>:nth-child(4) {
        transition-delay: .36s
    }

    .halo {
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
        border-radius: 50%;
        position: absolute
    }

    .halo-violet {
        background: var(--halo-violet-fill)
    }

    .halo-red {
        background: var(--halo-red-fill)
    }

    .noise {
        z-index: 1;
        pointer-events: none;
        opacity: .025;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        position: fixed;
        inset: 0
    }

    .footer {
        border-top: 1px solid var(--color-border);
        padding: var(--space-8) 0 var(--space-6);
        z-index: 2;
        position: relative
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        display: grid
    }

    .footer-brand {
        flex-direction: column;
        gap: 16px;
        max-width: 280px;
        display: flex
    }

    .footer-brand p {
        color: var(--color-muted);
        font-size: 14px
    }

    .footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        display: grid
    }

    .footer-col {
        flex-direction: column;
        gap: 12px;
        display: flex
    }

    .footer-col h4 {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-bottom: 6px
    }

    .footer-col a {
        color: var(--color-muted);
        font-size: 14px;
        transition: color .2s
    }

    .footer-col a:hover {
        color: var(--color-white)
    }

    .footer-meta {
        border-top: 1px solid var(--color-border);
        margin-top: var(--space-6);
        padding-top: var(--space-3);
        color: var(--color-muted);
        font: 400 13px/1.5 var(--font-mono);
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        display: flex
    }

    .hero {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        padding: 140px 0 80px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .hero .halo-violet {
        width: 640px;
        height: 640px;
        animation: 14s ease-in-out infinite alternate drift;
        top: -160px;
        left: -200px
    }

    .hero .halo-red {
        width: 560px;
        height: 560px;
        animation: 18s ease-in-out infinite alternate-reverse drift;
        bottom: -120px;
        right: -180px
    }

    .hero-inner {
        z-index: 2;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        display: flex;
        position: relative
    }

    .hero-h1 {
        font: 700 clamp(44px, 7.4vw, 84px)/1.04 var(--font-display);
        letter-spacing: -.035em;
        max-width: none
    }

    .hero-h1 .line {
        display: block;
        overflow: hidden
    }

    .hero-h1 .word {
        filter: blur(12px);
        opacity: 0;
        display: inline-block;
        transform: translateY(115%)
    }

    .loaded .hero-h1 .word {
        filter: none;
        opacity: 1;
        transition: transform 1s var(--ease-reveal), filter 1s var(--ease-reveal), opacity .7s;
        transform: none
    }

    .echo {
        display: block;
        position: relative
    }

    .echo .ghost {
        z-index: -1;
        white-space: nowrap;
        color: #0000;
        -webkit-text-stroke: 1px #c769f766;
        position: absolute;
        top: 8px;
        left: 6px
    }

    @supports (color:color-mix(in lab, red, red)) {
        .echo .ghost {
            -webkit-text-stroke: 1px color-mix(in srgb, var(--color-lavender) 40%, transparent)
        }
    }

    .echo .ghost {
        opacity: 0;
        transition: opacity 1.4s .9s
    }

    .loaded .echo .ghost {
        opacity: .55
    }

    .hero-sub {
        color: var(--color-muted);
        text-wrap: pretty;
        max-width: none;
        font-size: clamp(17px, 2vw, 20px)
    }

    .hero-ctas {
        flex-wrap: wrap;
        gap: 14px;
        display: flex
    }

    .hero-fade {
        opacity: 0;
        transform: translateY(20px)
    }

    .loaded .hero-fade {
        opacity: 1;
        transition: opacity .9s var(--ease-reveal) .55s, transform .9s var(--ease-reveal) .55s;
        transform: none
    }

    .hero-stats {
        border-top: 1px solid var(--color-border);
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        margin-top: 28px;
        padding-top: 32px;
        display: grid
    }

    .stat {
        flex-direction: column;
        gap: 4px;
        display: flex
    }

    .stat b {
        font: 700 34px/1 var(--font-mono);
        color: var(--color-white)
    }

    .stat b em {
        background: var(--gradient-brand);
        color: #0000;
        -webkit-background-clip: text;
        background-clip: text;
        font-style: normal
    }

    .stat span {
        font: 400 13px/1.5 var(--font-display);
        color: var(--color-muted)
    }

    .term-wrap {
        z-index: 3;
        margin-top: -8px;
        position: relative
    }

    .terminal {
        background: var(--color-deep);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 24px 80px #0000008c, 0 0 0 1px #6000ff1f, 0 0 64px #6000ff1f
    }

    @supports (color:color-mix(in lab, red, red)) {
        .terminal {
            box-shadow: 0 24px 80px #0000008c, 0 0 0 1px color-mix(in srgb, var(--color-violet) 12%, transparent), 0 0 64px color-mix(in srgb, var(--color-violet) 12%, transparent)
        }
    }

    .term-bar {
        border-bottom: 1px solid var(--color-border);
        background: #f3f3f305;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        display: flex
    }

    @supports (color:color-mix(in lab, red, red)) {
        .term-bar {
            background: color-mix(in srgb, var(--color-white) 2%, transparent)
        }
    }

    .term-bar i {
        border-radius: 50%;
        width: 11px;
        height: 11px
    }

    .term-bar i:first-child {
        background: var(--color-red)
    }

    .term-bar i:nth-child(2) {
        background: var(--color-lavender)
    }

    .term-bar i:nth-child(3) {
        background: var(--color-violet)
    }

    .term-title {
        font: 400 12px/1 var(--font-mono);
        color: var(--color-muted);
        margin: 0 auto
    }

    .term-hint {
        font: 400 11px/1 var(--font-mono);
        color: var(--color-muted);
        display: none
    }

    .term-body {
        min-height: 230px;
        max-height: 320px;
        font: 400 13.5px/1.75 var(--font-mono);
        color: var(--color-muted);
        cursor: text;
        padding: 20px;
        overflow-y: auto
    }

    .term-body .ln {
        white-space: pre-wrap;
        word-break: break-word
    }

    .term-body .ok {
        color: var(--color-lavender)
    }

    .term-body .accent {
        color: var(--color-pink)
    }

    .term-body .dim {
        color: var(--color-charcoal)
    }

    .term-input-row {
        align-items: baseline;
        gap: 8px;
        display: flex
    }

    .term-prompt {
        color: var(--color-violet);
        font-weight: 700
    }

    .term-input {
        font: inherit;
        color: var(--color-white);
        caret-color: #0000;
        background: 0 0;
        border: none;
        outline: none;
        flex: 1;
        padding: 0
    }

    .term-cursor {
        background: var(--color-lavender);
        vertical-align: text-bottom;
        width: 8px;
        height: 17px;
        margin-left: -6px;
        animation: 1.1s step-end infinite blink;
        display: inline-block
    }

    .marquee-band {
        border-block: 1px solid var(--color-border);
        margin-top: var(--space-12);
        z-index: 2;
        padding: 22px 0;
        position: relative;
        overflow: hidden
    }

    .marquee {
        gap: 0;
        width: max-content;
        animation: 36s linear infinite scroll-x;
        display: flex
    }

    .marquee-band:hover .marquee {
        animation-play-state: paused
    }

    .marquee-group {
        align-items: center;
        display: flex
    }

    .marquee-item {
        font: 500 13px/1 var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-muted);
        white-space: nowrap;
        align-items: center;
        gap: 28px;
        padding: 0 28px;
        display: inline-flex
    }

    .marquee-item:after {
        content: "·";
        color: var(--color-pink);
        font-size: 18px
    }

    .bento {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .svc-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
        flex-direction: column;
        gap: 16px;
        padding: 32px;
        display: flex
    }

    .svc-card:hover {
        border-color: #6000ff8c;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .svc-card:hover {
            border-color: color-mix(in srgb, var(--color-violet) 55%, transparent)
        }
    }

    .svc-card:hover {
        box-shadow: 0 0 0 1px #6000ff4d, 0 16px 48px #6000ff29
    }

    @supports (color:color-mix(in lab, red, red)) {
        .svc-card:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 30%, transparent), 0 16px 48px color-mix(in srgb, var(--color-violet) 16%, transparent)
        }
    }

    .svc-icon {
        background: linear-gradient(135deg, #6000ff2e, #fe00541f);
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        display: flex
    }

    @supports (color:color-mix(in lab, red, red)) {
        .svc-icon {
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 18%, transparent), color-mix(in srgb, var(--color-red) 12%, transparent))
        }
    }

    .svc-icon {
        border: 1px solid var(--color-border-strong);
        color: var(--color-lavender)
    }

    .svc-card h3 {
        font: 600 21px/1.25 var(--font-display);
        letter-spacing: -.01em
    }

    .svc-card p {
        color: var(--color-muted);
        text-wrap: pretty;
        flex: 1;
        font-size: 15px
    }

    .tag-row {
        flex-wrap: wrap;
        gap: 8px;
        display: flex
    }

    .cases {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .case-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .case-card:hover {
        border-color: #fe005480;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .case-card:hover {
            border-color: color-mix(in srgb, var(--color-red) 50%, transparent)
        }
    }

    .case-card:hover {
        box-shadow: 0 0 0 1px #fe00544d, 0 16px 48px #fe005424
    }

    @supports (color:color-mix(in lab, red, red)) {
        .case-card:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-red) 30%, transparent), 0 16px 48px color-mix(in srgb, var(--color-red) 14%, transparent)
        }
    }

    .case-cover {
        height: 220px;
        display: block;
        position: relative;
        overflow: hidden
    }

    .case-cover:after {
        content: "";
        background: linear-gradient(to top, var(--color-surface), transparent 60%);
        position: absolute;
        inset: 0
    }

    .cover-a {
        background: radial-gradient(circle at 25% 30%, var(--color-violet) 0%, transparent 55%), radial-gradient(circle at 80% 75%, var(--color-pink) 0%, transparent 50%), var(--color-deep)
    }

    .cover-b {
        background: radial-gradient(circle at 75% 25%, var(--color-red) 0%, transparent 50%), radial-gradient(circle at 20% 80%, var(--color-lavender) 0%, transparent 55%), var(--color-deep)
    }

    .case-body {
        flex-direction: column;
        gap: 12px;
        padding: 28px 32px 32px;
        display: flex
    }

    .case-type {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-pink)
    }

    .case-body h3 {
        font: 600 24px/1.2 var(--font-display);
        letter-spacing: -.02em
    }

    .case-body>p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 15px
    }

    .case-metrics {
        border-top: 1px solid var(--color-border);
        gap: 28px;
        margin-top: 10px;
        padding-top: 18px;
        display: flex
    }

    .case-metrics .stat b {
        font-size: 24px
    }

    .process {
        grid-template-columns: 1fr;
        gap: 36px;
        display: grid;
        position: relative
    }

    .step {
        flex-direction: column;
        gap: 12px;
        display: flex;
        position: relative
    }

    .step-num {
        font: 700 14px/1 var(--font-mono);
        color: var(--color-violet)
    }

    .step h3 {
        font: 600 19px/1.3 var(--font-display)
    }

    .step p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 14.5px
    }

    .step:before {
        content: "";
        background: linear-gradient(90deg, var(--color-border-strong), transparent);
        height: 1px;
        display: none;
        position: absolute;
        top: 7px;
        left: 44px;
        right: 12px
    }

    .quotes {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .quote-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        flex-direction: column;
        gap: 18px;
        padding: 32px;
        display: flex
    }

    .quote-card blockquote {
        font: 500 17px/1.55 var(--font-display);
        letter-spacing: -.01em;
        text-wrap: pretty;
        margin: 0
    }

    .quote-card blockquote:before {
        content: "“";
        font: 700 40px/.5 var(--font-display);
        background: var(--gradient-brand);
        color: #0000;
        -webkit-background-clip: text;
        background-clip: text;
        margin-bottom: 14px;
        display: block
    }

    .quote-who {
        flex-direction: column;
        gap: 2px;
        display: flex
    }

    .quote-who b {
        font-size: 14px
    }

    .quote-who span {
        color: var(--color-muted);
        font-size: 13px
    }

    .ph-flag {
        font: 400 11px/1 var(--font-mono);
        color: var(--color-charcoal);
        letter-spacing: .06em
    }

    .tiers {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 20px;
        display: grid
    }

    .tier {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s;
        flex-direction: column;
        gap: 22px;
        padding: 36px 32px;
        display: flex;
        position: relative
    }

    .tier:hover {
        border-color: var(--color-border-strong);
        transform: translateY(-3px)
    }

    .tier-popular {
        border-color: #6000ffa6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-popular {
            border-color: color-mix(in srgb, var(--color-violet) 65%, transparent)
        }
    }

    .tier-popular {
        box-shadow: 0 0 0 1px #6000ff66, 0 0 48px #6000ff2e
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-popular {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 40%, transparent), 0 0 48px color-mix(in srgb, var(--color-violet) 18%, transparent)
        }
    }

    .tier-popular {
        background: linear-gradient(180deg, #6000ff12, transparent 40%), var(--color-surface)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-popular {
            background: linear-gradient(180deg, color-mix(in srgb, var(--color-violet) 7%, transparent), transparent 40%), var(--color-surface)
        }
    }

    .tier-badge {
        background: var(--gradient-brand);
        color: var(--color-on-accent);
        font: 600 11px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        border-radius: 999px;
        padding: 7px 14px;
        position: absolute;
        top: -13px;
        left: 32px
    }

    .tier-name {
        font: 600 14px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted)
    }

    .tier-price {
        align-items: baseline;
        gap: 8px;
        display: flex
    }

    .tier-price b {
        font: 700 44px/1 var(--font-display);
        letter-spacing: -.03em
    }

    .tier-price span {
        color: var(--color-muted);
        font-size: 14px
    }

    .tier ul {
        flex-direction: column;
        flex: 1;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex
    }

    .tier li {
        color: var(--color-muted);
        align-items: flex-start;
        gap: 12px;
        font-size: 14.5px;
        display: flex
    }

    .tier li:before {
        content: "✓";
        color: var(--color-lavender);
        flex-shrink: 0;
        font-weight: 700
    }

    .tier .btn {
        width: 100%
    }

    .posts {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .post-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .post-card:hover {
        border-color: #c769f780;
        transform: translateY(-3px);
        box-shadow: 0 0 0 1px #c769f738, 0 16px 48px #c769f71f
    }

    .post-cover {
        background: #1b1338;
        flex-shrink: 0;
        height: 184px;
        display: block;
        position: relative;
        overflow: hidden
    }

    .post-cover img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0
    }

    .post-cover img.t-light,
    [data-theme=light] .post-cover img.t-dark {
        display: none
    }

    [data-theme=light] .post-cover img.t-light {
        display: block
    }

    .post-cover:before {
        content: "";
        z-index: 1;
        mix-blend-mode: soft-light;
        background-image: radial-gradient(#ffffff2e 1px, #0000 1.4px);
        background-size: 22px 22px;
        position: absolute;
        inset: 0
    }

    .post-cover:after {
        content: "";
        z-index: 1;
        background: linear-gradient(to top, var(--color-surface) 0%, transparent 46%);
        position: absolute;
        inset: 0
    }

    .post-cover.pc-automation {
        background: radial-gradient(130% 130% at 22% 26%, #6000ff 0%, #0000 56%), radial-gradient(120% 120% at 84% 82%, #c769f7 0%, #0000 55%), #1b1338
    }

    .post-cover.pc-seo {
        background: radial-gradient(130% 130% at 80% 24%, #fe0054 0%, #0000 52%), radial-gradient(120% 120% at 18% 84%, #e64e90 0%, #0000 56%), #2a1024
    }

    .post-cover.pc-engineering {
        background: radial-gradient(130% 130% at 24% 30%, #6000ff 0%, #0000 54%), radial-gradient(120% 120% at 86% 76%, #7b5cff 0%, #0000 56%), #141530
    }

    .post-cover.pc-devops {
        background: radial-gradient(130% 130% at 82% 24%, #c769f7 0%, #0000 54%), radial-gradient(120% 120% at 20% 82%, #6000ff 0%, #0000 56%), #1c1340
    }

    .post-cover.pc-ai {
        background: radial-gradient(130% 130% at 26% 26%, #c769f7 0%, #0000 54%), radial-gradient(120% 120% at 82% 82%, #fe0054 0%, #0000 54%), #2a113a
    }

    .post-cover-tag {
        z-index: 2;
        font: 500 11px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #fff;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: #0806126b;
        border: 1px solid #fff3;
        border-radius: 999px;
        padding: 7px 12px;
        position: absolute;
        bottom: 14px;
        left: 16px
    }

    .post-body {
        flex-direction: column;
        flex: 1;
        gap: 12px;
        padding: 22px 26px 26px;
        display: flex
    }

    .post-meta {
        font: 400 12px/1 var(--font-mono);
        color: var(--color-muted);
        letter-spacing: .04em;
        gap: 14px;
        display: flex
    }

    .post-meta .cat {
        color: var(--color-pink)
    }

    .post-card h3 {
        font: 600 19px/1.3 var(--font-display);
        letter-spacing: -.01em;
        text-wrap: balance
    }

    .post-card p {
        color: var(--color-muted);
        font: 400 15px/1.6 var(--font-display);
        text-wrap: pretty;
        flex: 1
    }

    .read-more {
        font: 600 14px/1 var(--font-display);
        color: var(--color-lavender);
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        transition: gap .25s;
        display: inline-flex
    }

    .post-card:hover .read-more {
        gap: 14px
    }

    .final-cta {
        text-align: center;
        border-top: 1px solid var(--color-border);
        z-index: 2;
        padding: 140px 0;
        position: relative;
        overflow: hidden
    }

    .final-cta .halo-violet {
        width: 520px;
        height: 520px;
        animation: 16s ease-in-out infinite alternate drift;
        top: -120px;
        left: 8%
    }

    .final-cta .halo-red {
        width: 480px;
        height: 480px;
        animation: 20s ease-in-out infinite alternate-reverse drift;
        bottom: -140px;
        right: 6%
    }

    .final-cta .container {
        z-index: 2;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        display: flex;
        position: relative
    }

    .final-cta h2 {
        font: 700 clamp(36px, 5.6vw, 64px)/1.06 var(--font-display);
        letter-spacing: -.035em;
        text-wrap: balance;
        max-width: 720px
    }

    .final-cta p {
        color: var(--color-muted);
        text-wrap: pretty;
        max-width: 480px;
        font-size: 18px
    }

    .page-hero .hero-h1 {
        font: 700 clamp(40px, 6.2vw, 76px)/1.05 var(--font-display);
        letter-spacing: -.035em
    }

    .page-hero .hero-sub {
        color: var(--color-muted);
        text-wrap: pretty;
        margin-top: 22px;
        font-size: clamp(17px, 2vw, 20px)
    }

    .spy-nav {
        z-index: 40;
        background: #191a1fcc;
        padding: 16px 0;
        position: sticky;
        top: 72px
    }

    @supports (color:color-mix(in lab, red, red)) {
        .spy-nav {
            background: color-mix(in srgb, var(--color-bg) 80%, transparent)
        }
    }

    .spy-nav {
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-block: 1px solid var(--color-border)
    }

    .spy-row {
        flex-wrap: wrap;
        gap: 10px;
        display: flex
    }

    .spy-pill {
        font: 500 13px/1 var(--font-mono);
        letter-spacing: .04em;
        color: var(--color-muted);
        border: 1px solid var(--color-border-strong);
        cursor: pointer;
        white-space: nowrap;
        background: 0 0;
        border-radius: 999px;
        padding: 11px 18px;
        transition: color .2s, border-color .2s, background .2s
    }

    .spy-pill:hover {
        color: var(--color-white);
        border-color: var(--color-lavender)
    }

    .spy-pill.active {
        color: var(--color-on-accent);
        background: var(--color-violet);
        border-color: var(--color-violet)
    }

    .svc-block {
        grid-template-columns: 1fr;
        align-items: center;
        gap: 40px;
        scroll-margin-top: 150px;
        display: grid
    }

    .svc-block .svc-visual {
        order: -1
    }

    .svc-block.flip .svc-content {
        order: 2
    }

    .svc-content {
        flex-direction: column;
        gap: 22px;
        display: flex
    }

    .svc-content h2 {
        font: 700 clamp(30px, 4vw, 44px)/1.1 var(--font-display);
        letter-spacing: -.03em
    }

    .svc-content>p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 16px
    }

    .deliverables {
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid
    }

    .deliverables li {
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        display: flex
    }

    .deliverables li svg {
        color: var(--color-lavender);
        flex-shrink: 0;
        margin-top: 3px
    }

    .viz {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        min-height: 320px;
        padding: 28px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 64px #0006
    }

    .viz-glow {
        filter: blur(70px);
        pointer-events: none;
        border-radius: 50%;
        width: 280px;
        height: 280px;
        position: absolute
    }

    .viz-glow--violet {
        background: #6000ff66
    }

    @supports (color:color-mix(in lab, red, red)) {
        .viz-glow--violet {
            background: color-mix(in srgb, var(--color-violet) 40%, transparent)
        }
    }

    .viz-glow--violet {
        top: -40px;
        right: -40px
    }

    .viz-glow--lavender {
        background: #c769f759
    }

    @supports (color:color-mix(in lab, red, red)) {
        .viz-glow--lavender {
            background: color-mix(in srgb, var(--color-lavender) 35%, transparent)
        }
    }

    .viz-glow--lavender {
        bottom: -40px;
        left: -40px
    }

    .viz-glow--red {
        background: #fe00544d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .viz-glow--red {
            background: color-mix(in srgb, var(--color-red) 30%, transparent)
        }
    }

    .viz-glow--red {
        top: -30px;
        right: -30px
    }

    .viz--numeral {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .viz-index {
        z-index: 1;
        font: 700 clamp(80px, 13vw, 168px)/1 var(--font-display);
        letter-spacing: -.04em;
        position: relative
    }

    .viz-code {
        font: 400 13px/1.85 var(--font-mono);
        z-index: 1;
        position: relative
    }

    .viz-code .k {
        color: var(--color-violet)
    }

    .viz-code .s {
        color: var(--color-pink)
    }

    .viz-code .c {
        color: var(--color-charcoal)
    }

    .viz-code .v {
        color: var(--color-lavender)
    }

    .viz-code .w {
        color: var(--color-white)
    }

    .viz-node {
        background: var(--color-surface-2);
        border: 1px solid var(--color-border-strong);
        font: 500 12px/1.3 var(--font-mono);
        color: var(--color-white);
        z-index: 2;
        border-radius: 10px;
        padding: 10px 14px;
        position: absolute;
        box-shadow: 0 8px 24px #0006
    }

    .viz-node small {
        color: var(--color-muted);
        margin-top: 2px;
        font-size: 10px;
        display: block
    }

    .viz svg.wires {
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0
    }

    .viz svg.wires path,
    .viz svg.wires line {
        stroke: var(--color-border-strong);
        stroke-width: 1.5px;
        fill: none
    }

    .viz svg.wires .pulse {
        stroke: var(--color-violet);
        stroke-dasharray: 6 10;
        animation: 1.6s linear infinite dash
    }

    .tech-grid {
        flex-wrap: wrap;
        gap: 8px;
        display: flex
    }

    .tech-pill {
        font: 500 12.5px/1 var(--font-mono);
        color: var(--color-white);
        background: var(--color-surface-2);
        border: 1px solid var(--color-border-strong);
        border-radius: 999px;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        display: inline-flex
    }

    .tech-pill .gd {
        background: var(--gradient-brand);
        border-radius: 2px;
        width: 7px;
        height: 7px
    }

    .tiers-compact {
        grid-template-columns: 1fr;
        gap: 16px;
        display: grid
    }

    .tier-compact {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: border-color .3s, transform .3s var(--ease-reveal);
        flex-direction: column;
        gap: 14px;
        padding: 28px;
        display: flex
    }

    .tier-compact:hover {
        border-color: #6000ff80;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-compact:hover {
            border-color: color-mix(in srgb, var(--color-violet) 50%, transparent)
        }
    }

    .tier-compact:hover {
        box-shadow: 0 0 0 1px #6000ff40
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-compact:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 25%, transparent)
        }
    }

    .tier-compact.pop {
        border-color: #6000ff99
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-compact.pop {
            border-color: color-mix(in srgb, var(--color-violet) 60%, transparent)
        }
    }

    .tier-compact.pop {
        box-shadow: 0 0 0 1px #6000ff66, 0 0 40px #6000ff29
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tier-compact.pop {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 40%, transparent), 0 0 40px color-mix(in srgb, var(--color-violet) 16%, transparent)
        }
    }

    .tier-compact .tier-name {
        font: 600 13px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted)
    }

    .tier-compact .tier-price {
        align-items: baseline;
        gap: 8px;
        display: flex
    }

    .tier-compact .tier-price b {
        font: 700 32px/1 var(--font-display);
        letter-spacing: -.02em
    }

    .tier-compact .tier-price span {
        color: var(--color-muted);
        font-size: 13px
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        display: grid
    }

    .work-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .work-card:hover {
        border-color: #6000ff80;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-card:hover {
            border-color: color-mix(in srgb, var(--color-violet) 50%, transparent)
        }
    }

    .work-card:hover {
        box-shadow: 0 0 0 1px #6000ff4d, 0 20px 56px #6000ff29
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-card:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 30%, transparent), 0 20px 56px color-mix(in srgb, var(--color-violet) 16%, transparent)
        }
    }

    .work-cover {
        height: 260px;
        position: relative
    }

    .work-cover .type-overlay {
        z-index: 2;
        font: 500 11px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-on-accent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: #0006;
        border: 1px solid #ffffff2e;
        border-radius: 999px;
        padding: 7px 13px;
        position: absolute;
        top: 18px;
        left: 18px
    }

    .work-body {
        flex-direction: column;
        gap: 14px;
        padding: 30px 32px 32px;
        display: flex
    }

    .work-body h3 {
        font: 600 26px/1.18 var(--font-display);
        letter-spacing: -.02em
    }

    .work-body>p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 15px
    }

    .work-metrics {
        border-top: 1px solid var(--color-border);
        gap: 32px;
        margin-top: 6px;
        padding-top: 18px;
        display: flex
    }

    .cap-strip {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        flex-wrap: wrap;
        gap: 10px;
        padding: 28px;
        display: flex
    }

    .cap-strip .tech-pill {
        background: var(--color-surface-2)
    }

    .honesty {
        max-width: 620px
    }

    .honesty p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 16px
    }

    .wip-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .wip-card {
        background: var(--color-surface);
        border: 1px dashed var(--color-border-strong);
        border-radius: var(--radius-lg);
        flex-direction: column;
        justify-content: space-between;
        min-height: 180px;
        padding: 32px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .wip-card .wip-body {
        color: var(--color-muted);
        font-size: 14.5px;
        line-height: 1.55
    }

    .wip-tag {
        font: 500 11px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-pink)
    }

    .wip-lock {
        color: var(--color-muted);
        position: absolute;
        top: 24px;
        right: 24px
    }

    .article-wrap {
        max-width: 760px;
        margin: 0 auto
    }

    .cs-hero {
        padding: 170px 0 0;
        position: relative;
        overflow: hidden
    }

    .cs-hero .container {
        z-index: 2;
        position: relative
    }

    .cs-type {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-pink)
    }

    .cs-hero h1 {
        font: 700 clamp(36px, 5.4vw, 64px)/1.06 var(--font-display);
        letter-spacing: -.03em;
        margin: 18px 0
    }

    .cs-summary {
        color: var(--color-muted);
        text-wrap: pretty;
        max-width: 620px;
        font-size: 19px
    }

    .cs-metrics {
        flex-wrap: wrap;
        gap: 40px;
        margin: 36px 0 48px;
        display: flex
    }

    .overview-bar {
        z-index: 40;
        background: #1e1f28e0;
        position: sticky;
        top: 72px
    }

    @supports (color:color-mix(in lab, red, red)) {
        .overview-bar {
            background: color-mix(in srgb, var(--color-surface) 88%, transparent)
        }
    }

    .overview-bar {
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-block: 1px solid var(--color-border);
        padding: 16px 0
    }

    .overview-row {
        font: 400 13px/1.4 var(--font-mono);
        flex-wrap: wrap;
        gap: 28px;
        display: flex
    }

    .overview-row div {
        flex-direction: column;
        gap: 3px;
        display: flex
    }

    .overview-row span {
        color: var(--color-charcoal);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 11px
    }

    .overview-row b {
        color: var(--color-white);
        font-weight: 500
    }

    .cs-section {
        padding: var(--space-8) 0
    }

    .cs-section .eyebrow {
        margin-bottom: 18px
    }

    .cs-section h2 {
        font: 700 clamp(26px, 3.4vw, 36px)/1.15 var(--font-display);
        letter-spacing: -.02em;
        margin-bottom: 20px
    }

    .cs-section p {
        color: var(--color-muted);
        text-wrap: pretty;
        margin-bottom: 18px;
        font-size: 17px;
        line-height: 1.75
    }

    .pull-quote {
        font: 500 26px/1.4 var(--font-display);
        letter-spacing: -.02em;
        color: var(--color-white);
        border-left: 3px solid;
        border-image: var(--gradient-brand) 1;
        text-wrap: balance;
        margin: 36px 0;
        padding-left: 28px
    }

    .layer-group {
        margin-bottom: 28px
    }

    .layer-group h4 {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-bottom: 14px
    }

    .decision-list {
        gap: 18px;
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
        display: grid
    }

    .decision-list li {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 18px;
        display: grid
    }

    .decision-list .dnum {
        font: 700 13px/1 var(--font-mono);
        color: var(--color-violet);
        border: 1px solid var(--color-border-strong);
        border-radius: 8px;
        padding: 8px 10px
    }

    .decision-list h4 {
        font: 600 17px/1.3 var(--font-display);
        margin-bottom: 4px
    }

    .decision-list p {
        margin: 0;
        font-size: 15px
    }

    .system-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        display: grid
    }

    .system-item {
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 22px
    }

    .system-item h4 {
        font: 600 16px/1.3 var(--font-display);
        margin-bottom: 8px
    }

    .system-item p {
        margin-bottom: 12px;
        font-size: 14px
    }

    .arch-diagram {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin: 8px 0;
        padding: 36px 24px;
        display: flex
    }

    .arch-box {
        background: var(--color-surface-2);
        border: 1px solid var(--color-border-strong);
        font: 500 13px/1.3 var(--font-mono);
        text-align: center;
        border-radius: 10px;
        min-width: 96px;
        padding: 14px 18px
    }

    .arch-box small {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 10px;
        display: block
    }

    .arch-arrow {
        color: var(--color-violet);
        flex-shrink: 0
    }

    .founder {
        grid-template-columns: 1fr;
        align-items: center;
        gap: 40px;
        display: grid
    }

    .founder-text {
        flex-direction: column;
        gap: 18px;
        display: flex
    }

    .founder-text .name {
        font: 700 30px/1.1 var(--font-display);
        letter-spacing: -.02em
    }

    .founder-text .role {
        font: 500 13px/1 var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-lavender)
    }

    .founder-text p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 16px
    }

    .founder-photo {
        border: 1px solid var(--color-border-strong);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 88px;
        height: 88px;
        display: flex
    }

    .founder-photo--img {
        object-fit: cover
    }

    .founder-photo--fallback {
        background: var(--color-surface-2);
        color: var(--color-lavender);
        font: 700 30px/1 var(--font-display)
    }

    .founder-social {
        gap: 16px;
        display: flex
    }

    .founder-social a {
        color: var(--color-lavender);
        font: 500 13px/1 var(--font-mono)
    }

    .founder-social a:hover {
        color: var(--color-white)
    }

    .skillmap {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 28px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 64px #0006
    }

    .skillmap .viz-glow {
        background: #6000ff59
    }

    @supports (color:color-mix(in lab, red, red)) {
        .skillmap .viz-glow {
            background: color-mix(in srgb, var(--color-violet) 35%, transparent)
        }
    }

    .skillmap .viz-glow {
        width: 240px;
        height: 240px;
        top: -30px;
        right: -30px
    }

    .skillmap .timeline {
        z-index: 1;
        flex-direction: column;
        gap: 2px;
        display: flex;
        position: relative
    }

    .skillmap .tl-item {
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        gap: 9px;
        padding: 15px 0;
        display: flex
    }

    .skillmap .tl-item:last-child {
        border-bottom: none
    }

    .skillmap .tl-head {
        align-items: center;
        gap: 18px;
        display: flex
    }

    .skillmap .cat {
        font: 600 13px/1 var(--font-mono);
        letter-spacing: .04em;
        color: var(--color-white);
        flex-shrink: 0;
        min-width: 104px
    }

    .skillmap .track {
        background: var(--color-surface-2);
        border-radius: 3px;
        flex: 1;
        height: 6px;
        overflow: hidden
    }

    .skillmap .bar {
        background: var(--gradient-brand);
        border-radius: 3px;
        height: 100%
    }

    .skillmap .tech {
        color: var(--color-muted);
        font-size: 13.5px
    }

    .diff-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        display: grid
    }

    .diff-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s;
        flex-direction: column;
        gap: 12px;
        padding: 28px;
        display: flex
    }

    .diff-card:hover {
        border-color: #6000ff80;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .diff-card:hover {
            border-color: color-mix(in srgb, var(--color-violet) 50%, transparent)
        }
    }

    .diff-card:hover {
        box-shadow: 0 0 0 1px #6000ff38
    }

    @supports (color:color-mix(in lab, red, red)) {
        .diff-card:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 22%, transparent)
        }
    }

    .diff-card .svc-icon {
        width: 40px;
        height: 40px
    }

    .diff-card h3 {
        font: 600 18px/1.3 var(--font-display)
    }

    .diff-card p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 14.5px
    }

    .principles {
        grid-template-columns: 1fr;
        gap: 28px;
        display: grid
    }

    .principle {
        border-left: 2px solid;
        border-image: var(--gradient-brand) 1;
        flex-direction: column;
        gap: 10px;
        padding-left: 20px;
        display: flex
    }

    .principle h3 {
        font: 600 19px/1.3 var(--font-display)
    }

    .principle p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 15px
    }

    .geo-strip {
        flex-wrap: wrap;
        gap: 16px;
        display: flex
    }

    .geo-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        flex: 1;
        min-width: 160px;
        padding: 24px
    }

    .geo-card b {
        font: 600 18px/1 var(--font-display);
        margin-bottom: 8px;
        display: block
    }

    .geo-card span {
        color: var(--color-muted);
        font: 400 13px/1.5 var(--font-mono)
    }

    .featured-post {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: border-color .3s, transform .3s var(--ease-reveal);
        grid-template-columns: 1fr;
        gap: 0;
        display: grid;
        overflow: hidden
    }

    .featured-post:hover {
        border-color: #c769f780
    }

    @supports (color:color-mix(in lab, red, red)) {
        .featured-post:hover {
            border-color: color-mix(in srgb, var(--color-lavender) 50%, transparent)
        }
    }

    .featured-post:hover {
        transform: translateY(-3px)
    }

    .featured-cover {
        background: radial-gradient(circle at 30% 40%, var(--color-violet) 0%, transparent 55%), radial-gradient(circle at 80% 70%, var(--color-pink) 0%, transparent 50%), var(--color-deep);
        min-height: 220px
    }

    .featured-body {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        padding: 36px;
        display: flex
    }

    .featured-body h2 {
        font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-display);
        letter-spacing: -.02em;
        text-wrap: balance
    }

    .featured-body p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 16px
    }

    .filter-row {
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding-bottom: 6px;
        display: flex;
        overflow-x: auto
    }

    .filter-pill {
        font: 500 13px/1 var(--font-display);
        color: var(--color-muted);
        border: 1px solid var(--color-border-strong);
        cursor: pointer;
        white-space: nowrap;
        background: 0 0;
        border-radius: 999px;
        padding: 10px 18px;
        transition: color .2s, background .2s, border-color .2s
    }

    .filter-pill:hover {
        color: var(--color-white)
    }

    .filter-pill.active {
        color: var(--color-on-accent);
        background: var(--color-violet);
        border-color: var(--color-violet)
    }

    .pagination {
        margin-top: var(--space-8);
        justify-content: center;
        gap: 12px;
        display: flex
    }

    .pagination .btn[aria-disabled=true] {
        opacity: .4;
        pointer-events: none
    }

    .post-layout {
        grid-template-columns: 1fr;
        gap: 48px;
        display: grid
    }

    .post-hero-meta {
        font: 400 13px/1 var(--font-mono);
        color: var(--color-muted);
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        display: flex
    }

    .post-hero-meta .cat {
        color: var(--color-pink)
    }

    .post-title {
        font: 700 clamp(32px, 4.6vw, 52px)/1.1 var(--font-display);
        letter-spacing: -.03em;
        text-wrap: balance;
        margin: 18px 0
    }

    .post-rule {
        background: var(--gradient-brand);
        border-radius: 2px;
        height: 3px;
        margin: 24px 0 0
    }

    .article {
        font-size: 18px;
        line-height: 1.8
    }

    .article p {
        color: var(--color-muted);
        margin-bottom: 24px
    }

    .article h2 {
        font: 700 28px/1.25 var(--font-display);
        letter-spacing: -.02em;
        color: var(--color-white);
        border-left: 4px solid var(--color-violet);
        margin: 44px 0 18px;
        padding-left: 16px;
        scroll-margin-top: 100px
    }

    .article h3 {
        font: 600 22px/1.3 var(--font-display);
        color: var(--color-white);
        margin: 32px 0 14px;
        scroll-margin-top: 100px
    }

    .article blockquote {
        border-left: 3px solid;
        border-image: var(--gradient-brand) 1;
        color: var(--color-white);
        margin: 32px 0;
        padding: 4px 0 4px 24px;
        font-size: 20px;
        font-style: italic
    }

    .article :not(pre)>code {
        font: 400 15px/1 var(--font-mono);
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
        color: var(--color-lavender);
        border-radius: 6px;
        padding: 3px 7px
    }

    .article pre {
        background: var(--color-deep);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius);
        font: 400 14px/1.7 var(--font-mono);
        color: var(--color-white);
        margin: 28px 0;
        padding: 22px;
        overflow-x: auto
    }

    .article pre code {
        color: inherit;
        background: 0 0;
        border: 0;
        padding: 0
    }

    .article table {
        border-collapse: collapse;
        width: 100%;
        margin: 28px 0;
        font-size: 14.5px
    }

    .article th,
    .article td {
        text-align: left;
        border: 1px solid var(--color-border);
        padding: 14px 16px
    }

    .article th {
        background: var(--color-surface-2);
        font: 600 13px/1.3 var(--font-display);
        color: var(--color-white)
    }

    .article td {
        color: var(--color-muted)
    }

    .article ul,
    .article ol {
        color: var(--color-muted);
        margin: 0 0 24px;
        padding-left: 22px
    }

    .article li {
        margin-bottom: 8px
    }

    .post-sidebar {
        flex-direction: column;
        gap: 28px;
        display: flex
    }

    .toc {
        display: none
    }

    .toc h4,
    .sidecard h4 {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-bottom: 14px
    }

    .toc a {
        color: var(--color-muted);
        border-left: 2px solid var(--color-border);
        padding: 6px 0 6px 14px;
        font-size: 14px;
        transition: color .2s, border-color .2s;
        display: block
    }

    .toc a.active {
        color: var(--color-white);
        border-left-color: var(--color-violet)
    }

    .sidecard {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 24px
    }

    .sidecard .author-row {
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
        display: flex
    }

    .author-av {
        background: var(--gradient-brand);
        width: 48px;
        height: 48px;
        font: 600 18px/1 var(--font-display);
        color: var(--color-on-accent);
        border-radius: 999px;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .sidecard b {
        font-size: 15px
    }

    .sidecard .role {
        color: var(--color-muted);
        font: 400 12px/1.4 var(--font-mono)
    }

    .related-mini {
        flex-direction: column;
        gap: 12px;
        display: flex
    }

    .related-mini a {
        border-bottom: 1px solid var(--color-border);
        padding: 12px 0;
        display: block
    }

    .related-mini a:last-child {
        border-bottom: none
    }

    .related-mini .cat {
        font: 400 11px/1 var(--font-mono);
        color: var(--color-pink)
    }

    .related-mini b {
        font: 500 14px/1.35 var(--font-display);
        color: var(--color-white);
        margin-top: 5px;
        display: block
    }

    .feedback-bar {
        border-block: 1px solid var(--color-border);
        align-items: center;
        gap: 16px;
        margin: 40px 0;
        padding: 24px 0;
        display: flex
    }

    .feedback-bar span {
        color: var(--color-muted);
        font-size: 15px
    }

    .fb-btn {
        border: 1px solid var(--color-border-strong);
        width: 44px;
        height: 44px;
        color: var(--color-muted);
        cursor: pointer;
        background: 0 0;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        transition: color .2s, border-color .2s;
        display: inline-flex
    }

    .fb-btn:hover {
        color: var(--color-white);
        border-color: var(--color-lavender)
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        display: grid
    }

    .form-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 32px
    }

    .field {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
        display: flex
    }

    .field label {
        font: 500 13px/1 var(--font-display)
    }

    .field label .req {
        color: var(--color-pink)
    }

    .field input,
    .field select,
    .field textarea {
        background: var(--color-bg);
        border: 1px solid var(--color-border-strong);
        width: 100%;
        font: 400 15px/1.4 var(--font-display);
        color: var(--color-white);
        border-radius: 10px;
        outline: none;
        padding: 13px 14px;
        transition: border-color .2s, box-shadow .2s
    }

    .field textarea {
        resize: vertical;
        min-height: 110px;
        font-family: var(--font-display)
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        border-color: var(--color-violet);
        box-shadow: 0 0 0 3px #6000ff40
    }

    @supports (color:color-mix(in lab, red, red)) {

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-violet) 25%, transparent)
        }
    }

    .field-error {
        color: var(--color-red);
        font: 400 12.5px/1.4 var(--font-mono)
    }

    .field select {
        appearance: none;
        padding-right: 40px
    }

    .select-wrap {
        position: relative
    }

    .select-wrap:after {
        content: "";
        border-right: 2px solid var(--color-muted);
        border-bottom: 2px solid var(--color-muted);
        pointer-events: none;
        width: 8px;
        height: 8px;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-70%)rotate(45deg)
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
        display: grid
    }

    .privacy-note {
        color: var(--color-muted);
        font: 400 13px/1.5 var(--font-mono);
        text-align: center;
        margin-top: 14px
    }

    .hp {
        opacity: 0;
        height: 0;
        position: absolute;
        left: -9999px;
        overflow: hidden
    }

    .success-state {
        background: var(--color-surface);
        border: 1px solid #6000ff66
    }

    @supports (color:color-mix(in lab, red, red)) {
        .success-state {
            border: 1px solid color-mix(in srgb, var(--color-violet) 40%, transparent)
        }
    }

    .success-state {
        box-shadow: 0 0 0 1px #6000ff33, 0 0 40px #6000ff24
    }

    @supports (color:color-mix(in lab, red, red)) {
        .success-state {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 20%, transparent), 0 0 40px color-mix(in srgb, var(--color-violet) 14%, transparent)
        }
    }

    .success-state {
        border-radius: var(--radius-lg);
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin-top: 24px;
        padding: 40px;
        display: flex
    }

    .success-state .check {
        background: var(--gradient-brand);
        width: 56px;
        height: 56px;
        color: var(--color-on-accent);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .success-state h3 {
        font: 600 22px/1.2 var(--font-display)
    }

    .success-state p {
        color: var(--color-muted)
    }

    .contact-info {
        flex-direction: column;
        gap: 24px;
        display: flex
    }

    .info-block h4 {
        font: 500 12px/1 var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-bottom: 10px
    }

    .info-block p,
    .info-block a {
        color: var(--color-white);
        font-size: 15px
    }

    .info-block .muted {
        color: var(--color-muted);
        font-size: 14px
    }

    .tidycal-embed {
        background: var(--color-surface);
        border: 1px dashed var(--color-border-strong);
        border-radius: var(--radius-lg);
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        min-height: 220px;
        padding: 40px 24px;
        display: flex
    }

    .tidycal-embed .logo {
        font: 700 20px/1 var(--font-display);
        background: var(--gradient-brand);
        color: #0000;
        -webkit-background-clip: text;
        background-clip: text
    }

    .tidycal-embed span {
        color: var(--color-muted);
        font: 400 13px/1.5 var(--font-mono)
    }

    .faq {
        flex-direction: column;
        gap: 0;
        max-width: 760px;
        margin: 0 auto;
        display: flex
    }

    .faq-item {
        border-bottom: 1px solid var(--color-border)
    }

    .faq-q {
        cursor: pointer;
        text-align: left;
        width: 100%;
        font: 600 18px/1.4 var(--font-display);
        color: var(--color-white);
        background: 0 0;
        border: none;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 24px 0;
        display: flex
    }

    .faq-q .chev {
        color: var(--color-lavender);
        transition: transform .3s var(--ease-reveal);
        flex-shrink: 0
    }

    .faq-item.open .chev {
        transform: rotate(45deg)
    }

    .faq-a {
        max-height: 0;
        transition: max-height .4s var(--ease-reveal);
        overflow: hidden
    }

    .faq-a p {
        color: var(--color-muted);
        text-wrap: pretty;
        padding-bottom: 24px;
        font-size: 16px
    }

    .region-snapshot {
        grid-template-columns: 1fr;
        gap: 16px;
        display: grid
    }

    .region-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: transform .3s var(--ease-reveal), border-color .3s;
        flex-direction: column;
        gap: 12px;
        padding: 26px;
        display: flex
    }

    .region-card:hover {
        border-color: #6000ff80;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .region-card:hover {
            border-color: color-mix(in srgb, var(--color-violet) 50%, transparent)
        }
    }

    .region-card:hover {
        box-shadow: 0 0 0 1px #6000ff38
    }

    @supports (color:color-mix(in lab, red, red)) {
        .region-card:hover {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 22%, transparent)
        }
    }

    .region-card h3 {
        font: 600 18px/1.3 var(--font-display)
    }

    .region-card p {
        color: var(--color-muted);
        text-wrap: pretty;
        font-size: 14px
    }

    .legal-meta {
        color: var(--color-muted);
        font: 400 13px/1.5 var(--font-mono);
        margin-top: 14px
    }

    .skip-link {
        z-index: 1000;
        background: var(--color-violet);
        color: var(--color-on-accent);
        font: 600 14px/1 var(--font-display);
        border-radius: 0 0 var(--radius) 0;
        transition: transform .2s var(--ease-reveal);
        padding: 10px 18px;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-110%)
    }

    .skip-link:focus {
        transform: translateY(0)
    }

    .term-input:focus-visible {
        outline: 2px solid var(--color-lavender);
        outline-offset: 2px;
        border-radius: 2px
    }

    .placeholder-block {
        border: 1px dashed var(--color-border-strong);
        border-radius: var(--radius-lg);
        text-align: center;
        color: var(--color-muted);
        font: 400 14px/1.6 var(--font-mono);
        margin-bottom: var(--space-12);
        padding: 64px 32px
    }

    .work-pages {
        --wp-gradient: linear-gradient(120deg, var(--color-violet) 0%, var(--color-lavender) 100%);
        --wp-accent-soft: #6000ff29
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-pages {
            --wp-accent-soft: color-mix(in oklch, var(--color-violet) 16%, transparent)
        }
    }

    .work-pages {
        --wp-lavender-soft: #c769f724
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-pages {
            --wp-lavender-soft: color-mix(in oklch, var(--color-lavender) 14%, transparent)
        }
    }

    .work-pages {
        --wp-muted-soft: #9ca0b024
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-pages {
            --wp-muted-soft: color-mix(in oklch, var(--color-muted) 14%, transparent)
        }
    }

    .work-pages {
        --wp-fg-soft: #f3f3f30f
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-pages {
            --wp-fg-soft: color-mix(in oklch, var(--color-white) 6%, transparent)
        }
    }

    .work-pages {
        --wp-ease: cubic-bezier(.16, 1, .3, 1);
        --wp-shadow-card: 0 1px 0 #ffffff05 inset, 0 18px 44px #0000006b;
        --wp-shadow-soft: 0 8px 24px #0000004d;
        --wp-glow-accent: 0 0 0 1px #6000ff80, 0 0 30px #6000ff52
    }

    @supports (color:color-mix(in lab, red, red)) {
        .work-pages {
            --wp-glow-accent: 0 0 0 1px color-mix(in oklch, var(--color-violet) 50%, transparent), 0 0 30px color-mix(in oklch, var(--color-violet) 32%, transparent)
        }
    }

    .work-pages {
        --wp-container: 1240px;
        --wp-gutter: clamp(20px, 4vw, 64px);
        --wp-s1: 4px;
        --wp-s2: 8px;
        --wp-s3: 12px;
        --wp-s4: 16px;
        --wp-s5: 24px;
        --wp-s6: 32px;
        --wp-s7: 48px;
        --wp-s8: 64px;
        --wp-s9: 80px;
        --wp-s10: 96px;
        --wp-s11: 128px;
        --wp-card-pad: var(--wp-s5);
        --wp-reading: 760px;
        --wp-fs-hero: clamp(40px, 6.4vw, 84px);
        --wp-fs-h2: clamp(26px, 3vw, 40px);
        --wp-fs-card: clamp(22px, 2.1vw, 27px);
        --wp-fs-lead: clamp(18px, 1.4vw, 21px);
        --wp-fs-body: 17px;
        --wp-fs-meta: 14px;
        --wp-fs-eyebrow: 12px
    }

    [data-theme=light] .work-pages {
        --wp-shadow-card: 0 1px 2px #181a210d, 0 14px 34px #181a2117;
        --wp-shadow-soft: 0 6px 18px #181a210f;
        --wp-glow-accent: none
    }

    .wp-container {
        max-width: var(--wp-container);
        padding-inline: var(--wp-gutter);
        margin-inline: auto
    }

    .wp-eyebrow {
        font-family: var(--font-mono);
        font-size: var(--wp-fs-eyebrow);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-lavender);
        margin: 0;
        font-weight: 500
    }

    .wp-h2 {
        font-size: var(--wp-fs-h2);
        letter-spacing: -.02em;
        font-weight: 600;
        line-height: 1.08;
        font-family: var(--font-display)
    }

    .wp-h-card {
        font-size: var(--wp-fs-card);
        letter-spacing: -.015em;
        font-weight: 600;
        line-height: 1.18;
        font-family: var(--font-display)
    }

    .wp-lead {
        font-size: var(--wp-fs-lead);
        color: var(--color-muted);
        max-width: 62ch;
        line-height: 1.5
    }

    .wp-meta {
        font-family: var(--font-mono);
        font-size: var(--wp-fs-meta);
        color: var(--color-muted);
        letter-spacing: .02em
    }

    .wp-num {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums
    }

    .evidence {
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        font-family: var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-white);
        border-radius: 999px;
        align-items: center;
        gap: 7px;
        padding: 5px 11px 5px 9px;
        font-size: 11px;
        display: inline-flex
    }

    .evidence .dot {
        border-radius: 50%;
        flex: none;
        width: 7px;
        height: 7px
    }

    .evidence[data-state=verified] {
        border-color: #7c2dff7c
    }

    @supports (color:color-mix(in lab, red, red)) {
        .evidence[data-state=verified] {
            border-color: color-mix(in oklch, var(--color-violet) 40%, var(--color-border-strong))
        }
    }

    .evidence[data-state=verified] .dot {
        background: var(--color-violet);
        box-shadow: 0 0 8px var(--color-violet)
    }

    .evidence[data-state=progress] .dot {
        background: var(--color-muted);
        box-shadow: none
    }

    .evidence[data-state=pilot] {
        border-color: #cf7ff887
    }

    @supports (color:color-mix(in lab, red, red)) {
        .evidence[data-state=pilot] {
            border-color: color-mix(in oklch, var(--color-lavender) 45%, var(--color-border-strong))
        }
    }

    .evidence[data-state=pilot] .dot {
        background: var(--color-lavender);
        box-shadow: none
    }

    [data-theme=light] .evidence[data-state=verified] .dot {
        box-shadow: none
    }

    .wp-pill {
        background: var(--wp-accent-soft);
        color: var(--color-violet);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        font-size: 11px;
        font-weight: 500;
        display: inline-flex
    }

    .wp-chip {
        color: var(--color-muted);
        border: 1px solid var(--color-border-strong);
        font-family: var(--font-mono);
        letter-spacing: .06em;
        text-transform: uppercase;
        background: 0 0;
        border-radius: 999px;
        align-items: center;
        padding: 5px 11px;
        font-size: 11px;
        display: inline-flex
    }

    .cs-visual {
        background: radial-gradient(120% 120% at 12% 8%, #ffffff1f, transparent 46%), repeating-linear-gradient(135deg, #ffffff0d 0 2px, transparent 2px 26px), var(--wp-gradient);
        isolation: isolate;
        border-radius: 14px;
        position: relative;
        overflow: hidden
    }

    .cs-visual:after {
        content: "";
        background: linear-gradient(#191a1f24, #191a1f9e);
        position: absolute;
        inset: 0
    }

    @supports (color:color-mix(in lab, red, red)) {
        .cs-visual:after {
            background: linear-gradient(180deg, color-mix(in oklch, var(--color-bg) 14%, transparent), color-mix(in oklch, var(--color-bg) 62%, transparent))
        }
    }

    .cs-visual:after {
        z-index: 1
    }

    .cs-visual img {
        object-fit: cover;
        z-index: 0;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0
    }

    .motif {
        z-index: 2;
        color: var(--color-on-accent);
        padding: var(--wp-s5);
        place-items: center;
        display: grid;
        position: absolute;
        inset: 0
    }

    .motif svg {
        width: 100%;
        height: 100%;
        overflow: visible
    }

    .motif .ln {
        stroke: currentColor;
        stroke-width: 1.5px;
        fill: none;
        opacity: .5;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .motif .ax {
        stroke: currentColor;
        stroke-width: 1px;
        opacity: .22
    }

    .motif .soft {
        fill: currentColor;
        opacity: .12;
        stroke: none
    }

    .motif .emph {
        stroke: currentColor;
        stroke-width: 2.6px;
        fill: none;
        opacity: 1;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .motif .emph-fill {
        fill: currentColor;
        opacity: .92;
        stroke: none
    }

    .motif .sig {
        fill: var(--color-lavender);
        stroke: none
    }

    .cs-visual .vcap {
        left: var(--wp-s4);
        bottom: var(--wp-s3);
        z-index: 3;
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-on-accent);
        opacity: 1;
        font-size: 13px;
        font-weight: 700;
        position: absolute
    }

    .cs-visual .vph {
        right: var(--wp-s4);
        bottom: var(--wp-s3);
        z-index: 3;
        font-family: var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-on-accent);
        opacity: .5;
        font-size: 10px;
        position: absolute
    }

    .cs-index {
        color: var(--color-muted);
        letter-spacing: .14em;
        margin-left: auto;
        font-size: 12px
    }

    .ph-tag {
        color: var(--color-muted);
        opacity: .85
    }

    @keyframes hero-draw {
        to {
            stroke-dashoffset: 0
        }
    }

    @keyframes hero-fade {
        to {
            opacity: .7
        }
    }

    @keyframes hero-pop {

        0%,
        60% {
            opacity: 0;
            transform: scale(.25)
        }

        to {
            opacity: 1;
            transform: scale(1)
        }
    }

    .featured-visual .motif .emph {
        stroke-dasharray: 100;
        stroke-dashoffset: 100px;
        animation: hero-draw 1.2s var(--wp-ease) .15s forwards
    }

    .featured-visual .motif .pt {
        opacity: 0;
        animation: .45s forwards hero-fade
    }

    .featured-visual .motif .pt:first-of-type {
        animation-delay: .4s
    }

    .featured-visual .motif .pt:nth-of-type(2) {
        animation-delay: .7s
    }

    .featured-visual .motif .pt:nth-of-type(3) {
        animation-delay: 1s
    }

    .featured-visual .motif .sig {
        transform-box: fill-box;
        transform-origin: 50%;
        opacity: 0;
        animation: hero-pop .5s var(--wp-ease) 1.25s forwards
    }

    .wp-section {
        padding-block: clamp(64px, 9vw, var(--wp-s11))
    }

    .wp-section+.wp-section {
        border-top: 1px solid var(--color-border)
    }

    .wp-masthead {
        padding-top: 180px;
        position: relative;
        overflow: hidden
    }

    .wp-masthead .halo-violet {
        width: 640px;
        height: 640px;
        top: -200px;
        left: -180px
    }

    .wp-masthead .halo-red {
        width: 520px;
        height: 520px;
        animation-direction: alternate-reverse;
        top: -80px;
        right: -160px
    }

    .wp-masthead h1 {
        margin-top: var(--wp-s4);
        max-width: 18ch;
        font-size: clamp(36px, 5vw, 64px);
        font-family: var(--font-display);
        letter-spacing: -.025em;
        font-weight: 600;
        line-height: 1.02
    }

    .wp-masthead .wp-lead {
        margin-top: var(--wp-s5)
    }

    .wp-masthead-meta {
        margin-top: var(--wp-s6);
        color: var(--color-muted);
        font-family: var(--font-mono);
        font-size: var(--wp-fs-meta)
    }

    .featured-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--wp-shadow-card);
        transition: border-color .25s var(--wp-ease), box-shadow .25s var(--wp-ease), transform .25s var(--wp-ease);
        border-radius: 14px;
        grid-template-columns: 1.05fr 1fr;
        gap: 0;
        display: grid;
        overflow: hidden
    }

    .featured-card:hover {
        border-color: #701aff6c
    }

    @supports (color:color-mix(in lab, red, red)) {
        .featured-card:hover {
            border-color: color-mix(in oklch, var(--color-violet) 38%, var(--color-border))
        }
    }

    .featured-body {
        padding: var(--wp-card-pad);
        gap: var(--wp-s3);
        flex-direction: column;
        display: flex
    }

    .featured-badges {
        align-items: center;
        gap: var(--wp-s3);
        flex-wrap: wrap;
        display: flex
    }

    .featured-body .wp-h-card {
        max-width: 16ch;
        font-size: clamp(28px, 3.2vw, 46px);
        line-height: 1.06
    }

    .featured-body .wp-lead {
        max-width: 46ch
    }

    .featured-detail-grid {
        gap: var(--wp-s2);
        padding-top: var(--wp-s3);
        border-top: 1px solid var(--color-border);
        grid-template-columns: 1fr 1fr;
        display: grid
    }

    .featured-visual {
        border-radius: 14px;
        min-height: 310px
    }

    .featured-cta-row {
        margin-top: var(--wp-s2);
        align-items: center;
        gap: var(--wp-s3);
        flex-wrap: wrap;
        display: flex
    }

    .filterbar {
        align-items: center;
        gap: var(--wp-s3);
        flex-wrap: wrap;
        display: flex
    }

    .filterbar .filter-label {
        font-family: var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-right: var(--wp-s1);
        font-size: 11px
    }

    .fbtn {
        border: 1px solid var(--color-border-strong);
        min-height: 40px;
        color: var(--color-muted);
        font-family: var(--font-mono);
        letter-spacing: .06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color .18s var(--wp-ease), border-color .18s var(--wp-ease), background .18s var(--wp-ease);
        background: 0 0;
        border-radius: 999px;
        padding: 8px 15px;
        font-size: 12px
    }

    .fbtn:hover {
        color: var(--color-white);
        border-color: #f6f6f666
    }

    @supports (color:color-mix(in lab, red, red)) {
        .fbtn:hover {
            border-color: color-mix(in oklch, var(--color-white) 30%, var(--color-border-strong))
        }
    }

    .fbtn[aria-pressed=true] {
        background: var(--color-violet);
        color: var(--color-on-accent);
        border-color: var(--color-violet)
    }

    .filter-count {
        font-family: var(--font-mono);
        color: var(--color-muted);
        margin-left: auto;
        font-size: 12px
    }

    .cs-grid {
        gap: var(--wp-s5);
        grid-template-columns: repeat(3, 1fr);
        display: grid
    }

    .cs-card {
        gap: var(--wp-s4);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--wp-shadow-soft);
        transition: transform .25s var(--wp-ease), border-color .25s var(--wp-ease), box-shadow .25s var(--wp-ease);
        color: inherit;
        border-radius: 14px;
        flex-direction: column;
        text-decoration: none;
        display: flex;
        overflow: hidden
    }

    .cs-card:hover {
        border-color: #6f18ff71;
        transform: translateY(-3px)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .cs-card:hover {
            border-color: color-mix(in oklch, var(--color-violet) 40%, var(--color-border))
        }
    }

    .cs-card:hover {
        box-shadow: var(--wp-shadow-card)
    }

    .cs-card .cs-visual {
        aspect-ratio: 16/7;
        border-radius: 0
    }

    .cs-card-body {
        padding: var(--wp-card-pad);
        gap: var(--wp-s3);
        flex-direction: column;
        flex: 1;
        display: flex
    }

    .cs-card .topline {
        align-items: center;
        gap: var(--wp-s2);
        flex-wrap: wrap;
        display: flex
    }

    .cs-card .wp-h-card {
        max-width: 20ch;
        font-size: 23px
    }

    .cs-card .support {
        color: var(--color-muted);
        max-width: 42ch;
        font-size: 14px;
        line-height: 1.5
    }

    .cs-detail-grid {
        gap: var(--wp-s2);
        padding-top: var(--wp-s3);
        border-top: 1px solid var(--color-border);
        grid-template-columns: 1fr 1fr;
        margin-top: auto;
        display: grid
    }

    .cs-detail {
        background: var(--wp-fg-soft);
        border-radius: 8px;
        min-height: 58px;
        padding: 9px 10px
    }

    .cs-detail .detail-k {
        font-family: var(--font-mono);
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--color-muted);
        font-size: 9px;
        display: block
    }

    .cs-detail .detail-v {
        color: var(--color-white);
        margin-top: 3px;
        font-size: 13px;
        font-weight: 600;
        display: block
    }

    .cs-tags {
        gap: var(--wp-s2);
        padding-top: var(--wp-s1);
        flex-wrap: wrap;
        display: flex
    }

    .cs-card.is-hidden {
        display: none
    }

    .grid-empty {
        padding: var(--wp-s8);
        text-align: center;
        color: var(--color-muted);
        border: 1px dashed var(--color-border-strong);
        font-family: var(--font-mono);
        border-radius: 14px;
        font-size: 14px
    }

    .cap-cloud {
        gap: var(--wp-s2);
        margin-top: var(--wp-s5);
        flex-wrap: wrap;
        display: flex
    }

    .cap-cloud .wp-chip {
        padding: 8px 14px;
        font-size: 12px
    }

    .wp-principles {
        gap: var(--wp-s6);
        margin-top: var(--wp-s6);
        grid-template-columns: repeat(3, 1fr);
        display: grid
    }

    .wp-principle {
        padding-top: var(--wp-s5);
        border-top: 1px solid var(--color-border)
    }

    .wp-principle .pidx {
        font-family: var(--font-mono);
        color: var(--color-violet);
        letter-spacing: .1em;
        font-size: 12px
    }

    .wp-principle h3 {
        font-family: var(--font-display);
        margin: var(--wp-s3) 0 var(--wp-s2);
        letter-spacing: -.01em;
        font-size: 21px;
        font-weight: 600
    }

    .wp-principle p {
        color: var(--color-muted);
        font-size: 15px;
        line-height: 1.55
    }

    .cta-band {
        border: 1px solid var(--color-border);
        gap: var(--wp-s7);
        background: var(--color-surface);
        box-shadow: var(--wp-shadow-card);
        padding: clamp(40px, 6vw, var(--wp-s9)) clamp(32px, 5vw, var(--wp-s8));
        border-radius: 14px;
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
        display: grid;
        position: relative;
        overflow: hidden
    }

    .cta-band:before {
        content: "";
        background: var(--wp-gradient);
        height: 4px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

    .cta-band .inner {
        align-self: center;
        max-width: 60ch
    }

    .cta-band .inner h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        font-family: var(--font-display);
        letter-spacing: -.02em;
        margin: 0;
        font-weight: 600;
        line-height: 1.08
    }

    .cta-band .inner .wp-lead {
        margin: var(--wp-s4) 0 var(--wp-s6)
    }

    .cta-actions-row {
        gap: var(--wp-s3);
        flex-wrap: wrap;
        display: flex
    }

    .cta-visual {
        border: 1px solid var(--color-border);
        background: #1c1d24;
        border-radius: 8px;
        min-height: 250px;
        position: relative;
        overflow: hidden
    }

    @supports (color:color-mix(in lab, red, red)) {
        .cta-visual {
            background: color-mix(in oklch, var(--color-bg) 44%, var(--color-surface))
        }
    }

    .cta-visual:before {
        content: "";
        border: 1px solid #f5f5f54d;
        position: absolute;
        inset: 14% 12%
    }

    @supports (color:color-mix(in lab, red, red)) {
        .cta-visual:before {
            border: 1px solid color-mix(in oklch, var(--color-white) 25%, var(--color-border))
        }
    }

    .cta-visual:before {
        background: var(--color-surface);
        box-shadow: var(--wp-shadow-soft);
        border-radius: 8px
    }

    .cta-visual:after {
        content: "Project image";
        color: var(--color-muted);
        font-family: var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
        font-size: 11px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .wp-pagefoot {
        padding-block: var(--wp-s7);
        border-top: 1px solid var(--color-border);
        color: var(--color-muted);
        font-size: 13px
    }

    .case-hero-new {
        padding: clamp(56px, 10vw, 132px) 0 72px;
        position: relative;
        overflow: hidden
    }

    .case-hero-new .halo-violet {
        width: 600px;
        height: 600px;
        top: -200px;
        right: -160px
    }

    .case-hero-new .halo-red {
        width: 480px;
        height: 480px;
        animation-direction: alternate-reverse;
        bottom: -120px;
        left: -140px
    }

    .backlink {
        color: var(--color-muted);
        align-items: center;
        gap: 8px;
        margin-bottom: 44px;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex
    }

    .backlink:hover {
        color: var(--color-white)
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
        align-items: end;
        gap: clamp(36px, 7vw, 96px);
        display: grid
    }

    .case-hero-new h1 {
        max-width: 13ch;
        font-size: clamp(44px, 5.8vw, 78px);
        font-weight: 600;
        line-height: .98;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 18px
    }

    .hero-lead {
        max-width: 56ch;
        color: var(--color-muted);
        margin-top: 28px;
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.48
    }

    .hero-notes {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 26px;
        display: flex
    }

    .hero-tag {
        min-height: 30px;
        color: var(--color-muted);
        border: 1px solid var(--color-border);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        border-radius: 999px;
        align-items: center;
        padding: 6px 10px;
        font-size: 12px;
        display: inline-flex
    }

    .hero-tag.verified {
        color: var(--color-white);
        border-color: #6d14ff7d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .hero-tag.verified {
            border-color: color-mix(in oklch, var(--color-violet) 45%, var(--color-border))
        }
    }

    .hero-tag.verified:before {
        content: "";
        background: var(--color-violet);
        border-radius: 50%;
        width: 6px;
        height: 6px;
        margin-right: 7px
    }

    .proof-panel {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--wp-shadow-card);
        border-radius: 14px;
        padding: clamp(24px, 4vw, 40px)
    }

    .proof-label {
        color: var(--color-muted);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px
    }

    .proof-number {
        font: 600 clamp(32px, 3.5vw, 48px)/.95 var(--font-mono);
        letter-spacing: -.06em;
        margin-top: 8px
    }

    .proof-number strong {
        color: var(--color-violet);
        font-weight: inherit
    }

    .proof-copy {
        max-width: 26ch;
        color: var(--color-muted);
        margin-top: 18px
    }

    .proof-rule {
        background: var(--color-border);
        height: 1px;
        margin: 28px 0 18px
    }

    .proof-source {
        font: 12px/1.5 var(--font-mono);
        color: var(--color-muted)
    }

    .proof-source b {
        color: var(--color-white);
        font-weight: 500
    }

    .wp-section-detail {
        border-top: 1px solid var(--color-border);
        padding: clamp(72px, 10vw, 128px) 0
    }

    .section-head-grid {
        flex-direction: column;
        gap: 18px;
        margin-bottom: clamp(36px, 5vw, 64px);
        display: flex
    }

    .section-head-grid h2 {
        max-width: 24ch;
        font-size: clamp(30px, 3.6vw, 48px);
        line-height: 1.05;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        font-weight: 600
    }

    .section-head-grid .summary {
        max-width: 72ch;
        color: var(--color-muted);
        font-size: 18px
    }

    .quote-feature__inner {
        align-items: flex-start;
        gap: clamp(36px, 6vw, 64px);
        margin-top: 48px;
        display: flex
    }

    .quote-feature__photo {
        flex: none;
        margin-top: 118px;
    }

    .quote-feature__photo img {
        object-fit: cover;
        border: 2px solid var(--color-violet);
        border-radius: 50%;
        width: 100px;
        height: 100px;
        box-shadow: 0 0 24px #6000ff4d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .quote-feature__photo img {
            box-shadow: 0 0 24px color-mix(in srgb, var(--color-violet) 30%, transparent)
        }
    }

    .quote-feature__text {
        flex: 1;
        min-width: 0
    }

    .quote-feature .quote-mark-lg {
        font-family: var(--font-display);
        color: var(--color-violet);
        margin: 0 0 18px;
        font-size: clamp(56px, 8vw, 96px);
        line-height: .6;
        display: block
    }

    .quote-feature .pull-quote {
        font-family: var(--font-display);
        letter-spacing: -.015em;
        text-wrap: balance;
        max-width: 28ch;
        margin: 0;
        font-size: clamp(28px, 3.6vw, 46px);
        line-height: 1.15
    }

    .quote-feature .quote-author {
        font-family: var(--font-mono);
        letter-spacing: .04em;
        color: var(--color-muted);
        margin-top: 32px;
        font-size: 14px
    }

    .quote-feature .quote-author b {
        color: var(--color-white);
        font-weight: 600
    }

    @media (width<=600px) {
        .quote-feature__inner {
            text-align: center;
            flex-direction: column;
            align-items: center
        }

        .quote-feature .pull-quote {
            max-width: 100%
        }
    }

    .snapshot {
        border-top: 1px solid var(--color-border);
        border-left: 1px solid var(--color-border);
        grid-template-columns: repeat(4, 1fr);
        display: grid
    }

    .snap {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 22px 24px
    }

    .snap .k {
        color: var(--color-muted);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px;
        display: block
    }

    .snap .v {
        margin-top: 10px;
        font-size: 17px;
        font-weight: 600;
        display: block
    }

    .constraint-grid {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(3, 1fr);
        display: grid
    }

    .constraint {
        border-right: 1px solid var(--color-border);
        min-height: 230px;
        padding: 24px 28px 24px 0
    }

    .constraint+.constraint {
        padding-left: 28px
    }

    .constraint:last-child {
        border-right: 0
    }

    .step {
        color: var(--color-violet);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px;
        display: block
    }

    .constraint h3 {
        font-size: 22px;
        line-height: 1.18;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 24px;
        font-weight: 600
    }

    .constraint p {
        max-width: 28ch;
        color: var(--color-muted);
        margin-top: 12px;
        font-size: 16px
    }

    .scope-grid {
        grid-template-columns: .9fr 1.1fr;
        align-items: start;
        gap: clamp(36px, 6vw, 80px);
        display: grid
    }

    .scope-copy p {
        max-width: 46ch;
        color: var(--color-muted)
    }

    .scope-copy p+p {
        margin-top: 16px
    }

    .criteria-list {
        border-top: 1px solid var(--color-border);
        display: grid
    }

    .criterion {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: 110px 1fr;
        gap: 18px;
        padding: 18px 0;
        display: grid
    }

    .criterion .step {
        padding-top: 3px
    }

    .criterion h3 {
        font-family: var(--font-body);
        margin: 0;
        font-size: 16px;
        font-weight: 600
    }

    .criterion p {
        color: var(--color-muted);
        margin-top: 6px;
        font-size: 15px
    }

    .method-list {
        border-top: 1px solid var(--color-border);
        display: grid
    }

    .method {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: 36px 1fr;
        gap: 14px;
        padding: 17px 0;
        display: grid
    }

    .method .step {
        padding-top: 3px
    }

    .method p {
        margin: 0;
        font-size: 16px
    }

    .method p+p {
        color: var(--color-muted);
        margin-top: 6px;
        font-size: 15px
    }

    .system-grid-detail {
        grid-template-columns: .9fr 1.1fr;
        align-items: center;
        gap: clamp(36px, 6vw, 80px);
        display: grid
    }

    .system-copy h2 {
        max-width: 13ch;
        font-size: clamp(32px, 3.8vw, 50px);
        line-height: 1.05;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 16px;
        font-weight: 600
    }

    .system-copy p {
        max-width: 46ch;
        color: var(--color-muted);
        margin-top: 22px
    }

    .diagram-panel {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        min-height: 430px;
        box-shadow: var(--wp-shadow-card);
        border-radius: 14px;
        place-items: center;
        padding: 22px;
        display: grid;
        overflow: hidden
    }

    .diagram-panel svg {
        width: 100%;
        max-width: 560px
    }

    .diagram-panel .line {
        fill: none;
        stroke: var(--color-muted);
        stroke-width: 1.4px;
        opacity: .36
    }

    .diagram-panel .arrow {
        fill: none;
        stroke: var(--color-white);
        stroke-width: 2.2px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .diagram-panel .node {
        fill: var(--color-bg);
        stroke: var(--color-muted);
        stroke-width: 1.4px
    }

    .diagram-panel .node-active {
        fill: var(--wp-accent-soft);
        stroke: var(--color-violet);
        stroke-width: 1.8px
    }

    .diagram-panel text {
        fill: var(--color-muted);
        font: 11px var(--font-mono);
        letter-spacing: 1px
    }

    .diagram-panel .active-text {
        fill: var(--color-white)
    }

    .shot {
        margin-top: clamp(36px, 5vw, 64px)
    }

    .shot-frame {
        aspect-ratio: 16/9;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--wp-shadow-soft);
        transition: box-shadow .2s var(--wp-ease);
        border-radius: 14px;
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .shot-bar {
        border-bottom: 1px solid var(--color-border);
        flex: none;
        align-items: center;
        gap: 7px;
        padding: 12px 14px;
        display: flex
    }

    .shot-bar i {
        background: #9ca0b066;
        border-radius: 50%;
        width: 9px;
        height: 9px
    }

    @supports (color:color-mix(in lab, red, red)) {
        .shot-bar i {
            background: color-mix(in oklch, var(--color-muted) 40%, transparent)
        }
    }

    .shot-stage {
        flex: auto;
        place-items: center;
        padding: 24px;
        display: grid
    }

    .shot-label {
        font-family: var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        text-align: center;
        max-width: 42ch;
        font-size: 12px
    }

    .shot-inline {
        margin-top: clamp(28px, 4vw, 44px)
    }

    .shot:hover .shot-frame {
        box-shadow: var(--wp-shadow-card)
    }

    .cap-grid-detail {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        display: grid
    }

    .cap-detail {
        border-right: 1px solid var(--color-border);
        padding: 28px 28px 28px 0
    }

    .cap-detail+.cap-detail {
        padding-left: 28px
    }

    .cap-detail:last-child {
        border-right: 0
    }

    .cap-detail h3 {
        font-size: 21px;
        line-height: 1.2;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 20px;
        font-weight: 600
    }

    .cap-detail p {
        color: var(--color-muted);
        margin-top: 12px;
        font-size: 15px
    }

    .flow-list {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        display: grid
    }

    .flow {
        border-right: 1px solid var(--color-border);
        padding: 26px 24px 26px 0
    }

    .flow+.flow {
        padding-left: 24px
    }

    .flow:last-child {
        border-right: 0
    }

    .flow .k {
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--color-violet);
        font-size: 12px;
        display: block
    }

    .flow h3 {
        font-size: 18px;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 14px;
        font-weight: 600
    }

    .flow ul {
        margin: 12px 0 0;
        padding: 0;
        list-style: none
    }

    .flow li {
        border-top: 1px solid var(--color-border);
        color: var(--color-muted);
        padding: 8px 0;
        font-size: 14px
    }

    .flow li:before {
        content: "·";
        color: var(--color-violet);
        margin-right: 8px;
        font-weight: 700
    }

    .timeline {
        border-top: 1px solid var(--color-border);
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        display: grid
    }

    .phase {
        border-right: 1px solid var(--color-border);
        padding: 26px 24px 26px 0
    }

    .phase+.phase {
        padding-left: 24px
    }

    .phase:last-child {
        border-right: 0
    }

    .phase h3 {
        font-size: 18px;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin-top: 16px;
        font-weight: 600
    }

    .phase p {
        color: var(--color-muted);
        margin-top: 10px;
        font-size: 15px
    }

    .measure-layout {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        display: grid
    }

    .measure-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        box-shadow: var(--wp-shadow-soft);
        transition: transform .2s var(--wp-ease), box-shadow .2s var(--wp-ease);
        border-radius: 14px;
        padding: 32px
    }

    .measure-card:hover {
        box-shadow: var(--wp-shadow-card);
        transform: translateY(-3px)
    }

    .measure-card h3 {
        font-size: 23px;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        font-weight: 600
    }

    .measure-card .k {
        color: var(--color-muted);
        font-family: var(--font-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px;
        display: block
    }

    .measure-card p {
        color: var(--color-muted);
        margin-top: 12px
    }

    .measure-card ul {
        margin: 22px 0 0;
        padding: 0;
        list-style: none
    }

    .measure-card li {
        border-top: 1px solid var(--color-border);
        color: var(--color-white);
        padding: 13px 0;
        font-size: 15px
    }

    .measure-card li:before {
        content: "·";
        color: var(--color-violet);
        margin-right: 10px;
        font-weight: 700
    }

    .evidence-note {
        border: 1px solid var(--color-border);
        color: var(--color-muted);
        border-radius: 8px;
        align-items: flex-start;
        gap: 18px;
        margin-top: 24px;
        padding: 20px 24px;
        font-size: 15px;
        display: flex
    }

    .evidence-note strong {
        color: var(--color-white);
        font-family: var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
        font-size: 12px
    }

    .quote-feature {
        border-top: 1px solid var(--color-border);
        padding: clamp(72px, 10vw, 128px) 0
    }

    .quote-feature .wp-container {
        max-width: 1120px
    }

    .quote-mark-lg {
        font-family: var(--font-display);
        color: var(--color-violet);
        margin: 0 0 12px;
        font-size: clamp(48px, 6vw, 80px);
        line-height: .6;
        display: block
    }

    .pull-quote {
        font-family: var(--font-display);
        letter-spacing: -.015em;
        text-wrap: balance;
        max-width: 24ch;
        margin: 0;
        font-size: clamp(26px, 3vw, 40px);
        line-height: 1.18
    }

    .quote-author {
        font-family: var(--font-mono);
        letter-spacing: .04em;
        color: var(--color-muted);
        margin-top: 26px;
        font-size: 13px
    }

    .quote-author b {
        color: var(--color-white);
        font-weight: 500
    }

    .lessons {
        border-top: 1px solid var(--color-border);
        grid-template-columns: 1fr 1fr;
        gap: 0 56px;
        display: grid
    }

    .lesson {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: 36px 1fr;
        gap: 14px;
        padding: 20px 0;
        display: grid
    }

    .lesson .step {
        padding-top: 3px
    }

    .lesson h3 {
        font-family: var(--font-body);
        margin: 0;
        font-size: 17px;
        font-weight: 600
    }

    .lesson p {
        color: var(--color-muted);
        margin-top: 6px;
        font-size: 15px
    }

    .cta-wrap {
        border-top: 1px solid var(--color-border);
        padding-bottom: clamp(72px, 10vw, 128px)
    }

    .cta-card {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--wp-shadow-card);
        border-radius: 14px;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
        padding: clamp(36px, 6vw, 72px);
        display: grid
    }

    .cta-card h2 {
        max-width: 13ch;
        font-size: clamp(32px, 4.2vw, 54px);
        line-height: 1.04;
        font-family: var(--font-display);
        letter-spacing: -.025em;
        margin: 0;
        font-weight: 600
    }

    .cta-card p {
        max-width: 47ch;
        color: var(--color-muted);
        margin-top: 18px
    }

    .cta-actions-detail {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
        display: flex
    }

    .cta-image-placeholder {
        aspect-ratio: 4/3;
        border: 1px solid var(--color-border);
        background: var(--color-bg);
        border-radius: 8px;
        place-items: center;
        width: 100%;
        display: grid;
        overflow: hidden
    }

    .cta-image-placeholder .shot-label {
        font-family: var(--font-mono);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-muted);
        text-align: center;
        max-width: 30ch;
        font-size: 12px
    }

    .cta-image-placeholder img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .detail-footer {
        border-top: 1px solid var(--color-border);
        color: var(--color-muted);
        padding: 36px 0;
        font-size: 13px
    }

    .detail-footer-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 24px;
        display: flex
    }

    @media (prefers-reduced-motion:no-preference) {

        html.js .wp-section-detail,
        html.js .cs-cover .backlink,
        html.js .cs-cover__tags,
        html.js .cs-cover__title,
        html.js .cs-cover__sub,
        html.js .cs-cover__meta,
        html.js .cs-cover__proof {
            opacity: 0;
            transition: opacity .55s var(--wp-ease), transform .55s var(--wp-ease);
            transform: translateY(12px)
        }

        html.js .cs-cover .backlink {
            transition-delay: 40ms
        }

        html.js .cs-cover__tags {
            transition-delay: .1s
        }

        html.js .cs-cover__title {
            transition-delay: .16s
        }

        html.js .cs-cover__sub {
            transition-delay: .22s
        }

        html.js .cs-cover__meta {
            transition-delay: .28s
        }

        html.js .cs-cover__proof {
            transition-delay: .34s
        }

        html.js .cs-cover .in,
        html.js .cs-cover__in {
            opacity: 1;
            transform: none
        }
    }

    @media (width<=1000px) {
        .featured-card {
            grid-template-columns: 1fr
        }

        .featured-visual {
            aspect-ratio: 16/9;
            min-height: 240px
        }

        .cs-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .wp-principles {
            gap: var(--wp-s5);
            grid-template-columns: 1fr
        }

        .cta-band {
            grid-template-columns: 1fr
        }

        .cta-visual {
            min-height: 200px
        }

        .snapshot,
        .timeline {
            grid-template-columns: repeat(2, 1fr)
        }

        .flow-list {
            grid-template-columns: 1fr
        }

        .flow,
        .flow+.flow {
            border-right: 0;
            border-bottom: 1px solid var(--color-border);
            padding: 24px 0
        }

        .phase+.phase {
            padding-left: 0
        }
    }

    @media (width<=800px) {
        .cs-grid {
            gap: var(--wp-s5);
            grid-template-columns: 1fr
        }

        .wp-section {
            padding-block: clamp(48px, 12vw, 80px)
        }

        .filterbar .filter-count {
            width: 100%;
            margin-left: 0
        }

        .hero-grid,
        .system-grid-detail,
        .scope-grid,
        .cta-card,
        .section-head-grid,
        .constraint-grid,
        .cap-grid-detail,
        .measure-layout,
        .lessons,
        .snapshot,
        .timeline {
            grid-template-columns: 1fr
        }

        .constraint,
        .constraint+.constraint,
        .cap-detail,
        .cap-detail+.cap-detail,
        .phase,
        .phase+.phase {
            border-right: 0;
            border-bottom: 1px solid var(--color-border);
            min-height: 0;
            padding: 24px 0
        }

        .constraint:last-child,
        .cap-detail:last-child,
        .phase:last-child {
            border-bottom: 0
        }
    }

    @media (prefers-reduced-motion:reduce) {

        .wp-section-detail *,
        .case-hero-new *,
        .cs-card,
        .featured-card,
        .measure-card,
        .shot-frame {
            scroll-behavior: auto !important;
            transition: none !important
        }

        .cs-card:hover {
            transform: none
        }

        .featured-visual .motif .emph {
            stroke-dashoffset: 0;
            animation: none
        }

        .featured-visual .motif .pt {
            opacity: .7;
            animation: none
        }

        .featured-visual .motif .sig {
            opacity: 1;
            animation: none;
            transform: none
        }

        html.js .wp-section-detail,
        html.js .cs-cover .backlink,
        html.js .cs-cover__tags,
        html.js .cs-cover__title,
        html.js .cs-cover__sub,
        html.js .cs-cover__meta,
        html.js .cs-cover__proof {
            opacity: 1;
            transition: none;
            transform: none
        }
    }
}

@layer utilities {
    .collapse {
        visibility: collapse
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        inset: calc(var(--spacing) * 0)
    }

    .inset-y-0 {
        inset-block: calc(var(--spacing) * 0)
    }

    .top-0 {
        top: calc(var(--spacing) * 0)
    }

    .top-5 {
        top: calc(var(--spacing) * 5)
    }

    .right-0 {
        right: calc(var(--spacing) * 0)
    }

    .right-5 {
        right: calc(var(--spacing) * 5)
    }

    .isolate {
        isolation: isolate
    }

    .z-\[150\] {
        z-index: 150
    }

    .z-\[200\] {
        z-index: 200
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .container {
        width: 100%
    }

    @media (width>=768px) {
        .container {
            max-width: 768px
        }
    }

    @media (width>=1100px) {
        .container {
            max-width: 1100px
        }
    }

    @media (width>=40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (width>=64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (width>=96rem) {
        .container {
            max-width: 96rem
        }
    }

    .mx-auto {
        margin-inline: auto
    }

    .-mt-\[6\.6rem\] {
        margin-top: -6.6rem
    }

    .-mt-px {
        margin-top: -1px
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-6 {
        margin-top: calc(var(--spacing) * 6)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2)
    }

    .-mb-px {
        margin-bottom: -1px
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6)
    }

    .-ml-8 {
        margin-left: calc(var(--spacing) * -8)
    }

    .-ml-px {
        margin-left: -1px
    }

    .ml-1 {
        margin-left: calc(var(--spacing) * 1)
    }

    .ml-2 {
        margin-left: calc(var(--spacing) * 2)
    }

    .ml-4 {
        margin-left: calc(var(--spacing) * 4)
    }

    .ml-12 {
        margin-left: calc(var(--spacing) * 12)
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .aspect-\[335\/364\] {
        aspect-ratio: 335/364
    }

    .h-1 {
        height: calc(var(--spacing) * 1)
    }

    .h-1\.5 {
        height: calc(var(--spacing) * 1.5)
    }

    .h-2 {
        height: calc(var(--spacing) * 2)
    }

    .h-2\.5 {
        height: calc(var(--spacing) * 2.5)
    }

    .h-3 {
        height: calc(var(--spacing) * 3)
    }

    .h-3\.5 {
        height: calc(var(--spacing) * 3.5)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-8 {
        height: calc(var(--spacing) * 8)
    }

    .h-14 {
        height: calc(var(--spacing) * 14)
    }

    .h-14\.5 {
        height: calc(var(--spacing) * 14.5)
    }

    .h-16 {
        height: calc(var(--spacing) * 16)
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-1 {
        width: calc(var(--spacing) * 1)
    }

    .w-1\.5 {
        width: calc(var(--spacing) * 1.5)
    }

    .w-2 {
        width: calc(var(--spacing) * 2)
    }

    .w-2\.5 {
        width: calc(var(--spacing) * 2.5)
    }

    .w-3 {
        width: calc(var(--spacing) * 3)
    }

    .w-3\.5 {
        width: calc(var(--spacing) * 3.5)
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-8 {
        width: calc(var(--spacing) * 8)
    }

    .w-\[438px\] {
        width: 438px
    }

    .w-\[min\(320px\,85vw\)\] {
        width: min(320px, 85vw)
    }

    .w-auto {
        width: auto
    }

    .w-full {
        width: 100%
    }

    .max-w-6xl {
        max-width: var(--container-6xl)
    }

    .max-w-\[335px\] {
        max-width: 335px
    }

    .max-w-none {
        max-width: none
    }

    .max-w-xl {
        max-width: var(--container-xl)
    }

    .flex-1 {
        flex: 1
    }

    .flex-shrink {
        flex-shrink: 1
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .grow {
        flex-grow: 1
    }

    .border-collapse {
        border-collapse: collapse
    }

    .translate-x-0 {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-full {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-0 {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .transform\! {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important
    }

    .cursor-default {
        cursor: default
    }

    .cursor-not-allowed {
        cursor: not-allowed
    }

    .resize {
        resize: both
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .flex-col-reverse {
        flex-direction: column-reverse
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-center {
        align-items: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-items-center {
        justify-items: center
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    :where(.space-x-1>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)))
    }

    .overflow-hidden {
        overflow: hidden
    }

    .rounded {
        border-radius: var(--radius)
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-sm {
        border-radius: var(--radius-sm)
    }

    .rounded-t-lg {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg)
    }

    .rounded-l-md {
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md)
    }

    .rounded-r-md {
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md)
    }

    .rounded-br-lg {
        border-bottom-right-radius: var(--radius-lg)
    }

    .rounded-bl-lg {
        border-bottom-left-radius: var(--radius-lg)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-l {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .border-\[\#19140035\] {
        border-color: #19140035
    }

    .border-\[\#e3e3e0\] {
        border-color: #e3e3e0
    }

    .border-black {
        border-color: var(--color-black)
    }

    .border-border {
        border-color: var(--color-border)
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .border-gray-300 {
        border-color: var(--color-gray-300)
    }

    .border-gray-400 {
        border-color: var(--color-gray-400)
    }

    .border-transparent {
        border-color: #0000
    }

    .bg-\[\#1b1b18\] {
        background-color: #1b1b18
    }

    .bg-\[\#FDFDFC\] {
        background-color: #fdfdfc
    }

    .bg-\[\#dbdbd7\] {
        background-color: #dbdbd7
    }

    .bg-\[\#fff2f2\] {
        background-color: #fff2f2
    }

    .bg-black\/50 {
        background-color: #00000080
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/50 {
            background-color: color-mix(in oklab, var(--color-black) 50%, transparent)
        }
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }

    .bg-gray-200 {
        background-color: var(--color-gray-200)
    }

    .bg-surface {
        background-color: var(--color-surface)
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }

    .px-4 {
        padding-inline: calc(var(--spacing) * 4)
    }

    .px-5 {
        padding-inline: calc(var(--spacing) * 5)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .px-7 {
        padding-inline: calc(var(--spacing) * 7)
    }

    .py-1 {
        padding-block: calc(var(--spacing) * 1)
    }

    .py-1\.5 {
        padding-block: calc(var(--spacing) * 1.5)
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }

    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }

    .ps-3 {
        padding-inline-start: calc(var(--spacing) * 3)
    }

    .pt-8 {
        padding-top: calc(var(--spacing) * 8)
    }

    .pt-24 {
        padding-top: calc(var(--spacing) * 24)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing) * 6)
    }

    .pb-7 {
        padding-bottom: calc(var(--spacing) * 7)
    }

    .pb-12 {
        padding-bottom: calc(var(--spacing) * 12)
    }

    .text-center {
        text-align: center
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[15px\] {
        font-size: 15px
    }

    .text-\[22px\] {
        font-size: 22px
    }

    .leading-5 {
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5)
    }

    .leading-7 {
        --tw-leading: calc(var(--spacing) * 7);
        line-height: calc(var(--spacing) * 7)
    }

    .leading-\[20px\] {
        --tw-leading: 20px;
        line-height: 20px
    }

    .leading-normal {
        --tw-leading: var(--leading-normal);
        line-height: var(--leading-normal)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-wider {
        --tw-tracking: var(--tracking-wider);
        letter-spacing: var(--tracking-wider)
    }

    .text-wrap {
        text-wrap: wrap
    }

    .text-\[\#1B1B18\],
    .text-\[\#1b1b18\] {
        color: #1b1b18
    }

    .text-\[\#706f6c\] {
        color: #706f6c
    }

    .text-\[\#F3BEC7\] {
        color: #f3bec7
    }

    .text-\[\#F8B803\] {
        color: #f8b803
    }

    .text-\[\#F53003\],
    .text-\[\#f53003\] {
        color: #f53003
    }

    .text-gray-200 {
        color: var(--color-gray-200)
    }

    .text-gray-300 {
        color: var(--color-gray-300)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-gray-900 {
        color: var(--color-gray-900)
    }

    .text-muted {
        color: var(--color-muted)
    }

    .text-pink-400 {
        color: var(--color-pink-400)
    }

    .text-white {
        color: var(--color-white)
    }

    .capitalize {
        text-transform: capitalize
    }

    .uppercase {
        text-transform: uppercase
    }

    .tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .underline {
        text-decoration-line: underline
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .opacity-100 {
        opacity: 1
    }

    .mix-blend-color {
        mix-blend-mode: color
    }

    .mix-blend-darken {
        mix-blend-mode: darken
    }

    .mix-blend-hard-light {
        mix-blend-mode: hard-light
    }

    .mix-blend-multiply {
        mix-blend-mode: multiply
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_0px_1px_0px_rgba\(0\,0\,0\,0\.03\)\,0px_1px_2px_0px_rgba\(0\,0\,0\,0\.06\)\] {
        --tw-shadow: 0px 0px 1px 0px var(--tw-shadow-color, #00000008), 0px 1px 2px 0px var(--tw-shadow-color, #0000000f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[inset_0px_0px_0px_1px_rgba\(26\,26\,0\,0\.16\)\] {
        --tw-shadow: inset 0px 0px 0px 1px var(--tw-shadow-color, #1a1a0029);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --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)
    }

    .ring-gray-300 {
        --tw-ring-color: var(--color-gray-300)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .filter\! {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important
    }

    .backdrop-filter {
        -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, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .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))
    }

    .delay-200 {
        transition-delay: .2s
    }

    .delay-300 {
        transition-delay: .3s
    }

    .delay-400 {
        transition-delay: .4s
    }

    .duration-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .duration-750 {
        --tw-duration: .75s;
        transition-duration: .75s
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .\[--stroke-color\:\#1B1B18\] {
        --stroke-color: #1b1b18
    }

    .\[wire\:model\=\"\`\+i\+\`\"\] {
        wire: model="`+i+`"
    }

    .\[wire\:model\] {
        wire: model
    }

    .not-has-\[nav\]\:hidden:not(:has(:is(nav))) {
        display: none
    }

    .before\:absolute:before {
        content: var(--tw-content);
        position: absolute
    }

    .before\:top-0:before {
        content: var(--tw-content);
        top: calc(var(--spacing) * 0)
    }

    .before\:top-1\/2:before {
        content: var(--tw-content);
        top: 50%
    }

    .before\:bottom-0:before {
        content: var(--tw-content);
        bottom: calc(var(--spacing) * 0)
    }

    .before\:bottom-1\/2:before {
        content: var(--tw-content);
        bottom: 50%
    }

    .before\:left-\[0\.4rem\]:before {
        content: var(--tw-content);
        left: .4rem
    }

    .before\:border-l:before {
        content: var(--tw-content);
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .before\:border-\[\#e3e3e0\]:before {
        content: var(--tw-content);
        border-color: #e3e3e0
    }

    @media (hover:hover) {
        .hover\:border-\[\#1915014a\]:hover {
            border-color: #1915014a
        }

        .hover\:border-\[\#19140035\]:hover {
            border-color: #19140035
        }

        .hover\:border-black:hover {
            border-color: var(--color-black)
        }

        .hover\:bg-black:hover {
            background-color: var(--color-black)
        }

        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }

        .hover\:text-gray-400:hover {
            color: var(--color-gray-400)
        }

        .hover\:text-gray-700:hover {
            color: var(--color-gray-700)
        }
    }

    .focus\:border-blue-300:focus {
        border-color: var(--color-blue-300)
    }

    .focus\:ring:focus {
        --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)
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .active\:bg-gray-100:active {
        background-color: var(--color-gray-100)
    }

    .active\:text-gray-500:active {
        color: var(--color-gray-500)
    }

    .active\:text-gray-700:active {
        color: var(--color-gray-700)
    }

    .active\:text-gray-800:active {
        color: var(--color-gray-800)
    }

    @media (width>=40rem) {
        .sm\:flex {
            display: flex
        }

        .sm\:hidden {
            display: none
        }

        .sm\:flex-1 {
            flex: 1
        }

        .sm\:items-center {
            align-items: center
        }

        .sm\:justify-between {
            justify-content: space-between
        }

        .sm\:gap-2 {
            gap: calc(var(--spacing) * 2)
        }
    }

    @media (width>=64rem) {
        .lg\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }

        .lg\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0)
        }

        .lg\:mb-6 {
            margin-bottom: calc(var(--spacing) * 6)
        }

        .lg\:-ml-px {
            margin-left: -1px
        }

        .lg\:ml-0 {
            margin-left: calc(var(--spacing) * 0)
        }

        .lg\:block {
            display: block
        }

        .lg\:aspect-auto {
            aspect-ratio: auto
        }

        .lg\:w-\[438px\] {
            width: 438px
        }

        .lg\:max-w-4xl {
            max-width: var(--container-4xl)
        }

        .lg\:grow {
            flex-grow: 1
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:justify-center {
            justify-content: center
        }

        .lg\:rounded-t-none {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .lg\:rounded-tl-lg {
            border-top-left-radius: var(--radius-lg)
        }

        .lg\:rounded-r-lg {
            border-top-right-radius: var(--radius-lg);
            border-bottom-right-radius: var(--radius-lg)
        }

        .lg\:rounded-br-none {
            border-bottom-right-radius: 0
        }

        .lg\:p-8 {
            padding: calc(var(--spacing) * 8)
        }

        .lg\:p-20 {
            padding: calc(var(--spacing) * 20)
        }

        .lg\:pb-10 {
            padding-bottom: calc(var(--spacing) * 10)
        }
    }

    .rtl\:flex-row-reverse:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir=rtl], [dir=rtl] *) {
        flex-direction: row-reverse
    }

    @media (prefers-color-scheme:dark) {
        .dark\:border-\[\#3E3E3A\] {
            border-color: #3e3e3a
        }

        .dark\:border-\[\#eeeeec\] {
            border-color: #eeeeec
        }

        .dark\:border-gray-600 {
            border-color: var(--color-gray-600)
        }

        .dark\:bg-\[\#0a0a0a\] {
            background-color: #0a0a0a
        }

        .dark\:bg-\[\#1D0002\] {
            background-color: #1d0002
        }

        .dark\:bg-\[\#3E3E3A\] {
            background-color: #3e3e3a
        }

        .dark\:bg-\[\#161615\] {
            background-color: #161615
        }

        .dark\:bg-\[\#eeeeec\] {
            background-color: #eeeeec
        }

        .dark\:bg-gray-700 {
            background-color: var(--color-gray-700)
        }

        .dark\:bg-gray-800 {
            background-color: var(--color-gray-800)
        }

        .dark\:text-\[\#1C1C1A\] {
            color: #1c1c1a
        }

        .dark\:text-\[\#4B0600\] {
            color: #4b0600
        }

        .dark\:text-\[\#391800\] {
            color: #391800
        }

        .dark\:text-\[\#733000\] {
            color: #733000
        }

        .dark\:text-\[\#A1A09A\] {
            color: #a1a09a
        }

        .dark\:text-\[\#EDEDEC\] {
            color: #ededec
        }

        .dark\:text-\[\#F61500\] {
            color: #f61500
        }

        .dark\:text-\[\#FF4433\] {
            color: #f43
        }

        .dark\:text-black {
            color: var(--color-black)
        }

        .dark\:text-gray-200 {
            color: var(--color-gray-200)
        }

        .dark\:text-gray-300 {
            color: var(--color-gray-300)
        }

        .dark\:text-gray-400 {
            color: var(--color-gray-400)
        }

        .dark\:text-gray-600 {
            color: var(--color-gray-600)
        }

        .dark\:mix-blend-hard-light {
            mix-blend-mode: hard-light
        }

        .dark\:mix-blend-normal {
            mix-blend-mode: normal
        }

        .dark\:shadow-\[inset_0px_0px_0px_1px_\#fffaed2d\] {
            --tw-shadow: inset 0px 0px 0px 1px var(--tw-shadow-color, #fffaed2d);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .dark\:\[--stroke-color\:\#FF750F\] {
            --stroke-color: #ff750f
        }

        .dark\:before\:border-\[\#3E3E3A\]:before {
            content: var(--tw-content);
            border-color: #3e3e3a
        }

        @media (hover:hover) {
            .dark\:hover\:border-\[\#3E3E3A\]:hover {
                border-color: #3e3e3a
            }

            .dark\:hover\:border-\[\#62605b\]:hover {
                border-color: #62605b
            }

            .dark\:hover\:border-white:hover {
                border-color: var(--color-white)
            }

            .dark\:hover\:bg-gray-900:hover {
                background-color: var(--color-gray-900)
            }

            .dark\:hover\:bg-white:hover {
                background-color: var(--color-white)
            }

            .dark\:hover\:text-gray-200:hover {
                color: var(--color-gray-200)
            }

            .dark\:hover\:text-gray-300:hover {
                color: var(--color-gray-300)
            }
        }

        .dark\:focus\:border-blue-700:focus {
            border-color: var(--color-blue-700)
        }

        .dark\:focus\:border-blue-800:focus {
            border-color: var(--color-blue-800)
        }

        .dark\:active\:bg-gray-700:active {
            background-color: var(--color-gray-700)
        }

        .dark\:active\:text-gray-300:active {
            color: var(--color-gray-300)
        }
    }

    @starting-style {
        .starting\:opacity-0 {
            opacity: 0
        }
    }

    @media (prefers-reduced-motion:no-preference) {
        @starting-style {
            .motion-safe\:starting\:-translate-x-\[26px\] {
                --tw-translate-x: calc(26px * -1);
                translate: var(--tw-translate-x) var(--tw-translate-y)
            }
        }

        @starting-style {
            .motion-safe\:starting\:-translate-x-\[51px\] {
                --tw-translate-x: calc(51px * -1);
                translate: var(--tw-translate-x) var(--tw-translate-y)
            }
        }

        @starting-style {
            .motion-safe\:starting\:-translate-x-\[78px\] {
                --tw-translate-x: calc(78px * -1);
                translate: var(--tw-translate-x) var(--tw-translate-y)
            }
        }

        @starting-style {
            .motion-safe\:starting\:-translate-x-\[102px\] {
                --tw-translate-x: calc(102px * -1);
                translate: var(--tw-translate-x) var(--tw-translate-y)
            }
        }

        @starting-style {
            .motion-safe\:starting\:translate-y-6 {
                --tw-translate-y: calc(var(--spacing) * 6);
                translate: var(--tw-translate-x) var(--tw-translate-y)
            }
        }
    }
}

:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --container: 1140px;
    --dur: .9s;
    --dur-fast: .25s;
    --fs-body: 17px;
    --lh-body: 1.65;
    --fs-h1: clamp(44px, 7.4vw, 84px);
    --fs-h2: clamp(32px, 4.6vw, 52px);
    --fs-h3: clamp(24px, 3vw, 34px);
    --lh-heading: 1.05;
    --ls-heading: -.03em;
    --gradient-brand: linear-gradient(135deg, var(--color-violet) 0%, var(--color-lavender) 38%, var(--color-pink) 65%, var(--color-red) 100%);
    --glow-violet: #6000ff73;
    --halo-violet-fill: #6000ff52;
    --halo-red-fill: #fe005433;
    --hover-surface: #ffffff0f;
    --shadow: 0 1px 2px #0000004d, 0 8px 24px #00000040;
    --shadow-lg: 0 20px 50px #00000080;
    --cta-card-bg: #fff;
    --cta-card-fg: #1b1c22;
    --cta-card-sub: #5d6170;
    --cta-card-trust: #8a8d9a;
    --cta-visual-bg: #15161b;
    --diagram-bg: #15161b;
    --diagram-panel: #1e1f28;
    --diagram-line: #c769f759;
    --diagram-node: #252635;
    --diagram-label: #9ca0b0;
    --diagram-value: #f3f3f3
}

[data-theme=light] {
    --color-bg: var(--color-bg-light);
    --color-surface: var(--color-surface-light);
    --color-surface-2: var(--color-surface-2-light);
    --color-deep: #e6e4ee;
    --color-white: var(--color-white-light);
    --color-muted: var(--color-muted-light);
    --color-border: #1b1c221a;
    --color-border-strong: #1b1c222e;
    --hover-surface: #1b1c220a;
    --glow-violet: #6000ff47;
    --halo-violet-fill: #6000ff29;
    --halo-red-fill: #fe00541a;
    --cta-card-bg: var(--color-violet);
    --cta-card-fg: #fff;
    --cta-card-sub: #ffffffd1;
    --cta-card-trust: #ffffff9e;
    --cta-visual-bg: var(--color-surface-2)
}

#engagement .section-head {
    flex-direction: column !important;
    gap: 18px !important;
    display: flex !important
}

@keyframes drift {
    0% {
        transform: translate(0)scale(1)
    }

    to {
        transform: translate(60px, 40px)scale(1.12)
    }
}

@keyframes blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

@keyframes scroll-x {
    to {
        transform: translate(-50%)
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -32px
    }
}

@media (width>=768px) {
    .footer-grid {
        grid-template-columns: 1fr 1.4fr
    }

    .footer-cols {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (width>=1100px) {
    .nav-links {
        display: flex
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        transition-duration: 80ms !important;
        animation: none !important
    }

    html {
        scroll-behavior: auto
    }

    .reveal,
    .reveal-stagger>* {
        opacity: 1;
        filter: none;
        transform: none
    }
}

@media (width>=768px) {
    .hero-stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .bento,
    .posts,
    .cases,
    .quotes,
    .process {
        grid-template-columns: repeat(2, 1fr)
    }

    .term-hint {
        display: block
    }
}

@media (width>=1100px) {

    .bento,
    .posts,
    .tiers {
        grid-template-columns: repeat(3, 1fr)
    }

    .process {
        grid-template-columns: repeat(4, 1fr)
    }

    .step:before {
        display: block
    }

    .process .step:last-child:before {
        display: none
    }

    .quotes {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width>=768px) {
    .tiers-compact {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width>=1100px) {
    .svc-block {
        grid-template-columns: 1fr 1fr
    }

    .svc-block .svc-visual {
        order: 0
    }
}

@media (width>=768px) {

    .work-grid,
    .wip-grid,
    .system-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width>=1100px) {
    .system-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width>=768px) {
    .founder {
        grid-template-columns: 1fr 1fr
    }

    .diff-grid,
    .principles {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width>=1100px) {
    .diff-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .featured-post {
        grid-template-columns: 1fr 1.1fr
    }

    .featured-cover {
        min-height: 100%
    }

    .post-layout {
        grid-template-columns: 1fr 320px
    }

    .post-sidebar {
        align-self: start;
        position: sticky;
        top: 96px
    }

    .toc {
        display: block
    }
}

@media (width>=768px) {
    .contact-grid {
        grid-template-columns: 1.1fr .9fr
    }

    .field-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }
}

@media (width<=600px) {

    .field input,
    .field select,
    .field textarea {
        font-size: 16px
    }

    .field input,
    .field select {
        min-height: 48px
    }

    .field textarea {
        min-height: 120px
    }
}

@media (width>=768px) {
    .region-snapshot {
        grid-template-columns: repeat(3, 1fr)
    }
}

.container {
    max-width: var(--container);
    width: auto;
    margin: 0 auto;
    padding: 0 24px
}

.nav-inner {
    width: 100%
}

.nav-actions .nav-book-cta {
    display: none
}

@media (width>=1100px) {
    .nav-actions .nav-book-cta {
        display: inline-flex
    }
}

@media (width<=1099px) {
    .nav-actions .icon-btn {
        width: 44px;
        height: 44px
    }
}

.dif {
    padding: var(--space-8) 0 calc(var(--space-12) + 56px);
    position: relative;
    overflow: hidden
}

.dif .halo-violet {
    width: 560px;
    height: 560px;
    animation: 16s ease-in-out infinite alternate drift;
    top: -220px;
    left: -200px
}

.dif .halo-red {
    width: 480px;
    height: 480px;
    animation: 20s ease-in-out infinite alternate-reverse drift;
    bottom: -180px;
    right: -180px
}

.dif .container {
    z-index: 1;
    gap: var(--space-12);
    flex-direction: column;
    display: flex;
    position: relative
}

@media (width>=768px) {
    .dif .container {
        gap: var(--space-16)
    }
}

.dif-intro {
    flex-direction: column;
    gap: 18px;
    max-width: 760px;
    display: flex
}

.dif-intro h2 {
    font: 700 clamp(34px, 5vw, 56px)/1.08 var(--font-display);
    letter-spacing: -.03em;
    text-wrap: balance
}

.dif-intro p {
    color: var(--color-muted);
    text-wrap: pretty;
    font-size: 18px
}

.dif-meta {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    display: inline-flex
}

.dif-hero {
    overflow: hidden
}

.dif-hero .halo-violet {
    width: 540px;
    height: 540px;
    top: -200px;
    left: -180px
}

.dif-hero .halo-red {
    width: 480px;
    height: 480px;
    top: 20px;
    right: -200px
}

.dif-hero .dif-meta {
    margin-top: 22px
}

.dif-block {
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    flex-direction: column;
    scroll-margin-top: 140px;
    display: flex
}

.dif-block:last-child {
    margin-bottom: 0
}

.dif-block-head {
    flex-direction: column;
    gap: 10px;
    max-width: 660px;
    display: flex
}

.dif-block-head h3 {
    font: 700 clamp(26px, 3.4vw, 38px)/1.12 var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance
}

.dif-block-head p {
    color: var(--color-muted);
    text-wrap: pretty;
    font-size: 16px
}

.dif-lens {
    width: max-content;
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-lavender);
    align-items: center;
    gap: 10px;
    display: inline-flex
}

.dif-lens:before {
    content: "";
    background: var(--gradient-brand);
    width: 24px;
    height: 1px
}

.dif-lens--danger {
    color: var(--color-red)
}

.dif-lens--danger:before {
    background: var(--color-red)
}

.dif-lens--success {
    color: var(--color-success)
}

.dif-lens--success:before {
    background: var(--color-success)
}

.dif-matrix-layout {
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
    display: grid
}

.dif-progress {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    transition: border-color .2s, box-shadow .2s;
    display: flex
}

.dif-progress--fixed {
    z-index: 100;
    border: none;
    border-top: 1px solid var(--color-border-strong);
    background: #191a1feb;
    border-radius: 0;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-progress--fixed {
        background: color-mix(in srgb, var(--color-bg) 92%, transparent)
    }
}

.dif-progress--fixed {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -8px 40px #0006
}

.dif-progress-inner {
    align-items: center;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex
}

.dif-progress-stats {
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    display: flex
}

.dif-progress-stats .mono {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-progress-sep {
    color: var(--color-border-strong)
}

.dif-progress>.mono {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .06em;
    color: var(--color-muted);
    white-space: nowrap
}

.dif-progress-bar {
    background: var(--color-surface-2);
    border-radius: 3px;
    flex: 1;
    height: 6px;
    overflow: hidden
}

.dif-progress-bar i {
    background: var(--gradient-brand);
    border-radius: 3px;
    width: 0;
    height: 100%;
    transition: width .3s;
    display: block
}

.dif-q {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 14px;
    display: flex
}

.dif-q:last-child {
    border-bottom: none
}

.dif-criterion {
    font: 600 18px/1.4 var(--font-display);
    letter-spacing: -.01em;
    align-items: baseline;
    gap: 12px;
    display: flex
}

.dif-q-num {
    font: 700 13px/1 var(--font-mono);
    color: var(--color-violet);
    flex-shrink: 0
}

.dif-opts {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    display: grid
}

.dif-opt-wrap {
    flex-direction: column;
    display: flex;
    position: relative
}

.dif-radio {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0
}

.dif-opt {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    border-radius: 14px;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 18px 20px;
    transition: border-color .25s, background-color .25s, transform .25s, box-shadow .25s;
    display: flex;
    position: relative
}

.dif-opt:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #00000026
}

.dif-opt-tag {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: color .2s;
    display: flex
}

.dif-opt-body {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.45;
    transition: color .2s
}

.dif-opt-check {
    background: var(--color-violet);
    width: 18px;
    height: 18px;
    color: var(--color-on-accent);
    opacity: 0;
    transition: opacity .2s var(--ease-reveal), transform .2s var(--ease-reveal);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    transform: scale(.4)
}

.dif-opt-check svg {
    width: 11px;
    height: 11px;
    display: block
}

.dif-radio:checked+.dif-opt,
.dif-opt.is-active {
    border-color: var(--color-violet);
    background-color: #261b42
}

@supports (color:color-mix(in lab, red, red)) {

    .dif-radio:checked+.dif-opt,
    .dif-opt.is-active {
        background-color: color-mix(in srgb, var(--color-violet) 12%, var(--color-surface))
    }
}

.dif-radio:checked+.dif-opt,
.dif-opt.is-active {
    box-shadow: 0 0 0 1px #6000ff59, 0 12px 32px #6000ff2e
}

@supports (color:color-mix(in lab, red, red)) {

    .dif-radio:checked+.dif-opt,
    .dif-opt.is-active {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 35%, transparent), 0 12px 32px color-mix(in srgb, var(--color-violet) 18%, transparent)
    }
}

.dif-radio:checked+.dif-opt .dif-opt-tag,
.dif-opt.is-active .dif-opt-tag {
    color: var(--color-lavender)
}

.dif-radio:checked+.dif-opt .dif-opt-body,
.dif-opt.is-active .dif-opt-body {
    color: var(--color-white)
}

.dif-radio:checked+.dif-opt .dif-opt-check,
.dif-opt.is-active .dif-opt-check {
    opacity: 1;
    transform: scale(1)
}

.dif-radio:focus-visible+.dif-opt {
    outline: 2px solid var(--color-violet);
    outline-offset: 2px
}

.dif-verdict {
    position: relative
}

.dif-verdict-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(#6000ff26, #0000 55%), #1e1f28cc;
    flex-direction: column;
    gap: 18px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-verdict-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--color-violet) 15%, transparent), transparent 55%), color-mix(in srgb, var(--color-surface) 80%, transparent)
    }
}

.dif-verdict-card {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 0 0 1px #6000ff40, 0 24px 64px #6000ff33
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-verdict-card {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 25%, transparent), 0 24px 64px color-mix(in srgb, var(--color-violet) 20%, transparent)
    }
}

.dif-verdict-card {
    transition: transform .4s var(--ease-reveal), box-shadow .4s var(--ease-reveal);
    transform: translateY(0)
}

.dif-verdict-head {
    justify-content: space-between;
    align-items: baseline;
    display: flex
}

.dif-verdict-progress {
    font: 700 22px/1 var(--font-mono);
    color: var(--color-white)
}

.dif-bars {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.dif-bar {
    grid-template-columns: 60px 1fr 38px;
    align-items: center;
    gap: 10px;
    display: grid
}

.dif-bar-label {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-bar-track {
    background: var(--color-surface-2);
    border-radius: 5px;
    height: 10px;
    overflow: hidden
}

.dif-bar-track i {
    width: 0;
    height: 100%;
    transition: width .6s var(--ease-reveal);
    border-radius: 5px;
    display: block
}

.dif-bar-pct {
    font: 600 12px/1 var(--font-mono);
    color: var(--color-muted);
    text-align: right
}

.dif-bar--build .dif-bar-track i {
    background: var(--color-violet)
}

.dif-bar--buy .dif-bar-track i {
    background: var(--color-success)
}

.dif-bar--hybrid .dif-bar-track i {
    background: var(--gradient-brand)
}

.dif-verdict-result-inner {
    border-top: 1px solid var(--color-border);
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    display: flex
}

.dif-verdict-path {
    font: 700 clamp(30px, 4vw, 42px)/1 var(--font-display);
    letter-spacing: -.02em;
    background: var(--gradient-brand);
    color: var(--color-white);
    -webkit-background-clip: text;
    background-clip: text
}

@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
    .dif-verdict-path {
        color: var(--color-lavender);
        background: 0 0
    }
}

.dif-verdict-meta {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5
}

.dif-verdict-empty {
    font: 400 13px/1.5 var(--font-mono);
    color: var(--color-muted)
}

.dif-tco {
    gap: var(--space-4);
    grid-template-columns: 1fr;
    display: grid
}

.dif-tco-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
    flex-direction: column;
    gap: 6px;
    display: flex
}

.dif-tco-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 16px 48px #6000ff1f
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-card:hover {
        box-shadow: 0 16px 48px color-mix(in srgb, var(--color-violet) 12%, transparent)
    }
}

.dif-tco-top {
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    display: flex
}

.dif-tco-path {
    font: 600 15px/1.3 var(--font-display)
}

.dif-tco-yr {
    font: 500 12px/1 var(--font-mono);
    color: var(--color-muted);
    white-space: nowrap
}

.dif-tco-total {
    font: 700 30px/1 var(--font-mono);
    letter-spacing: -.02em;
    color: var(--color-white);
    margin-top: 6px
}

.dif-tco-total-label {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-tco-bar {
    background: var(--color-surface-2);
    border-radius: 4px;
    height: 8px;
    margin: 12px 0 8px;
    overflow: hidden
}

.dif-tco-bar i {
    width: 0;
    height: 100%;
    transition: width 1.1s var(--ease-reveal) .15s;
    border-radius: 4px;
    display: block
}

.dif-block.in .dif-tco-bar i {
    width: var(--w, 0%)
}

.dif-tco-card:first-child .dif-tco-bar i {
    background: linear-gradient(90deg, var(--color-pink), var(--color-red))
}

.dif-tco-card:nth-child(2) .dif-tco-bar i {
    background: linear-gradient(90deg, var(--color-violet), var(--color-lavender))
}

.dif-tco-card:nth-child(3) .dif-tco-bar i {
    background: var(--gradient-brand)
}

.dif-tco-note {
    color: var(--color-muted);
    text-wrap: pretty;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5
}

.dif-timeline {
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.dif-step {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform .3s var(--ease-reveal), border-color .3s, box-shadow .3s;
    flex-direction: column;
    gap: 10px;
    display: flex;
    position: relative
}

.dif-step:hover {
    border-color: #c769f780;
    transform: translateY(-3px)
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-step:hover {
        border-color: color-mix(in srgb, var(--color-lavender) 50%, transparent)
    }
}

.dif-step:hover {
    box-shadow: 0 0 0 1px #c769f740, 0 16px 48px #c769f71f
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-step:hover {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-lavender) 25%, transparent), 0 16px 48px color-mix(in srgb, var(--color-lavender) 12%, transparent)
    }
}

.dif-step-badge {
    width: 44px;
    height: 44px;
    font: 700 15px/1 var(--font-mono);
    color: var(--color-on-accent);
    background: var(--gradient-brand);
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0 8px 24px #6000ff4d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-step-badge {
        box-shadow: 0 8px 24px color-mix(in srgb, var(--color-violet) 30%, transparent)
    }
}

.dif-step h4 {
    font: 600 17px/1.3 var(--font-display)
}

.dif-step p {
    color: var(--color-muted);
    text-wrap: pretty;
    font-size: 14px;
    line-height: 1.55
}

.dif-flags-grid {
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    grid-template-columns: 1fr;
    align-items: start;
    display: grid
}

.dif-flags {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface)
}

.dif-meter {
    background: var(--color-surface-2);
    margin-bottom: var(--space-4);
    border-radius: 12px;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    display: flex
}

.dif-meter-top {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.dif-meter-top>.mono {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-meter-val {
    font: 700 14px/1 var(--font-mono)
}

.dif-meter-track {
    background: #f3f3f30f;
    border-radius: 4px;
    height: 8px
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-meter-track {
        background: color-mix(in srgb, var(--color-white) 6%, transparent)
    }
}

.dif-meter-track {
    overflow: hidden
}

.dif-meter-track i {
    width: 0;
    height: 100%;
    transition: width .5s var(--ease-reveal);
    border-radius: 4px;
    display: block
}

.dif-meter-count {
    font: 500 12px/1 var(--font-mono);
    color: var(--color-muted)
}

.dif-meter--danger .dif-meter-val {
    color: var(--color-red)
}

.dif-meter--danger .dif-meter-track i {
    background: linear-gradient(90deg, #fe0054a6, var(--color-red))
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-meter--danger .dif-meter-track i {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-red) 65%, transparent), var(--color-red))
    }
}

.dif-meter--success .dif-meter-val {
    color: var(--color-success)
}

.dif-meter--success .dif-meter-track i {
    background: linear-gradient(90deg, #1fc77ca6, var(--color-success))
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-meter--success .dif-meter-track i {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-success) 65%, transparent), var(--color-success))
    }
}

.dif-checklist {
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.dif-checklist li {
    position: relative
}

.dif-checklist input {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0
}

.dif-checklist label {
    border: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-surface);
    border-radius: 10px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
    display: flex
}

.dif-checklist label:hover {
    border-color: var(--color-border-strong);
    background-color: var(--color-surface-2);
    box-shadow: 0 2px 8px #00000014
}

.dif-cb {
    border: 1.5px solid var(--color-border-strong);
    width: 20px;
    height: 20px;
    color: var(--color-on-accent);
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: 1.5px;
    transition: background .2s, border-color .2s;
    display: flex
}

.dif-cb svg {
    opacity: 0;
    width: 12px;
    height: 12px;
    transition: opacity .15s, transform .15s;
    transform: scale(.5)
}

.dif-checklist input:checked+label {
    border-color: #6000ff73
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-checklist input:checked+label {
        border-color: color-mix(in srgb, var(--color-violet) 45%, transparent)
    }
}

.dif-checklist input:checked+label {
    background-color: #231d39
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-checklist input:checked+label {
        background-color: color-mix(in srgb, var(--color-violet) 8%, var(--color-surface))
    }
}

.dif-checklist input:checked+label .dif-cb {
    background: var(--color-violet);
    border-color: var(--color-violet)
}

.dif-checklist input:checked+label .dif-cb svg {
    opacity: 1;
    transform: scale(1)
}

.dif-flags.is-danger .dif-checklist input:checked+label {
    border-color: #fe005473
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flags.is-danger .dif-checklist input:checked+label {
        border-color: color-mix(in srgb, var(--color-red) 45%, transparent)
    }
}

.dif-flags.is-danger .dif-checklist input:checked+label {
    background-color: #321c2c
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flags.is-danger .dif-checklist input:checked+label {
        background-color: color-mix(in srgb, var(--color-red) 9%, var(--color-surface))
    }
}

.dif-flags.is-danger .dif-checklist input:checked+label .dif-cb {
    background: var(--color-red);
    border-color: var(--color-red)
}

.dif-flags.is-success .dif-checklist input:checked+label {
    border-color: #1fc77c73
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flags.is-success .dif-checklist input:checked+label {
        border-color: color-mix(in srgb, var(--color-success) 45%, transparent)
    }
}

.dif-flags.is-success .dif-checklist input:checked+label {
    background-color: #1e2e30
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flags.is-success .dif-checklist input:checked+label {
        background-color: color-mix(in srgb, var(--color-success) 9%, var(--color-surface))
    }
}

.dif-flags.is-success .dif-checklist input:checked+label .dif-cb {
    background: var(--color-success);
    border-color: var(--color-success)
}

.dif-checklist input:focus-visible+label {
    outline: 2px solid var(--color-lavender);
    outline-offset: 2px
}

.dif-spy .spy-row {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    overflow-x: auto
}

.dif-spy .spy-row::-webkit-scrollbar {
    display: none
}

.dif-gate-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(#1e1f28f2, #252635e6);
    flex-direction: column;
    gap: 24px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 95%, transparent), color-mix(in srgb, var(--color-surface-2) 90%, transparent))
    }
}

.dif-gate-card {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transition: transform .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 80px #00000080
}

.dif-gate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 100px #0009
}

.dif-gate-card:before {
    content: "";
    background: var(--gradient-brand);
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.dif-fields {
    grid-template-columns: 1fr;
    gap: 20px;
    display: grid
}

@media (width>=768px) {
    .dif-fields {
        grid-template-columns: 1fr 1fr
    }
}

.dif-submit {
    width: 100%;
    height: 56px;
    margin-top: 20px;
    font-size: 16px
}

@media (width>=768px) {
    .dif-tco {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width>=1100px) {
    .dif-matrix-layout {
        grid-template-columns: 1fr 380px
    }

    .dif-verdict {
        position: sticky;
        top: 132px
    }

    .dif-timeline {
        gap: var(--space-3);
        grid-template-columns: repeat(4, 1fr)
    }

    .dif-flags-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .dif-step:not(:last-child):after {
        content: "→";
        color: var(--color-lavender);
        font: 700 18px/1 var(--font-display);
        opacity: .5;
        z-index: 2;
        position: absolute;
        top: 50%;
        right: -15px;
        transform: translateY(-50%)
    }
}

@media (width<=767px) {
    .dif-opts {
        grid-template-columns: 1fr
    }
}

.dif-submit[wire\:loading] {
    opacity: .6;
    pointer-events: none
}

.dif-submit .spinner {
    border: 2px solid #ffffff4d;
    border-top-color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    animation: .6s linear infinite spin;
    display: none
}

.dif-submit[wire\:loading] .spinner {
    display: inline-block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.dif-report {
    flex-direction: column;
    gap: 28px;
    max-width: 780px;
    margin: 0 auto;
    display: flex
}

.dif-report.in {
    opacity: 1;
    transform: none
}

.dif-report-winner {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.dif-report-eyebrow {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-report-path {
    font: 700 clamp(36px, 5vw, 56px)/1.05 var(--font-display);
    letter-spacing: -.03em
}

.dif-report-path--build {
    color: var(--color-violet)
}

.dif-report-path--buy {
    color: var(--color-success)
}

.dif-report-path--hybrid {
    background: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
    .dif-report-path--hybrid {
        color: var(--color-lavender);
        background: 0 0
    }
}

.dif-report-bars {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    display: flex
}

.dif-report-copy {
    color: var(--color-muted);
    text-wrap: pretty;
    font-size: 16px;
    line-height: 1.65
}

.dif-report-note {
    color: var(--color-muted);
    font-size: 14px;
    font-style: italic;
    line-height: 1.55
}

.dif-report-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    display: flex
}

.dif-report-sent {
    color: var(--color-muted);
    opacity: .7;
    font-size: 12px
}

.dif-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-8);
    flex-direction: column;
    gap: 18px;
    display: flex
}

.dif-hero h2 {
    font: 800 clamp(34px, 5.4vw, 58px)/1.05 var(--font-display);
    letter-spacing: var(--ls-heading);
    text-wrap: balance
}

.dif-hero p {
    color: var(--color-muted);
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.55
}

.dif-verdict-bar {
    z-index: 20;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    background: #1e1f28e0;
    padding: 18px 24px;
    display: flex;
    position: sticky;
    top: 12px
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-verdict-bar {
        background: color-mix(in srgb, var(--color-surface) 88%, transparent)
    }
}

.dif-verdict-bar {
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow)
}

.dif-verdict-eyebrow {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-verdict-label {
    font: 700 22px/1.2 var(--font-display);
    margin-top: 4px;
    display: block
}

.dif-verdict-right {
    text-align: right
}

.dif-verdict-score {
    font: 800 32px/1 var(--font-mono);
    color: var(--color-lavender)
}

.dif-verdict-pct {
    color: var(--color-muted);
    margin-top: 2px;
    font-size: 12px
}

.dif-verdict-bars {
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    display: flex
}

.dif-verdict-bar-item {
    grid-template-columns: 52px 1fr 44px;
    align-items: center;
    gap: 8px;
    display: grid
}

.dif-verdict-bar-label {
    font: 600 11px/1 var(--font-mono);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .06em
}

.dif-verdict-bar-track {
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    height: 6px;
    overflow: hidden
}

.dif-verdict-bar-fill {
    border-radius: var(--radius-pill);
    height: 100%;
    transition: width .5s var(--ease-reveal)
}

.dif-verdict-bar-fill-build {
    background: var(--color-success)
}

.dif-verdict-bar-fill-buy {
    background: var(--color-info)
}

.dif-verdict-bar-fill-hybrid {
    background: var(--color-warning)
}

.dif-verdict-bar-num {
    font: 700 12px/1 var(--font-mono);
    color: var(--color-white);
    text-align: right
}

.dif-verdict-meta {
    color: var(--color-muted);
    text-align: right;
    text-transform: capitalize;
    margin-top: 6px;
    font-size: 11px
}

.dif-lens {
    gap: var(--space-5);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    flex-direction: column;
    display: flex
}

.dif-lens-head {
    align-items: flex-start;
    gap: 16px;
    display: flex
}

.dif-lens-num {
    border-radius: var(--radius);
    background: var(--gradient-brand);
    width: 44px;
    height: 44px;
    color: var(--color-on-accent);
    font: 800 16px/1 var(--font-mono);
    letter-spacing: .04em;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0 6px 20px #6000ff66
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-lens-num {
        box-shadow: 0 6px 20px color-mix(in srgb, var(--color-violet) 40%, transparent)
    }
}

.dif-lens-head h3 {
    font: 700 clamp(22px, 3vw, 32px)/1.15 var(--font-display);
    letter-spacing: -.02em
}

.dif-lens-head p {
    color: var(--color-muted);
    margin-top: 4px;
    font-size: 15px
}

.dif-matrix {
    gap: var(--space-3);
    flex-direction: column;
    display: flex
}

.dif-criterion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #1e1f2880;
    padding: 22px
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-criterion {
        background: color-mix(in srgb, var(--color-surface) 50%, transparent)
    }
}

.dif-criterion-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    display: flex
}

.dif-criterion-title {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.dif-criterion-num {
    border-radius: var(--radius);
    background: var(--color-surface-2);
    width: 30px;
    height: 30px;
    font: 700 12px/1 var(--font-mono);
    color: var(--color-muted);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.dif-criterion-name {
    font: 600 17px/1.3 var(--font-display)
}

.dif-weight-chip {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: .08em;
    border-radius: var(--radius-pill);
    background: #6000ff24;
    padding: 5px 10px
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-weight-chip {
        background: color-mix(in srgb, var(--color-violet) 14%, transparent)
    }
}

.dif-weight-chip {
    color: var(--color-lavender);
    border: 1px solid #6000ff4d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-weight-chip {
        border: 1px solid color-mix(in srgb, var(--color-violet) 30%, transparent)
    }
}

.dif-criterion-hint {
    font: 400 11px/1 var(--font-mono);
    color: var(--color-muted);
    letter-spacing: .04em
}

.dif-scenarios {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    display: grid
}

.dif-scenario {
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: inherit;
    transition: all .25s var(--ease-reveal);
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    display: flex;
    position: relative
}

.dif-scenario:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px)
}

.dif-scenario.is-active {
    border-color: var(--color-violet);
    background: #261b42
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-scenario.is-active {
        background: color-mix(in srgb, var(--color-violet) 12%, var(--color-surface))
    }
}

.dif-scenario.is-active {
    box-shadow: 0 8px 24px #6000ff40
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-scenario.is-active {
        box-shadow: 0 8px 24px color-mix(in srgb, var(--color-violet) 25%, transparent)
    }
}

.dif-scenario-score {
    font: 800 12px/1 var(--font-mono);
    color: var(--color-muted);
    letter-spacing: .04em
}

.dif-scenario.is-active .dif-scenario-score {
    color: var(--color-lavender)
}

.dif-scenario-label {
    font: 700 13px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-white)
}

.dif-scenario-body {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5
}

.dif-implication {
    border-radius: var(--radius);
    background: #25263599;
    margin-top: 14px;
    padding: 14px 16px
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-implication {
        background: color-mix(in srgb, var(--color-surface-2) 60%, transparent)
    }
}

.dif-implication {
    border-left: 3px solid var(--color-border-strong)
}

.dif-implication p {
    color: var(--color-muted);
    margin: 0;
    font-size: 14px;
    line-height: 1.6
}

.dif-implication-tag {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-right: 8px;
    padding: 3px 8px
}

.dif-implication-tag-build {
    background: #1fc77c2e
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-implication-tag-build {
        background: color-mix(in srgb, var(--color-success) 18%, transparent)
    }
}

.dif-implication-tag-build {
    color: var(--color-success)
}

.dif-implication-tag-buy {
    background: #3b9eff2e
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-implication-tag-buy {
        background: color-mix(in srgb, var(--color-info) 18%, transparent)
    }
}

.dif-implication-tag-buy {
    color: var(--color-info)
}

.dif-implication-tag-hybrid {
    background: #f5a5242e
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-implication-tag-hybrid {
        background: color-mix(in srgb, var(--color-warning) 18%, transparent)
    }
}

.dif-implication-tag-hybrid {
    color: var(--color-warning)
}

.dif-tco-pair {
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    display: grid
}

.dif-tco-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 24px
}

.dif-tco-buy {
    background: #2b1d2b
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-buy {
        background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface))
    }
}

.dif-tco-build {
    background: #1e292d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-build {
        background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface))
    }
}

.dif-tco-build {
    border-color: #46d1934d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-build {
        border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-border))
    }
}

.dif-tco-card-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    display: flex
}

.dif-tco-x,
.dif-tco-check {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 800;
    display: flex
}

.dif-tco-x {
    background: #fe00542e
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-x {
        background: color-mix(in srgb, var(--color-danger) 18%, transparent)
    }
}

.dif-tco-x {
    color: var(--color-danger)
}

.dif-tco-check {
    background: #1fc77c2e
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-tco-check {
        background: color-mix(in srgb, var(--color-success) 18%, transparent)
    }
}

.dif-tco-check {
    color: var(--color-success)
}

.dif-tco-card-head h4 {
    font: 700 16px/1.3 var(--font-display)
}

.dif-tco-figures {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    display: flex
}

.dif-tco-row {
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    display: flex
}

.dif-tco-row span {
    color: var(--color-muted)
}

.dif-tco-row b {
    font: 600 16px/1 var(--font-mono);
    color: var(--color-white)
}

.dif-tco-total {
    color: var(--color-white) !important;
    font-size: 18px !important
}

.dif-tco-buy .dif-tco-total {
    color: var(--color-danger) !important
}

.dif-tco-build .dif-tco-total {
    color: var(--color-success) !important
}

.dif-tco-note {
    color: var(--color-muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.5
}

.dif-tco-hybrid-note {
    color: var(--color-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin-top: var(--space-3);
    padding: 16px;
    font-size: 14px
}

.dif-hybrid {
    gap: var(--space-3);
    counter-reset: step;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.dif-hybrid-step {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #1e1f2866;
    gap: 16px;
    padding: 20px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-hybrid-step {
        background: color-mix(in srgb, var(--color-surface) 40%, transparent)
    }
}

.dif-hybrid-num {
    font: 800 24px/1 var(--font-mono);
    color: var(--color-lavender);
    flex-shrink: 0
}

.dif-hybrid-step h4 {
    font: 600 16px/1.3 var(--font-display);
    margin-bottom: 6px
}

.dif-hybrid-step p {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5
}

.dif-flags {
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    display: grid
}

.dif-flag-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 24px
}

.dif-flag-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    display: flex
}

.dif-flag-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1
}

.dif-flag-head h3 {
    font: 700 18px/1.2 var(--font-display)
}

.dif-flag-head p {
    color: var(--color-muted);
    margin-top: 2px;
    font-size: 13px
}

.dif-flag-count {
    border-radius: var(--radius-pill);
    min-width: 28px;
    height: 28px;
    font: 700 13px/1 var(--font-mono);
    background: #fe005433;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 0 8px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flag-count {
        background: color-mix(in srgb, var(--color-danger) 20%, transparent)
    }
}

.dif-flag-count {
    color: var(--color-danger)
}

.dif-flag-count-green {
    background: #1fc77c33
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flag-count-green {
        background: color-mix(in srgb, var(--color-success) 20%, transparent)
    }
}

.dif-flag-count-green {
    color: var(--color-success)
}

.dif-flag-list {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.dif-flag-item {
    border-radius: var(--radius);
    cursor: pointer;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    transition: background .2s;
    display: flex
}

.dif-flag-item:hover {
    background: var(--hover-surface)
}

.dif-flag-item.is-checked {
    background: #6000ff14
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-flag-item.is-checked {
        background: color-mix(in srgb, var(--color-violet) 8%, transparent)
    }
}

.dif-flag-check {
    width: 20px;
    height: 20px;
    accent-color: var(--color-violet);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px
}

.dif-flag-item span {
    font-size: 14px;
    line-height: 1.5
}

.dif-gate {
    margin-top: var(--space-8);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-deep);
    border: 1px solid var(--color-border-strong);
    text-align: center;
    position: relative;
    overflow: hidden
}

.dif-gate:before {
    content: "";
    background: radial-gradient(at 50% 0, #6000ff26, #0000 60%);
    position: absolute;
    inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate:before {
        background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-violet) 15%, transparent), transparent 60%)
    }
}

.dif-gate:before {
    pointer-events: none
}

.dif-gate-form-block,
.dif-gate-report {
    z-index: 1;
    position: relative
}

.dif-gate h3 {
    font: 700 24px/1.2 var(--font-display);
    color: var(--color-white)
}

.dif-gate-sub {
    color: var(--color-muted);
    max-width: 440px;
    margin: 8px auto 24px;
    font-size: 14px
}

.dif-gate-form {
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    display: flex
}

.dif-gate-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    display: grid
}

.dif-gate-input {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    width: 100%;
    color: var(--color-white);
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px
}

.dif-gate-input::placeholder {
    color: var(--color-muted)
}

.dif-gate-input:focus {
    border-color: var(--color-violet);
    outline: none;
    box-shadow: 0 0 0 3px #6000ff33
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate-input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-violet) 20%, transparent)
    }
}

.dif-gate-submit {
    border-radius: var(--radius);
    background: var(--gradient-brand);
    width: 100%;
    color: var(--color-on-accent);
    font: 700 14px/1 var(--font-display);
    letter-spacing: .03em;
    cursor: pointer;
    border: none;
    padding: 14px 24px;
    transition: transform .2s, box-shadow .2s
}

.dif-gate-submit:hover {
    box-shadow: 0 10px 30px var(--glow-violet);
    transform: translateY(-2px)
}

.dif-gate-readout {
    border-radius: var(--radius-lg);
    background: #1e1f28cc;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate-readout {
        background: color-mix(in srgb, var(--color-surface) 80%, transparent)
    }
}

.dif-gate-readout {
    border: 1px solid var(--color-border);
    text-align: left
}

.dif-gate-readout-eyebrow {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.dif-gate-readout-verdict {
    font: 800 20px/1.2 var(--font-display);
    margin-top: 4px;
    display: block
}

.dif-gate-readout-score {
    font: 900 36px/1 var(--font-mono);
    color: var(--color-lavender)
}

.dif-gate-readout-bars {
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    display: flex
}

.dif-gate-readout-bar {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.dif-gate-readout-bar-track {
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    height: 8px;
    overflow: hidden
}

.dif-gate-readout-bar-fill {
    border-radius: var(--radius-pill);
    height: 100%;
    transition: width .6s var(--ease-reveal)
}

.dif-gate-readout-bar-fill-build {
    background: var(--color-success)
}

.dif-gate-readout-bar-fill-buy {
    background: var(--color-info)
}

.dif-gate-readout-bar-fill-hybrid {
    background: var(--color-warning)
}

.dif-gate-readout-bar-num {
    font: 600 12px/1 var(--font-mono);
    color: var(--color-muted)
}

.dif-gate-verdict-copy {
    max-width: 640px;
    margin: 0 auto 24px
}

.dif-gate-verdict-copy p {
    color: var(--color-white);
    text-align: center;
    font-size: 16px;
    line-height: 1.7
}

.dif-gate-cta {
    max-width: 540px;
    margin: 0 auto
}

.dif-gate-cta h4 {
    font: 800 22px/1.2 var(--font-display);
    color: var(--color-white);
    margin-bottom: 8px
}

.dif-gate-cta p {
    color: var(--color-muted);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6
}

.dif-gate-cta-badge {
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: #fe005429;
    margin-bottom: 12px;
    padding: 6px 12px;
    display: inline-block
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate-cta-badge {
        background: color-mix(in srgb, var(--color-danger) 16%, transparent)
    }
}

.dif-gate-cta-badge {
    color: var(--color-danger);
    border: 1px solid #fe00544d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-gate-cta-badge {
        border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent)
    }
}

.dif-gate-cta .btn {
    margin-top: 4px
}

@media (width<=860px) {

    .dif-scenarios,
    .dif-tco-pair,
    .dif-flags,
    .dif-hybrid {
        grid-template-columns: 1fr
    }

    .dif-verdict-bar {
        text-align: center;
        flex-direction: column;
        gap: 10px
    }

    .dif-verdict-right {
        text-align: center
    }

    .dif-gate-grid {
        grid-template-columns: 1fr
    }

    .dif-gate-readout {
        text-align: center;
        flex-direction: column
    }
}

.field {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.field label {
    font: 500 13px/1.2 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.field label .req {
    color: var(--color-red)
}

.field input {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-white);
    font: 400 15px/1.4 var(--font-display);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color .2s, box-shadow .2s
}

.field input:focus {
    border-color: var(--color-violet);
    outline: none;
    box-shadow: 0 0 0 3px #6000ff40
}

@supports (color:color-mix(in lab, red, red)) {
    .field input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-violet) 25%, transparent)
    }
}

.field input[aria-invalid=true] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px #fe005433
}

@supports (color:color-mix(in lab, red, red)) {
    .field input[aria-invalid=true] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red) 20%, transparent)
    }
}

.field-error {
    color: var(--color-red);
    font-size: 13px;
    font-weight: 500
}

.privacy-note {
    color: var(--color-muted);
    opacity: .65;
    text-align: center;
    font-size: 12px
}

.hp {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
    top: -9999px;
    left: -9999px;
    overflow: hidden
}

.dif-confidence {
    border-radius: var(--radius);
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 18px;
    display: flex
}

.dif-confidence--high {
    background: #1fc77c1f
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-confidence--high {
        background: color-mix(in srgb, var(--color-success) 12%, transparent)
    }
}

.dif-confidence--high {
    border: 1px solid #1fc77c4d
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-confidence--high {
        border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent)
    }
}

.dif-confidence--medium {
    background: #f59e0b1f;
    border: 1px solid #f59e0b40
}

.dif-confidence--low {
    background: #fe00541a
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-confidence--low {
        background: color-mix(in srgb, var(--color-red) 10%, transparent)
    }
}

.dif-confidence--low {
    border: 1px solid #fe005440
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-confidence--low {
        border: 1px solid color-mix(in srgb, var(--color-red) 25%, transparent)
    }
}

.dif-confidence-badge {
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    padding: 4px 10px
}

.dif-confidence--high .dif-confidence-badge {
    background: var(--color-success);
    color: #0a1a12
}

.dif-confidence--medium .dif-confidence-badge {
    color: #1a1200;
    background: #f59e0b
}

.dif-confidence--low .dif-confidence-badge {
    background: var(--color-red);
    color: #1a0a0a
}

.dif-confidence-label {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.4
}

.dif-report-cta {
    border: 1px solid #6000ff59;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-report-cta {
        border: 1px solid color-mix(in srgb, var(--color-violet) 35%, transparent)
    }
}

.dif-report-cta {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #6000ff1a, #1e1f28f2)
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-report-cta {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 10%, transparent), color-mix(in srgb, var(--color-surface) 95%, transparent))
    }
}

.dif-report-cta-copy {
    color: var(--color-muted);
    text-wrap: pretty;
    margin: 0;
    font-size: 15px;
    line-height: 1.55
}

.dif-booking-bar {
    z-index: 200;
    background: #191a1ff0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-booking-bar {
        background: color-mix(in srgb, var(--color-bg) 94%, transparent)
    }
}

.dif-booking-bar {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-top: 1px solid #6000ff66
}

@supports (color:color-mix(in lab, red, red)) {
    .dif-booking-bar {
        border-top: 1px solid color-mix(in srgb, var(--color-violet) 40%, transparent)
    }
}

.dif-booking-bar {
    padding: 0;
    box-shadow: 0 -8px 40px #00000080
}

.dif-booking-bar-inner {
    align-items: center;
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex
}

.dif-booking-bar-copy {
    color: var(--color-muted);
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.4
}

.dif-booking-bar-copy strong {
    color: var(--color-white);
    font-weight: 600
}

.dif-booking-bar .btn {
    white-space: nowrap;
    flex-shrink: 0
}

.dif-booking-bar-close {
    border: 1px solid var(--color-border-strong);
    width: 32px;
    height: 32px;
    color: var(--color-muted);
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: color .2s, border-color .2s;
    display: flex
}

.dif-booking-bar-close:hover {
    color: var(--color-white);
    border-color: var(--color-white)
}

@media (prefers-reduced-motion:reduce) {
    .dif-booking-bar {
        animation: none
    }

    .dif-booking-bar * {
        transition: none !important
    }
}

@media (width<=640px) {
    .dif-booking-bar-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px
    }

    .dif-booking-bar-copy {
        flex: 100%;
        font-size: 13px
    }
}

@media print {
    body {
        font-size: 11pt;
        color: #1a1a2e !important;
        background: #fff !important
    }

    .noise,
    .halo,
    .dif-progress,
    .dif-submit,
    .nav-book-cta,
    footer,
    .spy-nav,
    .dif-spy,
    .dif-gate,
    .dif-report-sent,
    .dif-report-cta,
    .dif-booking-bar,
    form,
    .dif-report-actions .btn-ghost {
        display: none !important
    }

    .dif-hero,
    .dif,
    .dif-block,
    .section {
        background: 0 0 !important;
        padding: 16px 0 !important
    }

    .dif-hero h1,
    .dif-block-head h3,
    .dif-report-path {
        color: #1a1a2e !important;
        -webkit-text-fill-color: #1a1a2e !important;
        background: 0 0 !important
    }

    .dif-opt,
    .dif-tco-card,
    .dif-step,
    .dif-flags,
    .dif-checklist label,
    .dif-gate-card {
        box-shadow: none !important;
        background: #fff !important;
        border-color: #ddd !important
    }

    .dif-opt-body,
    .dif-bar-label,
    .dif-bar-pct,
    .dif-tco-note,
    .dif-step p,
    .dif-report-copy,
    .dif-report-note {
        color: #444 !important
    }

    .dif-bar-track i {
        background: #6000ff !important
    }

    .dif-bar--buy .dif-bar-track i {
        background: #1fc77c !important
    }

    .dif-bar--hybrid .dif-bar-track i {
        background: #c769f7 !important
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important
    }

    a {
        text-decoration: underline;
        color: #6000ff !important
    }
}

.tools-grid {
    gap: var(--space-5);
    padding: 0 0 var(--space-8);
    grid-template-columns: 1fr;
    display: grid
}

@media (width>=768px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width>=1100px) {
    .tools-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.tool-card {
    gap: var(--space-2);
    background: var(--card-bg, #1e1f28);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid #ffffff14;
    flex-direction: column;
    text-decoration: none;
    transition: border-color .25s, box-shadow .25s;
    display: flex
}

.tool-card:hover {
    border-color: var(--color-violet, #6000ff);
    box-shadow: 0 0 0 1px #6000ff40
}

.tool-card-eyebrow {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-lavender, #c769f7);
    font-size: 11px
}

.tool-card-headline {
    color: var(--text-primary, #f3f3f3);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3
}

.tool-card-sub {
    color: var(--text-secondary, #9ca0b0);
    flex: 1;
    font-size: .9rem;
    line-height: 1.5
}

.tool-card-meta {
    color: var(--text-muted, #6e7080);
    padding-top: var(--space-2);
    border-top: 1px solid #ffffff0f;
    font-size: 11px
}

.tool-card-cta {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-violet, #6000ff);
    font-size: 12px
}

.atmosphere {
    z-index: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.halo {
    filter: blur(120px);
    border-radius: 50%;
    animation: 16s ease-in-out infinite alternate drift;
    position: absolute
}

.halo-1 {
    background: var(--halo-violet-fill);
    width: 620px;
    height: 620px;
    top: -180px;
    right: -140px
}

.halo-2 {
    background: var(--halo-red-fill);
    width: 520px;
    height: 520px;
    animation-delay: -6s;
    bottom: -160px;
    left: -120px
}

.halo-1--static {
    width: 640px;
    height: 640px;
    top: -160px;
    left: -200px
}

.halo-2--static {
    width: 560px;
    height: 560px;
    animation-direction: alternate-reverse;
    bottom: -120px;
    right: -180px
}

.theme-toggle {
    width: 44px;
    height: 44px;
    color: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast), transform .25s var(--ease-reveal);
    background: 0 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.theme-toggle:hover {
    border-color: var(--color-lavender);
    color: var(--color-lavender);
    transform: translateY(-2px)
}

.theme-toggle .icon-moon,
[data-theme=light] .theme-toggle .icon-sun {
    display: none
}

[data-theme=light] .theme-toggle .icon-moon {
    display: block
}

.nav-burger {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    width: 44px;
    height: 44px;
    color: var(--color-white);
    cursor: pointer;
    background: 0 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.drawer {
    z-index: 200;
    background: var(--color-deep);
    transition: transform .3s var(--ease-reveal);
    padding: var(--space-5);
    flex-direction: column;
    display: flex;
    position: fixed;
    inset: 0;
    transform: translate(100%)
}

.drawer.open {
    transform: none
}

.drawer-close {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    width: 44px;
    height: 44px;
    color: var(--color-white);
    cursor: pointer;
    background: 0 0;
    align-self: flex-end;
    font-size: 22px
}

.drawer a {
    font: 600 20px/1 var(--font-display);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-white)
}

.drawer a.active {
    color: var(--color-lavender)
}

.nav-links a.active {
    color: var(--color-white)
}

.nav-links a.active:after {
    content: "";
    background: var(--gradient-brand);
    border-radius: 2px;
    height: 2px;
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0
}

.badge {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    display: inline-flex
}

.badge-live {
    background: #1fc77c29
}

@supports (color:color-mix(in lab, red, red)) {
    .badge-live {
        background: color-mix(in oklab, var(--color-success) 16%, transparent)
    }
}

.badge-live {
    color: var(--color-success);
    border: 1px solid #1fc77c4d
}

@supports (color:color-mix(in lab, red, red)) {
    .badge-live {
        border: 1px solid color-mix(in oklab, var(--color-success) 30%, transparent)
    }
}

.badge-live:before {
    content: "";
    background: var(--color-success);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: 2s ease-in-out infinite blink
}

.featured {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform .3s var(--ease-reveal), box-shadow .3s, border-color .3s;
    gap: 0;
    display: grid;
    position: relative;
    overflow: hidden
}

.featured:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 24px 60px #0006, 0 0 50px #6000ff1f
}

.featured-visual {
    background: linear-gradient(135deg, #2d2151, var(--color-surface-2));
    min-height: 280px;
    position: relative
}

@supports (color:color-mix(in lab, red, red)) {
    .featured-visual {
        background: linear-gradient(135deg, color-mix(in oklab, var(--color-violet) 14%, var(--color-surface-2)), var(--color-surface-2))
    }
}

.featured-visual {
    padding: var(--space-5);
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

.featured-visual:before {
    content: "";
    background: radial-gradient(circle at 70% 30%, #6000ff2e, #0000 60%);
    position: absolute;
    inset: 0
}

.featured-body {
    padding: var(--space-5) var(--space-5) var(--space-6)
}

.featured-body h3 {
    font: 700 clamp(26px, 3vw, 36px)/1.1 var(--font-display);
    letter-spacing: -.025em;
    margin: var(--space-3) 0 var(--space-2)
}

.tool-desc {
    color: var(--color-muted);
    margin-bottom: var(--space-2);
    font-size: 17px
}

.tool-meta {
    gap: var(--space-1) var(--space-3);
    margin: var(--space-3) 0 var(--space-5);
    flex-wrap: wrap;
    display: flex
}

.tool-meta span {
    font: 500 13px/1 var(--font-mono);
    color: var(--color-muted);
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.tool-meta span:before {
    content: "";
    background: var(--color-lavender);
    border-radius: 50%;
    width: 4px;
    height: 4px
}

[data-theme=light] .featured:hover {
    box-shadow: 0 18px 40px #1b1c221f, 0 0 50px #6000ff14
}

.star-section {
    padding-top: var(--space-4)
}

.star-grid {
    gap: var(--space-4);
    grid-template-columns: 1fr;
    display: grid
}

.star-grid--2 {
    grid-template-columns: 1fr
}

.dyn-grid {
    gap: var(--space-4);
    grid-template-columns: 1fr;
    display: grid
}

.dyn-grid--pair {
    grid-template-columns: 1fr
}

.dyn-grid--single .featured {
    max-width: 100%
}

.star-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform .45s var(--ease-reveal), border-color .45s, box-shadow .45s;
    isolation: isolate;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

.star-card:after {
    content: "";
    border-radius: inherit;
    opacity: 0;
    transition: opacity .45s var(--ease-reveal);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
    background: radial-gradient(120% 80% at 50% 0, #6000ff33, #0000 58%);
    position: absolute;
    inset: 0
}

.star-card:hover {
    border-color: #7e30ff77;
    transform: translateY(-8px)
}

@supports (color:color-mix(in lab, red, red)) {
    .star-card:hover {
        border-color: color-mix(in oklab, var(--color-violet) 38%, var(--color-border-strong))
    }
}

.star-card:hover {
    box-shadow: 0 30px 70px #00000080
}

.star-card:hover:after {
    opacity: 1
}

.star-visual {
    aspect-ratio: 16/10;
    background: var(--color-deep);
    position: relative;
    overflow: hidden
}

.star-visual svg {
    width: 100%;
    height: 100%;
    transition: transform .75s var(--ease-reveal);
    display: block;
    position: absolute;
    inset: 0
}

.star-card:hover .star-visual svg {
    transform: scale(1.06)
}

.star-visual:before {
    content: "";
    z-index: 3;
    pointer-events: none;
    width: 45%;
    transition: left .8s var(--ease-reveal);
    background: linear-gradient(100deg, #0000, #ffffff14, #0000);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    transform: skew(-18deg)
}

.star-card:hover .star-visual:before {
    left: 130%
}

.star-badge {
    top: var(--space-2);
    left: var(--space-2);
    z-index: 5;
    font: 600 10.5px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    background: #15161bb8;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    display: inline-flex;
    position: absolute
}

@supports (color:color-mix(in lab, red, red)) {
    .star-badge {
        background: color-mix(in oklab, var(--color-deep) 72%, transparent)
    }
}

.star-badge {
    color: var(--color-muted);
    border: 1px solid var(--color-border-strong);
    -webkit-backdrop-filter: blur(8px)
}

.star-go {
    right: var(--space-2);
    bottom: var(--space-2);
    z-index: 5;
    width: 46px;
    height: 46px;
    color: var(--color-on-accent);
    background: var(--color-violet);
    opacity: 0;
    transition: transform .45s var(--ease-reveal), opacity .45s;
    box-shadow: 0 10px 26px var(--glow-violet);
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: absolute;
    transform: translateY(10px)scale(.8)
}

.star-card:hover .star-go {
    opacity: 1;
    transform: none
}

.star-body {
    padding: var(--space-4);
    gap: var(--space-2);
    flex-direction: column;
    flex: 1;
    display: flex
}

.star-card h3 {
    font: 700 clamp(22px, 2.1vw, 27px)/1.15 var(--font-display);
    letter-spacing: -.02em;
    transition: color .35s
}

.star-card:hover h3 {
    color: var(--color-lavender)
}

.star-card p {
    color: var(--color-muted);
    text-wrap: pretty;
    max-width: 42ch;
    font-size: 15.5px;
    line-height: 1.62
}

.star-tags {
    padding-top: var(--space-2);
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    display: flex
}

.star-tag {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .02em;
    background: var(--color-surface-2);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 7px 11px;
    transition: color .3s, border-color .3s
}

.star-card:hover .star-tag {
    color: var(--color-white);
    border-color: var(--color-border-strong)
}

[data-theme=light] .star-card:hover {
    box-shadow: 0 24px 50px #1b1c2224
}

.site-cta {
    z-index: 2;
    padding: var(--space-8) 0 var(--space-12);
    position: relative
}

.site-cta-card {
    background: var(--cta-card-bg);
    color: var(--cta-card-fg);
    border-radius: var(--radius-lg);
    grid-template-columns: 1.04fr 1fr;
    display: grid;
    overflow: hidden;
    box-shadow: 0 30px 80px #0000008c, 0 0 0 1px #ffffff0d
}

[data-theme=light] .site-cta-card {
    box-shadow: 0 24px 60px #1b1c2229, 0 0 0 1px #1b1c220f
}

.site-cta-copy {
    justify-content: center;
    gap: var(--space-3);
    flex-direction: column;
    padding: clamp(40px, 5vw, 76px) clamp(32px, 4vw, 68px);
    display: flex
}

.site-cta .ct-eyebrow {
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cta-card-trust);
    align-items: center;
    gap: 10px;
    display: inline-flex
}

.site-cta .ct-eyebrow:before {
    content: "";
    background: currentColor;
    width: 26px;
    height: 1px
}

.site-cta h2 {
    font: 700 clamp(30px, 3.4vw, 46px)/1.06 var(--font-display);
    letter-spacing: -.03em;
    color: var(--cta-card-fg);
    text-wrap: balance
}

.site-cta .ct-sub {
    color: var(--cta-card-sub);
    text-wrap: pretty;
    max-width: 44ch;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6
}

.site-cta .ct-btn {
    background: var(--color-violet);
    color: #fff;
    font: 600 16px/1 var(--font-body);
    border-radius: var(--radius);
    cursor: pointer;
    height: 52px;
    transition: transform .25s var(--ease-reveal), box-shadow .25s;
    white-space: nowrap;
    border: 0;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 0 26px;
    display: inline-flex
}

[data-theme=light] .site-cta .ct-btn {
    color: var(--color-violet);
    background: #fff
}

.site-cta .ct-btn:hover {
    box-shadow: 0 10px 30px var(--glow-violet);
    transform: translateY(-2px)
}

.site-cta .ct-btn svg {
    transition: transform .25s var(--ease-reveal)
}

.site-cta .ct-btn:hover svg {
    transform: translate(3px)
}

.site-cta .ct-trust {
    font: 500 12px/1 var(--font-mono);
    color: var(--cta-card-trust);
    letter-spacing: .06em;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 2px;
    display: flex
}

.site-cta .ct-trust .pulse {
    background: var(--color-success);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: 2.4s ease-out infinite ctPulse;
    box-shadow: 0 0 #1fc77c80
}

@keyframes ctPulse {
    0% {
        box-shadow: 0 0 #1fc77c80
    }

    70% {
        box-shadow: 0 0 0 8px #1fc77c00
    }

    to {
        box-shadow: 0 0 #1fc77c00
    }
}

.site-cta .ct-trust .sep {
    opacity: .4
}

.site-cta-visual {
    border-radius: inherit;
    background: 0 0;
    min-height: 440px;
    position: relative;
    overflow: hidden
}

.site-cta-visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.svc-tabs {
    z-index: 2;
    position: relative
}

.tab-rail {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    margin-bottom: var(--space-6);
    border-radius: 999px;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 5px;
    display: inline-flex;
    position: relative
}

.tab-indicator {
    background: var(--color-violet);
    height: calc(100% - 10px);
    transition: transform .35s var(--ease-reveal), width .35s var(--ease-reveal);
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    position: absolute;
    top: 5px;
    left: 5px;
    box-shadow: 0 4px 20px #6000ff66
}

.tab-btn {
    z-index: 1;
    height: 44px;
    color: var(--color-muted);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    transition: color .25s;
    display: inline-flex;
    position: relative
}

.tab-btn svg {
    transition: transform .3s var(--ease-reveal);
    flex-shrink: 0
}

.tab-btn .tab-num {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .1em;
    opacity: .5
}

.tab-btn.active {
    color: var(--color-on-accent)
}

.tab-btn.active .tab-num {
    opacity: 1
}

.tab-panels {
    position: relative
}

.tab-panel {
    opacity: 0;
    display: none
}

.tab-panel.active {
    animation: panelEnter .6s var(--ease-reveal) both;
    display: block
}

@keyframes panelEnter {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        filter: none;
        transform: none
    }
}

.tab-panel.active>* {
    animation: itemRise .55s var(--ease-reveal) both
}

.tab-panel.active>:first-child {
    animation-delay: 50ms
}

.tab-panel.active>:nth-child(2) {
    animation-delay: .12s
}

.tab-panel.active>:nth-child(3) {
    animation-delay: .19s
}

@keyframes itemRise {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.panel-grid {
    gap: var(--space-6);
    grid-template-columns: 1.05fr 1fr;
    align-items: start;
    display: grid
}

.panel-copy {
    min-width: 0
}

.panel-copy h2 {
    font: 700 clamp(30px, 3.8vw, 46px)/1.08 var(--font-display);
    letter-spacing: -.03em;
    text-wrap: balance;
    margin-bottom: var(--space-2)
}

.panel-copy .panel-lead {
    color: var(--color-muted);
    margin-bottom: var(--space-4);
    max-width: 52ch;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.6
}

.deliverables {
    margin-bottom: var(--space-4);
    gap: 10px;
    list-style: none;
    display: grid
}

.deliverables li {
    color: var(--color-white);
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
    display: flex
}

.deliverables svg {
    color: var(--color-violet);
    flex-shrink: 0;
    margin-top: 3px
}

.tech-grid {
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.tech-pill {
    font: 500 13px/1 var(--font-mono);
    color: var(--color-muted);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    display: inline-flex
}

.tech-pill .gd {
    background: var(--gradient-brand);
    border-radius: 2px;
    width: 8px;
    height: 8px
}

.panel-cta {
    gap: var(--space-2);
    flex-wrap: wrap;
    display: flex
}

.diagram {
    background: var(--diagram-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    position: relative;
    overflow: hidden
}

.diagram-tag {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-lavender);
    margin-bottom: var(--space-3);
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.diagram-tag:before {
    content: "";
    background: var(--gradient-brand);
    width: 18px;
    height: 1px
}

.diagram svg {
    width: 100%;
    height: auto;
    display: block
}

.tiers-compact {
    gap: var(--space-3);
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

.tier-compact {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    gap: var(--space-3);
    transition: transform .25s var(--ease-reveal), border-color .25s, box-shadow .25s;
    flex-direction: column;
    display: flex
}

.tier-compact:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px)
}

.tier-compact.pop {
    border-color: #690eff94
}

@supports (color:color-mix(in lab, red, red)) {
    .tier-compact.pop {
        border-color: color-mix(in oklab, var(--color-violet) 55%, var(--color-border))
    }
}

.tier-compact.pop {
    box-shadow: 0 0 0 1px #6000ff66, 0 14px 40px var(--glow-violet)
}

@supports (color:color-mix(in lab, red, red)) {
    .tier-compact.pop {
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-violet) 40%, transparent), 0 14px 40px var(--glow-violet)
    }
}

.tier-name {
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-lavender)
}

.tier-price {
    align-items: baseline;
    gap: 8px;
    display: flex
}

.tier-price b {
    font: 700 30px/1 var(--font-mono);
    color: var(--color-white);
    letter-spacing: -.02em
}

.tier-price span {
    font: 500 13px/1 var(--font-mono);
    color: var(--color-muted)
}

.tier-compact .btn {
    width: 100%;
    margin-top: auto
}

@media (width>=768px) {

    .star-grid,
    .star-grid--2,
    .dyn-grid--pair {
        grid-template-columns: 1fr 1fr
    }

    .featured {
        grid-template-columns: 1.1fr 1fr
    }

    .featured-visual {
        min-height: auto
    }

    .featured-body {
        padding: var(--space-6)
    }

    .tiers-compact {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (width<=899px) {
    .site-cta-card {
        grid-template-columns: 1fr
    }

    .site-cta-copy {
        text-align: center;
        padding: var(--space-6) var(--space-3);
        align-items: center;
        gap: var(--space-2);
        order: 2
    }

    .site-cta .ct-eyebrow,
    .site-cta .ct-btn,
    .site-cta .ct-trust {
        align-self: center
    }

    .site-cta .ct-sub {
        margin-inline: auto
    }

    .site-cta-visual {
        order: 1;
        min-height: 230px
    }
}

@media (width<=1099px) {
    .nav-links {
        display: none
    }

    .panel-grid {
        gap: var(--space-4);
        grid-template-columns: 1fr
    }

    .tiers-compact {
        grid-template-columns: 1fr
    }
}

@media (width<=767px) {
    .tab-rail {
        width: 100%
    }

    .tab-btn {
        flex: 1;
        justify-content: center;
        padding: 0 12px
    }

    .tab-btn .tab-num {
        display: none
    }

    .tab-btn span:not(.tab-num) {
        font-size: 13px
    }
}

@media (width>=1100px) {
    .nav-links {
        display: flex
    }

    .nav-burger {
        display: none
    }
}

header.hero {
    min-height: auto;
    padding: calc(72px + var(--space-12)) 0 var(--space-8);
    display: block;
    overflow: visible
}

header.hero h1 {
    font: 800 clamp(44px, 7.4vw, 84px)/1.04 var(--font-display);
    letter-spacing: -.035em;
    margin-bottom: var(--space-3);
    text-wrap: balance
}

header.hero p {
    color: var(--color-muted);
    text-wrap: pretty;
    max-width: none;
    font-size: clamp(17px, 1.6vw, 20px)
}

.quiz {
    --tf-ease: var(--ease-reveal);
    --tf-dur: .42s;
    isolation: isolate;
    flex-direction: column;
    height: 100dvh;
    display: flex;
    position: relative;
    overflow: hidden
}

.quiz:before {
    content: "";
    filter: blur(8px);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 78% 12%, #6000ff4d, #0000 70%), radial-gradient(48% 42% at 16% 8%, #c769f729, #0000 72%), radial-gradient(40% 40% at 50% 0, #fe00541a, #0000 70%);
    height: 70vh;
    animation: 18s ease-in-out infinite alternate drift;
    position: absolute;
    inset: -20% -10% auto
}

.quiz-top {
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px clamp(20px, 4vw, 40px);
    display: flex
}

.quiz-brand {
    align-items: center;
    gap: 11px;
    text-decoration: none;
    display: inline-flex
}

.quiz-brand img {
    border-radius: 7px;
    width: auto;
    height: 38px
}

.quiz-brand .logo-light,
[data-theme=light] .quiz-brand .logo-dark {
    display: none
}

[data-theme=light] .quiz-brand .logo-light {
    display: block
}

.quiz-stage {
    scrollbar-width: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 8px clamp(20px, 4vw, 40px) 40px;
    display: flex;
    overflow: hidden auto
}

.quiz-stage::-webkit-scrollbar {
    display: none
}

.quiz-foot {
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    padding: 0 clamp(20px, 4vw, 40px) 22px;
    display: flex
}

.quiz-progress {
    background: #f3f3f312;
    border-radius: 999px;
    height: 4px
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-progress {
        background: color-mix(in srgb, var(--color-white) 7%, transparent)
    }
}

.quiz-progress {
    overflow: hidden
}

.quiz-progress i {
    background: var(--gradient-brand);
    width: 0%;
    height: 100%;
    transition: width .5s var(--tf-ease);
    border-radius: 999px;
    display: block
}

.quiz-foot-row {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex
}

.quiz-screen {
    width: 100%;
    max-width: 880px;
    transition: opacity var(--tf-dur) var(--tf-ease), transform var(--tf-dur) var(--tf-ease), filter var(--tf-dur) var(--tf-ease);
    will-change: opacity, transform;
    margin: auto
}

.quiz-screen.leave {
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    transform: translateY(-30px)
}

.quiz-screen.arrive {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(34px)
}

.quiz-screen.report-wide {
    max-width: 880px
}

.quiz-welcome {
    text-align: center
}

.quiz-welcome h1 {
    font: 700 clamp(42px, 7vw, 84px)/1.02 var(--font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
    margin: 0
}

.quiz-welcome h1 .accent {
    background: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.quiz-welcome .lead {
    color: var(--color-muted);
    text-wrap: pretty;
    margin: 20px auto 30px;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55
}

.quiz-welcome .btn {
    margin: 0 auto
}

.quiz-welcome .meta-row {
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    display: flex
}

.quiz-welcome .meta-chip {
    font: 500 13px/1 var(--font-mono);
    letter-spacing: .04em;
    color: var(--color-muted);
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.quiz-welcome .meta-chip svg {
    width: 15px;
    height: 15px;
    color: var(--color-lavender)
}

.quiz-step-meta {
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
    opacity: 0;
    transition: opacity .3s
}

.quiz-step-meta.show {
    opacity: 1
}

.quiz-step-meta b {
    color: var(--color-white);
    font-weight: 700
}

.quiz-q-prompt {
    font: 600 clamp(30px, 5vw, 54px)/1.08 var(--font-display);
    letter-spacing: -.03em;
    text-wrap: balance;
    margin: 14px 0 30px
}

.quiz-q-hint {
    font: 500 13px/1 var(--font-mono);
    letter-spacing: .06em;
    color: var(--color-muted);
    margin-bottom: 18px
}

.quiz-opts {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.quiz-opt {
    text-align: left;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    background: #1e1f28b8;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 22px 24px;
    display: flex;
    position: relative
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-opt {
        background: color-mix(in srgb, var(--color-surface) 72%, transparent)
    }
}

.quiz-opt {
    color: var(--color-white);
    font: 500 clamp(17px, 1.7vw, 21px)/1.5 var(--font-body);
    letter-spacing: -.01em;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s var(--tf-ease), box-shadow .2s;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.quiz-opt:hover {
    border-color: var(--color-lavender);
    transform: translateY(-2px)
}

.quiz-opt.is-selected {
    border-color: var(--color-violet);
    background: #291a4a
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-opt.is-selected {
        background: color-mix(in srgb, var(--color-violet) 16%, var(--color-surface))
    }
}

.quiz-opt.is-selected {
    box-shadow: 0 0 0 1px #6000ff73, 0 14px 40px #6000ff38
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-opt.is-selected {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 45%, transparent), 0 14px 40px #6000ff38
    }
}

.quiz-opt-key {
    border: 1px solid var(--color-border-strong);
    width: 30px;
    height: 30px;
    font: 600 13px/1 var(--font-mono);
    color: var(--color-muted);
    border-radius: 8px;
    flex-shrink: 0;
    place-items: center;
    transition: all .2s;
    display: grid
}

.quiz-opt.is-selected .quiz-opt-key {
    border-color: var(--color-violet);
    color: var(--color-lavender)
}

.quiz-opt-body {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.quiz-opt-tag {
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-lavender)
}

.quiz-opt-text {
    font: 500 clamp(17px, 1.7vw, 21px)/1.45 var(--font-body);
    color: var(--color-white);
    letter-spacing: -.01em
}

.quiz-opt-scores {
    font: 500 11px/1.4 var(--font-mono);
    color: var(--color-muted);
    letter-spacing: .02em;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-top: 4px;
    display: flex
}

.quiz-opt-scores b {
    color: var(--color-muted);
    font-weight: 600
}

.quiz-opt.is-selected .quiz-opt-tag {
    color: var(--color-lavender)
}

.quiz-opt.is-selected .quiz-opt-scores {
    color: var(--color-white)
}

.quiz-opt.is-selected .quiz-opt-scores b {
    color: var(--color-lavender)
}

.quiz-opt-check {
    background: var(--color-violet);
    width: 24px;
    height: 24px;
    color: var(--color-on-accent);
    opacity: 0;
    transition: opacity .22s var(--tf-ease), transform .22s var(--tf-ease);
    border-radius: 999px;
    flex-shrink: 0;
    place-items: center;
    display: grid;
    transform: scale(.4)
}

.quiz-opt.is-selected .quiz-opt-check {
    opacity: 1;
    transform: scale(1)
}

.quiz-opt-check svg {
    width: 14px;
    height: 14px
}

.quiz-opt.is-multi .quiz-opt-check {
    border-radius: 7px
}

.quiz-q-actions {
    gap: 12px;
    margin-top: 26px;
    display: flex
}

.quiz-lead-grid {
    flex-direction: column;
    gap: 16px;
    display: flex
}

.quiz-field {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.quiz-field label {
    font: 600 13px/1 var(--font-body);
    letter-spacing: .01em;
    color: var(--color-muted)
}

.quiz-field label .req {
    color: var(--color-pink)
}

.quiz-field input {
    border-radius: var(--radius);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    width: 100%;
    color: var(--color-white);
    font: 500 18px/1.3 var(--font-body);
    letter-spacing: -.01em;
    outline: none;
    padding: 17px 18px;
    transition: border-color .2s, box-shadow .2s
}

.quiz-field input::placeholder {
    color: #9ca0b0b3
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-field input::placeholder {
        color: color-mix(in srgb, var(--color-muted) 70%, transparent)
    }
}

.quiz-field input:focus {
    border-color: var(--color-violet);
    box-shadow: 0 0 0 3px #6000ff47
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-field input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-violet) 28%, transparent)
    }
}

.quiz-field.invalid input {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px #fe00542e
}

.quiz-field-err {
    font: 500 12px/1.4 var(--font-mono);
    color: var(--color-danger);
    opacity: 0;
    min-height: 0;
    transition: opacity .2s, transform .2s;
    transform: translateY(-4px)
}

.quiz-field.invalid .quiz-field-err {
    opacity: 1;
    transform: translateY(0)
}

.quiz-lead-note {
    font: 400 13px/1.5 var(--font-body);
    color: var(--color-muted);
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    display: flex
}

.quiz-lead-note svg {
    width: 16px;
    height: 16px;
    color: var(--color-lavender);
    flex-shrink: 0;
    margin-top: 2px
}

.quiz-back {
    cursor: pointer;
    color: var(--color-muted);
    font: 500 13px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    transition: color .2s, transform .2s;
    display: inline-flex
}

.quiz-back:hover {
    color: var(--color-white);
    transform: translate(-2px)
}

.quiz-back:disabled {
    opacity: 0;
    pointer-events: none
}

.quiz-back svg {
    width: 16px;
    height: 16px
}

.quiz-hint {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca0b0b3
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-hint {
        color: color-mix(in srgb, var(--color-muted) 70%, transparent)
    }
}

.quiz-hint kbd {
    font: 600 11px/1 var(--font-mono);
    border: 1px solid var(--color-border-strong);
    color: var(--color-muted);
    border-radius: 5px;
    margin: 0 2px;
    padding: 3px 6px
}

.quiz-report-head {
    margin-bottom: 26px
}

.quiz-report-head h2 {
    font: 700 clamp(34px, 5vw, 56px)/1.04 var(--font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
    margin: 14px 0 6px
}

.quiz-report-head .sub {
    color: var(--color-muted);
    font-size: 16px
}

.quiz-score-card {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(#6000ff24, #0000 55%), #1e1f28d1
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-score-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--color-violet) 14%, transparent), transparent 55%), color-mix(in srgb, var(--color-surface) 82%, transparent)
    }
}

.quiz-score-card {
    box-shadow: 0 0 0 1px #6000ff38, 0 30px 70px #6000ff2e
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-score-card {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-violet) 22%, transparent), 0 30px 70px #6000ff2e
    }
}

.quiz-score-card {
    margin-bottom: 18px;
    padding: clamp(24px, 3vw, 34px)
}

.quiz-verdict-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    display: flex
}

.quiz-verdict-label {
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.quiz-verdict-path {
    font: 700 clamp(40px, 7vw, 68px)/1 var(--font-display);
    letter-spacing: -.035em;
    margin-top: 8px
}

.quiz-verdict-path.build {
    color: var(--color-violet)
}

.quiz-verdict-path.buy {
    color: var(--color-success)
}

.quiz-verdict-path.hybrid {
    background: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.quiz-score-ring {
    text-align: right;
    font-family: var(--font-display)
}

.quiz-score-num {
    font: 800 clamp(48px, 9vw, 88px)/.9 var(--font-display);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.quiz-score-cap {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 6px;
    display: block
}

.quiz-bars {
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
    display: flex
}

.quiz-bar-row {
    grid-template-columns: 74px 1fr 46px;
    align-items: center;
    gap: 12px;
    display: grid
}

.quiz-bar-label {
    font: 600 12px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.quiz-bar-track {
    background: #f3f3f314;
    border-radius: 999px;
    height: 12px
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-bar-track {
        background: color-mix(in srgb, var(--color-white) 8%, transparent)
    }
}

.quiz-bar-track {
    overflow: hidden
}

.quiz-bar-fill {
    width: 0%;
    height: 100%;
    transition: width .9s var(--tf-ease);
    border-radius: 999px;
    display: block
}

.quiz-bar-row.build .quiz-bar-fill {
    background: var(--color-violet)
}

.quiz-bar-row.buy .quiz-bar-fill {
    background: var(--color-success)
}

.quiz-bar-row.hybrid .quiz-bar-fill {
    background: var(--gradient-brand)
}

.quiz-bar-pct {
    font: 700 14px/1 var(--font-mono);
    color: var(--color-white);
    text-align: right;
    font-variant-numeric: tabular-nums
}

.quiz-rationale {
    font: 400 16px/1.6 var(--font-body);
    color: var(--color-white);
    text-wrap: pretty;
    margin: 24px 0 4px
}

.quiz-rationale b {
    color: var(--color-white);
    font-weight: 600
}

.quiz-report-meta {
    border-top: 1px solid var(--color-border);
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .04em;
    color: var(--color-muted);
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    padding-top: 18px;
    display: flex
}

.quiz-report-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    display: flex
}

.quiz-bd-mast {
    max-width: 58ch;
    margin-bottom: 20px
}

.quiz-bd-mast h3 {
    font: 700 clamp(30px, 4.6vw, 48px)/1.03 var(--font-display);
    letter-spacing: -.035em;
    color: var(--color-white);
    text-wrap: balance;
    margin: 0 0 18px
}

.quiz-bd-mast p {
    font: 400 16px/1.7 var(--font-body);
    color: var(--color-muted);
    text-wrap: pretty;
    margin: 0
}

.quiz-bd-index {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 40px 0 8px;
    padding: 0;
    list-style: none;
    display: flex
}

.quiz-bd-index li {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted);
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    display: flex
}

.quiz-bd-index li:last-child {
    border-right: 0
}

.quiz-bd-index li i {
    opacity: .9;
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px
}

.quiz-bd-index li i.build {
    background: var(--color-violet)
}

.quiz-bd-index li i.buy {
    background: var(--color-success)
}

.quiz-bd-index li i.hybrid {
    background: var(--gradient-brand)
}

.quiz-entry {
    border-top: 1px solid var(--color-border);
    break-inside: avoid;
    grid-template-columns: 56px 1fr;
    column-gap: 28px;
    padding: 44px 0;
    display: grid
}

.quiz-entry:first-of-type {
    border-top: 0;
    padding-top: 36px
}

.quiz-entry-num {
    font: 700 clamp(34px, 4vw, 46px)/1 var(--font-display);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: #f3f3f338
}

@supports (color:color-mix(in lab, red, red)) {
    .quiz-entry-num {
        color: color-mix(in srgb, var(--color-white) 22%, transparent)
    }
}

.quiz-entry-body {
    min-width: 0
}

.quiz-entry-meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    display: flex
}

.quiz-entry-lens {
    font: 600 11px/1.3 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted)
}

.quiz-entry-lean {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    flex: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    display: inline-flex
}

.quiz-entry-lean i {
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px
}

.quiz-entry-lean.build {
    color: var(--color-violet)
}

.quiz-entry-lean.build i {
    background: var(--color-violet)
}

.quiz-entry-lean.buy {
    color: var(--color-success)
}

.quiz-entry-lean.buy i {
    background: var(--color-success)
}

.quiz-entry-lean.hybrid {
    color: var(--color-lavender)
}

.quiz-entry-lean.hybrid i {
    background: var(--gradient-brand)
}

.quiz-entry-prompt {
    font: 700 clamp(23px, 3vw, 32px)/1.16 var(--font-display);
    letter-spacing: -.025em;
    color: var(--color-white);
    text-wrap: balance;
    margin: 0 0 20px
}

.quiz-entry-ans {
    font: 400 15.5px/1.65 var(--font-body);
    color: var(--color-muted);
    text-wrap: pretty;
    max-width: 60ch;
    margin: 0 0 30px
}

.quiz-entry-ans .lbl {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-right: 10px
}

.quiz-entry-ans .pick {
    color: var(--color-white);
    font-weight: 600
}

.quiz-entry-ans .pick+.pick:before {
    content: "·";
    color: var(--color-muted);
    margin: 0 9px;
    font-weight: 400
}

.quiz-entry-block {
    max-width: 62ch;
    margin-bottom: 26px
}

.quiz-entry-block:last-child {
    margin-bottom: 0
}

.quiz-entry-sub {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0 0 11px
}

.quiz-entry-sub.logic {
    color: var(--color-lavender)
}

.quiz-entry-sub.logic.build {
    color: var(--color-violet)
}

.quiz-entry-sub.logic.buy {
    color: var(--color-success)
}

.quiz-entry-sub.logic.hybrid {
    color: var(--color-lavender)
}

.quiz-entry-prose {
    font: 400 15.5px/1.72 var(--font-body);
    color: var(--color-white);
    text-wrap: pretty;
    margin: 0
}

.quiz-scroll-cue {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-muted);
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 56px 0 0;
    display: flex
}

.quiz-scroll-cue svg {
    opacity: .7;
    width: 15px;
    height: 15px;
    transform: rotate(90deg)
}

.quiz-detail-actions {
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 52px;
    padding-top: 36px;
    display: flex
}

@media print {
    @page {
        size: A4;
        margin: 16mm
    }

    body,
    .quiz {
        background: #fff !important;
        height: auto !important;
        overflow: visible !important
    }

    .quiz:before,
    .quiz-top,
    .quiz-foot,
    .quiz-report-actions,
    .quiz-detail-actions,
    .quiz-scroll-cue {
        display: none !important
    }

    .quiz-stage {
        padding: 0 !important;
        display: block !important;
        overflow: visible !important
    }

    .quiz-screen {
        color: #15161b !important;
        opacity: 1 !important;
        filter: none !important;
        max-width: 100% !important;
        transform: none !important
    }

    .quiz-screen .eyebrow,
    .quiz-screen .quiz-report-head .sub,
    .quiz-screen .quiz-bar-label,
    .quiz-screen .quiz-score-cap,
    .quiz-screen .quiz-report-meta {
        color: #5d6170 !important
    }

    .quiz-screen .quiz-report-head h2,
    .quiz-screen .quiz-rationale,
    .quiz-screen .quiz-rationale b,
    .quiz-screen .quiz-bar-pct {
        color: #15161b !important
    }

    .quiz-verdict-path.build {
        color: #6000ff !important;
        -webkit-text-fill-color: #6000ff !important
    }

    .quiz-verdict-path.buy {
        color: #1a9c63 !important;
        -webkit-text-fill-color: #1a9c63 !important
    }

    .quiz-verdict-path.hybrid,
    .quiz-score-num {
        -webkit-text-fill-color: #6000ff !important;
        color: #6000ff !important;
        background: 0 0 !important
    }

    .quiz-score-card {
        box-shadow: none !important;
        background: #f7f6fb !important;
        border: 1px solid #e4e2ee !important
    }

    .quiz-bar-track {
        background: #ecebf3 !important
    }

    .quiz-bd-mast h3,
    .quiz-entry-prompt,
    .quiz-entry-prose,
    .quiz-entry-ans .pick {
        color: #15161b !important
    }

    .quiz-bd-mast p,
    .quiz-entry-lens,
    .quiz-entry-ans,
    .quiz-entry-ans .lbl,
    .quiz-entry-sub {
        color: #5d6170 !important
    }

    .quiz-entry,
    .quiz-bd-index {
        border-color: #e4e2ee !important
    }

    .quiz-entry-num {
        color: #c3c1d6 !important
    }

    .quiz-entry-lean.build,
    .quiz-entry-sub.logic.build {
        color: #6000ff !important
    }

    .quiz-entry-lean.buy,
    .quiz-entry-sub.logic.buy {
        color: #1a9c63 !important
    }

    .quiz-entry-lean.hybrid,
    .quiz-entry-sub.logic.hybrid {
        color: #6000ff !important
    }

    .quiz-entry-lean.build i {
        background: #6000ff !important
    }

    .quiz-entry-lean.buy i {
        background: #1a9c63 !important
    }

    .quiz-entry-lean.hybrid i {
        background: #6000ff !important
    }
}

@media (prefers-reduced-motion:reduce) {
    .quiz:before {
        animation: none !important
    }

    .quiz-screen,
    .quiz-progress i,
    .quiz-bar-fill,
    .quiz-opt,
    .btn,
    .rise>* {
        transition-duration: 80ms !important;
        animation: none !important
    }

    .quiz-screen.leave,
    .quiz-screen.arrive {
        opacity: 1;
        filter: none;
        transform: none
    }
}

@media (width<=560px) {
    .quiz-opt {
        gap: 14px;
        padding: 18px
    }

    .quiz-opt-key {
        width: 26px;
        height: 26px
    }

    .quiz-verdict-row {
        align-items: flex-start
    }

    .quiz-bar-row {
        grid-template-columns: 64px 1fr 40px
    }

    .quiz-hint {
        display: none
    }

    .quiz-entry {
        grid-template-columns: 40px 1fr;
        column-gap: 18px;
        padding: 36px 0
    }

    .quiz-entry-num {
        font-size: 30px
    }

    .quiz-entry-lean {
        margin-left: 0
    }
}

.ts-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 96px) 24px
}

.ts-container {
    max-width: 1200px
}

.ts-head {
    max-width: 760px;
    margin-bottom: 40px
}

.ts-eyebrow {
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-lavender);
    margin: 0 0 12px;
    font-size: 12px
}

.ts-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin: 0;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.05
}

.ts-sub {
    color: var(--color-muted);
    max-width: 620px;
    margin: 16px 0 0;
    font-size: 17px
}

.ts-gallery {
    position: relative
}

.ts-viewport {
    border-radius: 14px;
    overflow: hidden
}

.ts-track {
    will-change: transform;
    gap: 24px;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    display: flex
}

.ts-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    flex: 0 0 calc(33.3333% - 16px);
    min-width: 0;
    transition: border-color .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden
}

.ts-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-4px)
}

.ts-media {
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(45deg, #f3f3f30a 0 12px, transparent 12px 24px), var(--color-bg);
    position: relative
}

@supports (color:color-mix(in lab, red, red)) {
    .ts-media {
        background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-white) 4%, transparent) 0 12px, transparent 12px 24px), var(--color-bg)
    }
}

.ts-media {
    place-items: center;
    display: grid;
    overflow: hidden
}

.ts-media video,
.ts-media img,
.ts-media .ts-img,
.ts-media .ts-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

[data-theme=light] .ts-img.t-dark,
.ts-img.t-light {
    display: none
}

[data-theme=light] .ts-img.t-light {
    display: block
}

.ts-placeholder {
    z-index: 1;
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 12px;
    position: relative
}

.ts-play {
    cursor: pointer;
    background: var(--color-violet);
    width: 72px;
    height: 72px;
    color: var(--color-on-accent);
    border: none;
    border-radius: 999px;
    place-items: center;
    margin: auto;
    display: grid;
    position: absolute;
    inset: 0;
    box-shadow: 0 8px 28px -6px #6000ffb3
}

@supports (color:color-mix(in lab, red, red)) {
    .ts-play {
        box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--color-violet) 70%, transparent)
    }
}

.ts-play {
    z-index: 2;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), background .2s cubic-bezier(.16, 1, .3, 1)
}

.ts-play:after {
    content: "";
    border: 2px solid #6000ff73;
    border-radius: 999px;
    position: absolute;
    inset: -8px
}

@supports (color:color-mix(in lab, red, red)) {
    .ts-play:after {
        border: 2px solid color-mix(in srgb, var(--color-violet) 45%, transparent)
    }
}

.ts-play:after {
    animation: 2.4s cubic-bezier(.16, 1, .3, 1) infinite ts-pulse
}

@keyframes ts-pulse {
    0% {
        opacity: .9;
        transform: scale(.85)
    }

    70% {
        opacity: 0;
        transform: scale(1.25)
    }

    to {
        opacity: 0
    }
}

.ts-play:hover {
    background: #5200d9
}

@supports (color:color-mix(in lab, red, red)) {
    .ts-play:hover {
        background: color-mix(in srgb, var(--color-violet) 85%, #000)
    }
}

.ts-play:hover {
    transform: scale(1.06)
}

.ts-play svg {
    width: 26px;
    height: 26px;
    margin-left: 4px
}

.ts-card.is-photo .ts-play {
    width: 64px;
    height: 64px
}

.ts-body {
    padding: 20px 22px 24px
}

.ts-quote {
    color: var(--color-white);
    margin: 0;
    font-size: 16px;
    line-height: 1.5
}

.ts-name {
    margin: 16px 0 2px;
    font-size: 15px;
    font-weight: 600
}

.ts-role {
    color: var(--color-muted);
    font-size: 13px;
    font-family: var(--font-mono);
    margin: 0
}

.ts-controls {
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    display: flex
}

.ts-dots {
    gap: 10px;
    display: flex
}

.ts-dot {
    background: var(--color-border-strong);
    cursor: pointer;
    border: none;
    border-radius: 999px;
    width: 36px;
    height: 4px;
    padding: 0;
    position: relative;
    overflow: hidden
}

.ts-dot-fill {
    background: var(--color-violet);
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.ts-dot.is-active .ts-dot-fill {
    animation: 5s linear forwards ts-fill-progress
}

@keyframes ts-fill-progress {
    0% {
        width: 0%
    }

    to {
        width: 100%
    }
}

.ts-nav {
    gap: 8px;
    margin-left: auto;
    display: inline-flex
}

.ts-nav button {
    border: 1px solid var(--color-border);
    width: 44px;
    height: 44px;
    color: var(--color-white);
    cursor: pointer;
    background: 0 0;
    border-radius: 8px;
    place-items: center;
    transition: border-color .16s cubic-bezier(.16, 1, .3, 1), background .16s cubic-bezier(.16, 1, .3, 1);
    display: grid
}

.ts-nav button:hover {
    border-color: var(--color-border-strong);
    background: #f3f3f30f
}

@supports (color:color-mix(in lab, red, red)) {
    .ts-nav button:hover {
        background: color-mix(in srgb, var(--color-white) 6%, transparent)
    }
}

.ts-nav svg {
    width: 16px;
    height: 16px
}

.ts-spinner {
    flex: none;
    width: 28px;
    height: 28px;
    transform: rotate(-90deg)
}

.ts-spinner circle {
    fill: none;
    stroke-width: 3px
}

.ts-spin-bg {
    stroke: var(--color-border-strong)
}

.ts-spin-fg {
    stroke: var(--color-violet);
    stroke-linecap: round
}

@media (prefers-reduced-motion:reduce) {
    .ts-track {
        transition: none
    }

    .ts-dot-fill {
        animation: none !important
    }

    .ts-play:after {
        animation: none
    }
}

@media (width<=920px) {
    .ts-card {
        flex-basis: calc(50% - 12px)
    }
}

@media (width<=600px) {
    .ts-card {
        flex-basis: 100%
    }
}

.cs-pe__head {
    max-width: 760px;
    margin-bottom: clamp(24px, 4vw, 40px)
}

.cs-pe {
    position: relative
}

.cs-pe__viewport {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none;
    padding: 6px 2px 20px;
    overflow: auto hidden
}

.cs-pe__viewport::-webkit-scrollbar {
    display: none
}

.cs-pe__viewport:focus-visible {
    box-shadow: 0 0 0 2px var(--color-lavender);
    border-radius: 18px
}

.cs-pe__track {
    gap: clamp(16px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cs-pe__slide {
    scroll-snap-align: center;
    flex: 0 0 clamp(280px, 80%, 880px);
    min-width: 0;
    transition: opacity .32s cubic-bezier(.16, 1, .3, 1)
}

.cs-pe__slide:not(.is-active) {
    opacity: .5
}

.cs-pe__frame {
    border: 1px solid var(--color-border);
    cursor: zoom-in;
    background: repeating-linear-gradient(45deg, #f3f3f30a 0 12px, transparent 12px 24px), var(--color-surface);
    border-radius: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-pe__frame {
        background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-white) 4%, transparent) 0 12px, transparent 12px 24px), var(--color-surface)
    }
}

.cs-pe__frame {
    transition: border-color .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s cubic-bezier(.16, 1, .3, 1)
}

.cs-pe__frame:hover,
.cs-pe__frame:focus-visible {
    border-color: var(--color-border-strong);
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -26px #6000ffa6
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-pe__frame:hover,
    .cs-pe__frame:focus-visible {
        box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--color-violet) 65%, transparent)
    }
}

.cs-pe__frame:hover,
.cs-pe__frame:focus-visible {
    outline: none
}

.cs-pe__frame img {
    aspect-ratio: 16/10;
    object-fit: cover;
    width: 100%;
    transition: transform .62s cubic-bezier(.16, 1, .3, 1);
    display: block
}

.cs-pe__frame:hover img,
.cs-pe__frame:focus-visible img {
    transform: scale(1.045)
}

.cs-pe__cap {
    color: var(--color-white);
    background: linear-gradient(#0000, #000c);
    padding: 30px 18px 14px;
    font-size: 13px;
    line-height: 1.4;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.cs-pe__zoom {
    width: 34px;
    height: 34px;
    color: var(--color-white);
    opacity: 0;
    background: #0000008c;
    border-radius: 999px;
    place-items: center;
    transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1);
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px;
    transform: scale(.9)
}

.cs-pe__frame:hover .cs-pe__zoom,
.cs-pe__frame:focus-visible .cs-pe__zoom {
    opacity: 1;
    transform: scale(1)
}

.cs-pe__zoom svg {
    width: 16px;
    height: 16px
}

.cs-pe__controls {
    align-items: center;
    gap: 20px;
    margin-top: 22px;
    display: flex
}

.cs-pe__dots {
    gap: 10px;
    display: flex
}

.cs-pe__dot {
    background: var(--color-border-strong);
    cursor: pointer;
    border: none;
    border-radius: 999px;
    width: 32px;
    height: 4px;
    padding: 0;
    transition: background .2s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden
}

.cs-pe__dot.is-active {
    background: #8135ff71
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-pe__dot.is-active {
        background: color-mix(in srgb, var(--color-violet) 35%, var(--color-border-strong))
    }
}

.cs-pe__dot-fill {
    background: var(--color-violet);
    transform-origin: 0;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    position: absolute;
    inset: 0;
    transform: scaleX(0)
}

.cs-pe__dot.is-active .cs-pe__dot-fill {
    transform: scaleX(1)
}

.cs-pe__nav {
    gap: 8px;
    margin-left: auto;
    display: inline-flex
}

.cs-pe__navbtn {
    border: 1px solid var(--color-border);
    width: 44px;
    height: 44px;
    color: var(--color-white);
    cursor: pointer;
    background: 0 0;
    border-radius: 10px;
    place-items: center;
    transition: border-color .16s cubic-bezier(.16, 1, .3, 1), background .16s cubic-bezier(.16, 1, .3, 1), transform .16s cubic-bezier(.16, 1, .3, 1);
    display: grid
}

.cs-pe__navbtn:hover {
    border-color: var(--color-border-strong);
    background: #f3f3f30f
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-pe__navbtn:hover {
        background: color-mix(in srgb, var(--color-white) 6%, transparent)
    }
}

.cs-pe__navbtn:hover {
    transform: translateY(-1px)
}

.cs-pe__navbtn svg {
    width: 16px;
    height: 16px
}

.cs-lightbox {
    z-index: 400;
    justify-content: center;
    align-items: center;
    padding: 24px;
    display: flex;
    position: fixed;
    inset: 0
}

.cs-lightbox__backdrop {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #000000d1;
    position: absolute;
    inset: 0
}

.cs-lightbox__panel {
    z-index: 1;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    display: flex;
    position: relative
}

.cs-lightbox__fig {
    flex-direction: column;
    flex: auto;
    align-items: center;
    min-width: 0;
    margin: 0;
    display: flex
}

.cs-lightbox__fig img {
    border-radius: 12px;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    display: block;
    box-shadow: 0 30px 80px -30px #000
}

.cs-lightbox__fig figcaption {
    color: var(--color-muted);
    font-size: 13px;
    font-family: var(--font-mono);
    text-align: center;
    margin-top: 12px
}

.cs-lightbox__close {
    z-index: 3;
    width: 42px;
    height: 42px;
    color: var(--color-white);
    cursor: pointer;
    background: #00000080;
    border: 1px solid #fff3;
    border-radius: 999px;
    place-items: center;
    transition: background .16s cubic-bezier(.16, 1, .3, 1), transform .16s cubic-bezier(.16, 1, .3, 1);
    display: grid;
    position: fixed;
    top: 18px;
    right: 18px
}

.cs-lightbox__close:hover {
    background: #000000b3;
    transform: rotate(90deg)
}

.cs-lightbox__close svg {
    width: 18px;
    height: 18px
}

.cs-lightbox__arrow {
    width: 48px;
    height: 48px;
    color: var(--color-white);
    cursor: pointer;
    background: #00000073;
    border: 1px solid #fff3;
    border-radius: 999px;
    flex: none;
    place-items: center;
    transition: background .16s cubic-bezier(.16, 1, .3, 1), transform .16s cubic-bezier(.16, 1, .3, 1);
    display: grid
}

.cs-lightbox__arrow:hover {
    background: #000000ad;
    transform: scale(1.06)
}

.cs-lightbox__arrow svg {
    width: 18px;
    height: 18px
}

@media (width<=600px) {
    .cs-pe__slide {
        flex-basis: 86%
    }

    .cs-lightbox {
        padding: 14px
    }

    .cs-lightbox__arrow {
        width: 40px;
        height: 40px
    }
}

@media (prefers-reduced-motion:reduce) {

    .cs-pe__slide,
    .cs-pe__frame,
    .cs-pe__frame img,
    .cs-pe__zoom,
    .cs-pe__dot,
    .cs-pe__dot-fill,
    .cs-pe__navbtn,
    .cs-lightbox__close,
    .cs-lightbox__arrow {
        transition: none
    }

    .cs-pe__viewport {
        scroll-behavior: auto
    }
}

.cs-evidence__head {
    max-width: 760px;
    margin-bottom: clamp(24px, 4vw, 40px)
}

.cs-evidence {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(138px, 16vw, 250px);
    gap: clamp(10px, 1.4vw, 18px);
    display: grid
}

.cs-evidence__tile {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    min-width: 0;
    min-height: 0;
    color: var(--color-white);
    cursor: zoom-in;
    isolation: isolate;
    text-align: left;
    border-radius: 16px;
    padding: 0;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s cubic-bezier(.16, 1, .3, 1);
    display: block;
    position: relative;
    overflow: hidden
}

.cs-evidence__tile--lead {
    grid-area: span 2/span 2
}

.cs-evidence__tile--landscape {
    grid-column: span 2
}

.cs-evidence__tile--portrait {
    grid-row: span 2
}

.cs-evidence--1 .cs-evidence__tile {
    grid-area: span 2/1/auto/-1
}

.cs-evidence--2 .cs-evidence__tile {
    grid-area: span 2/span 2
}

.cs-evidence--3 .cs-evidence__tile:not(.cs-evidence__tile--lead) {
    grid-column: span 2
}

.cs-evidence__tile img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .62s cubic-bezier(.16, 1, .3, 1);
    display: block
}

.cs-evidence__veil {
    z-index: 1;
    opacity: .88;
    pointer-events: none;
    background: linear-gradient(#0000 44%, #05050ad1 100%);
    position: absolute;
    inset: 0
}

.cs-evidence__caption {
    z-index: 2;
    color: var(--color-white);
    font-size: 13px;
    line-height: 1.35;
    font-family: var(--font-mono);
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px
}

.cs-evidence__expand {
    z-index: 2;
    border: 1px solid #f3f3f34d;
    padding: 7px 9px;
    position: absolute;
    top: 12px;
    right: 12px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-evidence__expand {
        border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent)
    }
}

.cs-evidence__expand {
    color: var(--color-white);
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    background: #05050a9e;
    border-radius: 999px;
    transition: opacity .18s, transform .18s;
    transform: translateY(-5px)
}

.cs-evidence__tile:hover,
.cs-evidence__tile:focus-visible {
    z-index: 1;
    border-color: #c96df7b8
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-evidence__tile:hover,
    .cs-evidence__tile:focus-visible {
        border-color: color-mix(in srgb, var(--color-lavender) 70%, var(--color-border))
    }
}

.cs-evidence__tile:hover,
.cs-evidence__tile:focus-visible {
    box-shadow: 0 24px 52px -30px #6000ffbf
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-evidence__tile:hover,
    .cs-evidence__tile:focus-visible {
        box-shadow: 0 24px 52px -30px color-mix(in srgb, var(--color-violet) 75%, transparent)
    }
}

.cs-evidence__tile:hover,
.cs-evidence__tile:focus-visible {
    outline: none;
    transform: translateY(-4px)
}

.cs-evidence__tile:hover img,
.cs-evidence__tile:focus-visible img {
    transform: scale(1.045)
}

.cs-evidence__tile:hover .cs-evidence__expand,
.cs-evidence__tile:focus-visible .cs-evidence__expand {
    opacity: 1;
    transform: translateY(0)
}

.cs-section-split {
    grid-template-columns: minmax(0, 760px);
    gap: clamp(24px, 4vw, 54px);
    display: grid
}

.cs-section-split--with-media {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr);
    align-items: start
}

.cs-section-visual {
    min-width: 0;
    margin: 0
}

.cs-section-visual__frame {
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, #271b44, var(--color-surface));
    border-radius: 18px;
    padding: clamp(8px, 1vw, 12px);
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual__frame {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 13%, var(--color-surface)), var(--color-surface))
    }
}

.cs-section-visual__frame {
    box-shadow: 0 24px 56px -34px #6000ffb8
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual__frame {
        box-shadow: 0 24px 56px -34px color-mix(in srgb, var(--color-violet) 72%, transparent)
    }
}

.cs-section-visual__frame img {
    aspect-ratio: 4/3;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 10px;
    width: 100%;
    display: block
}

.cs-section-visual__btn {
    cursor: zoom-in;
    background: 0 0;
    border: none;
    outline: none;
    width: 100%;
    padding: 0
}

.cs-section-visual__btn:focus-visible {
    box-shadow: 0 0 0 3px var(--color-violet);
    border-radius: 10px
}

.cs-section-visual figcaption {
    color: var(--color-muted);
    font: 12px/1.45 var(--font-mono);
    margin: 12px 4px 0
}

.cs-section-visual--placeholder .cs-section-visual__frame {
    background: linear-gradient(135deg, #6000ff1a, transparent 55%), repeating-linear-gradient(135deg, #ffffff09 0 1px, transparent 1px 16px), var(--color-surface);
    border-style: dashed;
    place-items: center;
    min-height: clamp(280px, 31vw, 420px);
    display: grid
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual--placeholder .cs-section-visual__frame {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 10%, transparent), transparent 55%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-border) 48%, transparent) 0 1px, transparent 1px 16px), var(--color-surface)
    }
}

.cs-section-visual--placeholder .cs-section-visual__frame {
    box-shadow: inset 0 0 0 8px #252635b8
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual--placeholder .cs-section-visual__frame {
        box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--color-surface-2) 72%, transparent)
    }
}

.cs-section-visual__placeholder-mark {
    color: #bb78e3;
    position: absolute;
    top: 20px;
    left: 22px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual__placeholder-mark {
        color: color-mix(in srgb, var(--color-lavender) 72%, var(--color-muted))
    }
}

.cs-section-visual__placeholder-mark {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 10px
}

.cs-section-visual__placeholder-icon {
    aspect-ratio: 4/3;
    border: 1px solid #cb74f87f;
    width: clamp(62px, 7vw, 88px);
    display: block;
    position: relative
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual__placeholder-icon {
        border: 1px solid color-mix(in srgb, var(--color-lavender) 46%, var(--color-border))
    }
}

.cs-section-visual__placeholder-icon {
    background: #292441;
    border-radius: 12px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-section-visual__placeholder-icon {
        background: color-mix(in srgb, var(--color-violet) 6%, var(--color-surface-2))
    }
}

.cs-section-visual__placeholder-icon:before {
    content: "";
    aspect-ratio: 1;
    border: 1px solid var(--color-pink);
    border-radius: 50%;
    width: 10px;
    position: absolute;
    top: 15px;
    right: 16px
}

.cs-section-visual__placeholder-icon span {
    border-left: 1px solid var(--color-lavender);
    border-top: 1px solid var(--color-lavender);
    opacity: .72;
    height: 42%;
    position: absolute;
    inset: auto 10px 10px;
    transform: skewY(-24deg)
}

.cs-lightbox {
    z-index: 1000;
    place-items: center;
    padding: clamp(18px, 4vw, 48px);
    display: grid;
    position: fixed;
    inset: 0
}

.cs-lightbox[x-cloak] {
    display: none !important
}

.cs-lightbox__backdrop {
    cursor: default;
    background: #040409e6;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    inset: 0
}

.cs-lightbox__panel {
    z-index: 1;
    width: min(1180px, 100%);
    position: relative
}

.cs-lightbox__figure {
    text-align: center;
    min-width: 0;
    margin: 0
}

.cs-lightbox__figure img {
    border-radius: 12px;
    width: auto;
    max-width: 100%;
    max-height: min(78vh, 880px);
    margin: 0 auto;
    display: block;
    box-shadow: 0 28px 90px -28px #000
}

.cs-lightbox__figure figcaption {
    color: var(--color-muted);
    font: 12px/1.45 var(--font-mono);
    margin-top: 12px
}

.cs-lightbox__close,
.cs-lightbox__arrow {
    border: 1px solid #f3f3f347;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-lightbox__close,
    .cs-lightbox__arrow {
        border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent)
    }
}

.cs-lightbox__close,
.cs-lightbox__arrow {
    background: #15161bc7;
    border-radius: 999px
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-lightbox__close,
    .cs-lightbox__arrow {
        background: color-mix(in srgb, var(--color-deep) 78%, transparent)
    }
}

.cs-lightbox__close,
.cs-lightbox__arrow {
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 12px 32px -16px #191a1fe0
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-lightbox__close,
    .cs-lightbox__arrow {
        box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--color-bg) 88%, transparent)
    }
}

.cs-lightbox__close,
.cs-lightbox__arrow {
    transition: border-color .18s, background .18s, color .18s, transform .18s
}

.cs-lightbox__close svg,
.cs-lightbox__arrow svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 18px;
    height: 18px
}

.cs-lightbox__close {
    z-index: 3;
    position: fixed;
    top: 18px;
    right: 18px
}

.cs-lightbox__arrow {
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.cs-lightbox__arrow--previous,
.cs-lightbox__arrow--prev {
    left: 14px
}

.cs-lightbox__arrow--next {
    right: 14px
}

.cs-lightbox__close:hover,
.cs-lightbox__close:focus-visible {
    border-color: var(--color-pink);
    background: #390b88
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-lightbox__close:hover,
    .cs-lightbox__close:focus-visible {
        background: color-mix(in srgb, var(--color-violet) 48%, var(--color-deep))
    }
}

.cs-lightbox__close:hover,
.cs-lightbox__close:focus-visible {
    color: var(--color-on-accent);
    outline: none;
    transform: rotate(90deg)
}

.cs-lightbox__arrow:hover,
.cs-lightbox__arrow:focus-visible {
    border-color: var(--color-pink);
    background: #390b88
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-lightbox__arrow:hover,
    .cs-lightbox__arrow:focus-visible {
        background: color-mix(in srgb, var(--color-violet) 48%, var(--color-deep))
    }
}

.cs-lightbox__arrow:hover,
.cs-lightbox__arrow:focus-visible {
    color: var(--color-on-accent);
    outline: none;
    transform: translateY(-50%)scale(1.08)
}

@media (width<=860px) {
    .cs-section-split--with-media {
        grid-template-columns: minmax(0, 1fr)
    }

    .cs-section-visual {
        max-width: 720px
    }

    .cs-evidence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(150px, 38vw, 260px)
    }

    .cs-evidence__tile--lead {
        grid-area: span 2/1/auto/-1
    }

    .cs-evidence__tile--landscape {
        grid-column: 1/-1
    }
}

@media (width<=600px) {
    .cs-evidence {
        grid-template-columns: 1fr;
        grid-auto-rows: auto
    }

    .cs-evidence__tile,
    .cs-evidence__tile--lead,
    .cs-evidence__tile--landscape,
    .cs-evidence__tile--portrait,
    .cs-evidence--1 .cs-evidence__tile,
    .cs-evidence--2 .cs-evidence__tile,
    .cs-evidence--3 .cs-evidence__tile:not(.cs-evidence__tile--lead) {
        grid-area: auto/1;
        min-height: 220px
    }

    .cs-lightbox {
        padding: 12px
    }

    .cs-lightbox__arrow {
        width: 40px;
        height: 40px
    }

    .cs-lightbox__arrow--previous,
    .cs-lightbox__arrow--prev {
        left: 8px
    }

    .cs-lightbox__arrow--next {
        right: 8px
    }

    .cs-lightbox__close {
        width: 40px;
        height: 40px;
        top: 12px;
        right: 12px
    }
}

@media (prefers-reduced-motion:reduce) {

    .cs-evidence__tile,
    .cs-evidence__tile img,
    .cs-evidence__expand {
        transition: none
    }
}

.hero__net {
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.hero__ripple {
    z-index: 2;
    pointer-events: none;
    border: 2px solid #c769f7cc;
    border-radius: 999px;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    position: absolute
}

@supports (color:color-mix(in lab, red, red)) {
    .hero__ripple {
        border: 2px solid color-mix(in srgb, var(--color-lavender) 80%, transparent)
    }
}

.hero__ripple {
    opacity: .9;
    transform: scale(0)
}

.hero__ripple.go {
    animation: .7s cubic-bezier(.16, 1, .3, 1) forwards hero-ripple
}

@keyframes hero-ripple {
    0% {
        opacity: .9;
        transform: scale(0)
    }

    to {
        opacity: 0;
        transform: scale(26)
    }
}

@media (prefers-reduced-motion:reduce) {
    .hero__ripple {
        animation: none !important
    }
}

@media (width<=600px) {
    .cs-cover {
        min-height: 350px;
        padding: 32px 20px
    }
}

.cs-cover {
    isolation: isolate;
    align-items: flex-end;
    min-height: clamp(420px, 64vh, 680px);
    padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 64px);
    display: flex;
    position: relative;
    overflow: hidden
}

.cs-cover__img {
    z-index: 0;
    background: linear-gradient(135deg, #2e1262, var(--color-bg));
    position: absolute;
    inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cover__img {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 30%, var(--color-bg)), var(--color-bg))
    }
}

.cs-cover__img {
    will-change: transform;
    background-position: 50%;
    background-size: cover;
    place-items: center;
    display: grid
}

.cs-cover__img.has-photo {
    background-blend-mode: normal
}

.cs-cover__slot {
    z-index: 1;
    font-family: var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    position: relative
}

.cs-cover__scrim {
    z-index: 1;
    pointer-events: none;
    background: #191a1fb3;
    position: absolute;
    inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cover__scrim {
        background: color-mix(in srgb, var(--color-bg) 85%, transparent)
    }
}

.cs-cover__grain {
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: .06;
    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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0
}

.cs-cover__inner {
    z-index: 4;
    text-align: left;
    flex-direction: column;
    align-items: start;
    width: 100%;
    max-width: 820px;
    display: flex;
    position: relative;
    margin-left: 263px;
}

.cs-cover__tags {
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
    margin-bottom: 18px;
    display: flex
}

.cs-tag {
    background: #1e1f28b3;
    border-radius: 999px;
    align-items: center;
    padding: 5px 11px;
    display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-tag {
        background: color-mix(in srgb, var(--color-surface) 80%, transparent)
    }
}

.cs-tag {
    border: 1px solid #ffffff0b
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-tag {
        border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent)
    }
}

.cs-tag {
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-white);
    font-size: 11px;
    font-weight: 500
}

.cs-tag--evidence {
    color: var(--color-white);
    border-color: #6d14ff7d
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-tag--evidence {
        border-color: color-mix(in srgb, var(--color-violet) 45%, var(--color-border))
    }
}

.cs-tag--evidence:before {
    content: "";
    background: var(--color-violet);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin-right: 6px
}

.cs-cover__title {
    font-family: var(--font-display);
    letter-spacing: -.025em;
    color: var(--color-white);
    text-shadow: 0 2px 12px #0000008c;
    max-width: 22ch;
    margin: 0 0 18px;
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 700;
    line-height: 1.04
}

.cs-cover__sub {
    color: var(--color-white);
    max-width: 54ch;
    margin: 0 0 22px;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 500;
    line-height: 1.5
}

.cs-cover__meta {
    font-family: var(--font-mono);
    letter-spacing: .06em;
    color: var(--color-white);
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 500;
    display: flex
}

.cs-cover__img {
    transform: scale(1.06) translateY(var(--py, 0))
}

@media (prefers-reduced-motion:reduce) {
    .cs-cover__img {
        transform: none !important
    }
}

.cs-read {
    max-width: 720px
}

.cs-prose {
    font-family: var(--font-body);
    color: var(--color-white);
    font-size: 1.0625rem;
    line-height: 1.75
}

.cs-prose :where(p, ul, ol)+:where(p, ul, ol) {
    margin-top: 1.1em
}

.cs-prose :where(h2, h3) {
    font-family: var(--font-display);
    color: var(--color-white)
}

.cs-results-head {
    max-width: 680px;
    margin-bottom: 32px
}

.cs-results-head .wp-eyebrow {
    margin-bottom: 16px
}

.cs-results-intro {
    max-width: 58ch;
    color: var(--color-muted);
    font: 16px/1.55 var(--font-body);
    margin: 16px 0 0
}

.cs-key-results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid
}

.cs-key-results--count-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px
}

.cs-key-results--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px
}

.cs-key-results--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.cs-result {
    border-top: 1px solid var(--color-border);
    flex-direction: column;
    min-width: 0;
    min-height: 248px;
    padding: 26px 36px 12px 22px;
    display: flex;
    position: relative
}

.cs-result:last-child {
    padding-right: 0
}

.cs-result:before {
    content: "";
    background: #9e66fa;
    width: 1px;
    height: 9px;
    position: absolute;
    top: -1px;
    left: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result:before {
        background: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark {
    width: 58px;
    height: 30px;
    margin-bottom: 16px;
    overflow: visible
}

.cs-result__spark polyline,
.cs-result__spark line,
.cs-result__spark path {
    fill: none;
    stroke-width: 1.6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 96;
    stroke-dashoffset: 96px
}

.cs-reveal.in .cs-result__spark polyline,
.cs-reveal.in .cs-result__spark line,
.cs-reveal.in .cs-result__spark path {
    animation: cs-result-draw .7s var(--ease-reveal) forwards;
    animation-delay: calc(var(--kr-index) * 70ms + .14s)
}

.cs-result__spark.v-up polyline,
.cs-result__spark.v-up line {
    stroke: var(--color-lavender)
}

.cs-result__spark.v-up .node {
    fill: var(--color-lavender);
    stroke: none
}

.cs-result__spark.v-down polyline,
.cs-result__spark.v-down line {
    stroke: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-result__spark.v-down polyline,
    .cs-result__spark.v-down line {
        stroke: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-down .node {
    fill: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__spark.v-down .node {
        fill: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-down .node {
    stroke: none
}

.cs-result__spark.v-map .grid {
    stroke: var(--color-border-strong);
    stroke-width: 1px
}

.cs-result__spark.v-map .node {
    fill: none;
    stroke: var(--color-muted);
    stroke-width: 1.3px
}

.cs-result__spark.v-map .live {
    fill: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__spark.v-map .live {
        fill: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-map .live {
    stroke: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__spark.v-map .live {
        stroke: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-map .live {
    stroke-dasharray: none;
    stroke-dashoffset: 0
}

.cs-result__spark.v-gauge .arc {
    stroke: var(--color-border-strong)
}

.cs-result__spark.v-gauge .tick {
    stroke: var(--color-muted);
    stroke-width: 1.3px
}

.cs-result__spark.v-gauge .needle {
    stroke: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__spark.v-gauge .needle {
        stroke: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-gauge .needle {
    stroke-width: 2px
}

.cs-result__spark.v-gauge .hub {
    fill: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__spark.v-gauge .hub {
        fill: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result__spark.v-gauge .hub {
    stroke: none
}

.cs-result__number {
    color: var(--color-white);
    font: 700 clamp(38px, 4.4vw, 60px)/.98 var(--font-display);
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    margin: 0
}

.cs-result__number span {
    letter-spacing: 0;
    margin-left: .1em;
    font-size: .5em;
    font-weight: 600
}

.cs-result.is-accent .cs-result__number {
    color: #9e66fa
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result.is-accent .cs-result__number {
        color: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-result.is-lav .cs-result__number {
    color: var(--color-lavender)
}

.cs-result__label {
    max-width: 26ch;
    color: var(--color-muted);
    font: 13px/1.5 var(--font-body);
    margin: 14px 0 0
}

.cs-result__context {
    max-width: 28ch;
    color: var(--color-white);
    font: 12px/1.45 var(--font-body);
    margin: 7px 0 0
}

.cs-result__source {
    max-width: 28ch;
    color: var(--color-muted);
    font: 10px/1.45 var(--font-mono);
    margin: 7px 0 0
}

.cs-result__evidence {
    color: var(--color-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 10px;
    display: inline-flex
}

.cs-result__evidence:before {
    content: "";
    background: #9e66fa;
    border-radius: 50%;
    flex: none;
    width: 6px;
    height: 6px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-result__evidence:before {
        background: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-key-results.cs-reveal.in .cs-result {
    animation: cs-result-rise .52s var(--ease-reveal) both;
    animation-delay: calc(var(--kr-index) * 70ms)
}

.cs-key-results-section .cs-empty-line svg {
    fill: none;
    stroke: #9e66fa;
    flex: none;
    width: 20px;
    height: 20px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-key-results-section .cs-empty-line svg {
        stroke: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-key-results-section .cs-empty-line svg {
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round
}

@keyframes cs-result-draw {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes cs-result-rise {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (width<=760px) {
    .cs-key-results {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cs-key-results--count-1 {
        grid-template-columns: minmax(0, 1fr)
    }

    .cs-result {
        min-height: 226px;
        padding: 22px 28px 10px 18px
    }
}

@media (width<=560px) {
    .cs-key-results {
        grid-template-columns: 1fr
    }

    .cs-result {
        min-height: 216px;
        padding-right: 0
    }

    .cs-result__label,
    .cs-result__context,
    .cs-result__source {
        max-width: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .cs-key-results.cs-reveal.in .cs-result,
    .cs-reveal.in .cs-result__spark polyline,
    .cs-reveal.in .cs-result__spark line,
    .cs-reveal.in .cs-result__spark path {
        animation: none
    }

    .cs-result__spark polyline,
    .cs-result__spark line,
    .cs-result__spark path {
        stroke-dashoffset: 0
    }
}

.cs-card-metrics {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    display: flex
}

.cs-card-metric {
    border: 1px solid var(--color-border);
    background: #1e1f28db;
    border-radius: 10px;
    flex: 145px;
    min-width: 0;
    padding: 12px 14px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-card-metric {
        background: color-mix(in srgb, var(--color-surface) 86%, transparent)
    }
}

.cs-card-metric strong {
    color: var(--color-lavender);
    font: 700 22px/1 var(--font-display);
    display: block
}

.cs-card-metric strong small {
    font: 700 10px/1 var(--font-mono);
    margin-left: .12em
}

.cs-card-metric span {
    color: var(--color-muted);
    font: 10px/1.35 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
    display: block
}

.cs-results-fallback {
    border: 1px dashed var(--color-border-strong);
    max-width: 720px;
    color: var(--color-muted);
    border-radius: 14px;
    padding: 22px 24px;
    font-size: 15px
}

.cs-meta-bar__grid {
    flex-wrap: wrap;
    gap: 12px 32px;
    display: flex
}

.cs-meta-bar__grid>div {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.cs-meta-bar__grid .k {
    font-family: var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 10.5px
}

.cs-meta-bar__grid .v {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600
}

.cs-signal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 1px 2px #f3f3f314
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-signal {
        box-shadow: 0 1px 2px color-mix(in srgb, var(--color-white) 8%, transparent)
    }
}

.cs-signal__title {
    font-family: var(--font-display);
    letter-spacing: -.015em;
    color: var(--color-white);
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700
}

.cs-signal__list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none
}

.cs-signal__item {
    border-top: 1px solid var(--color-border);
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    display: flex
}

.cs-signal__item:first-child {
    border-top: 0
}

.cs-signal__step {
    font-family: var(--font-mono);
    color: var(--color-violet);
    font-variant-numeric: tabular-nums;
    flex: none;
    min-width: 30px;
    font-size: 13px;
    font-weight: 600
}

.cs-signal__text {
    color: var(--color-white);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.5
}

.cs-signal--mini .cs-signal__item {
    align-items: center;
    gap: 14px
}

.cs-check {
    border: 1.5px solid var(--color-border-strong);
    border-radius: 6px;
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-block
}

.cs-criteria {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 28px;
    display: grid
}

@media (width<=760px) {
    .cs-criteria {
        grid-template-columns: 1fr
    }
}

.cs-criterion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px
}

.cs-criterion__tag {
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
    font-size: 10.5px;
    display: inline-block
}

.cs-criterion h3 {
    margin: 0 0 4px;
    font-size: 16px
}

.cs-criterion p {
    color: var(--color-muted);
    margin: 0;
    font-size: 14.5px
}

.cs-caps {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    display: grid
}

@media (width<=1040px) {
    .cs-caps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width<=760px) {
    .cs-caps {
        grid-template-columns: 1fr
    }
}

.cs-cap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px
}

.cs-cap__step {
    font-family: var(--font-mono);
    color: var(--color-violet);
    font-size: 12px
}

.cs-cap h3 {
    margin: 8px 0 6px;
    font-size: 16.5px
}

.cs-cap p {
    color: var(--color-muted);
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.5
}

.cs-cap__ev {
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 10.5px
}

.cs-stack-heading {
    margin-bottom: clamp(28px, 4vw, 44px)
}

.cs-stack-terminal {
    --stack-accent: var(--color-violet);
    border: 1px solid #d184f84b;
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal {
        border: 1px solid color-mix(in srgb, var(--color-lavender) 24%, var(--color-border))
    }
}

.cs-stack-terminal {
    background: #1e1f28f0;
    border-radius: 18px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal {
        background: color-mix(in srgb, var(--color-surface) 94%, transparent)
    }
}

.cs-stack-terminal {
    box-shadow: 0 30px 80px -52px #6000ffd1, inset 0 1px #f3f3f312
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal {
        box-shadow: 0 30px 80px -52px color-mix(in srgb, var(--color-violet) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-white) 7%, transparent)
    }
}

.cs-stack-terminal:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 82% 0, #6000ff29, #0000 34%), linear-gradient(135deg, #0000 52%, #e64e900d);
    position: absolute;
    inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal:before {
        background: radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--color-violet) 16%, transparent), transparent 34%), linear-gradient(135deg, transparent 52%, color-mix(in srgb, var(--color-pink) 5%, transparent))
    }
}

.cs-stack-terminal__bar {
    z-index: 1;
    border-bottom: 1px solid var(--color-border);
    background: #1a1b20;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 50px;
    padding: 12px 18px;
    display: grid;
    position: relative
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal__bar {
        background: color-mix(in srgb, var(--color-bg) 88%, var(--color-surface))
    }
}

.cs-stack-terminal__lights {
    gap: 7px;
    display: flex
}

.cs-stack-terminal__lights i {
    aspect-ratio: 1;
    background: var(--color-violet);
    border-radius: 50%;
    width: 9px;
    display: block;
    box-shadow: 0 0 12px #6000ffb3
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal__lights i {
        box-shadow: 0 0 12px color-mix(in srgb, var(--color-violet) 70%, transparent)
    }
}

.cs-stack-terminal__lights i:nth-child(2) {
    background: var(--color-pink);
    box-shadow: 0 0 12px #e64e90a6
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal__lights i:nth-child(2) {
        box-shadow: 0 0 12px color-mix(in srgb, var(--color-pink) 65%, transparent)
    }
}

.cs-stack-terminal__lights i:nth-child(3) {
    background: var(--color-lavender);
    box-shadow: 0 0 12px #c769f7a6
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal__lights i:nth-child(3) {
        box-shadow: 0 0 12px color-mix(in srgb, var(--color-lavender) 65%, transparent)
    }
}

.cs-stack-terminal__title,
.cs-stack-terminal__status {
    color: var(--color-muted);
    letter-spacing: .09em;
    text-transform: uppercase;
    font-size: 10px
}

.cs-stack-terminal__status {
    color: #bb78e3;
    justify-self: end
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-terminal__status {
        color: color-mix(in srgb, var(--color-lavender) 72%, var(--color-muted))
    }
}

.cs-stack-terminal__body {
    z-index: 1;
    padding: clamp(24px, 4vw, 46px);
    position: relative
}

.cs-stack-terminal__prompt {
    color: var(--color-muted);
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    font-size: clamp(12px, 1.4vw, 15px);
    display: flex
}

.cs-stack-terminal__prompt>span {
    color: var(--color-lavender);
    font-weight: 700
}

.cs-stack-terminal__command {
    white-space: nowrap;
    width: 21ch;
    color: var(--color-white);
    font: inherit;
    animation: 1.15s steps(21, end) both cs-stack-type;
    display: inline-block;
    position: relative;
    overflow: hidden
}

.cs-stack-terminal__command:after {
    content: "";
    vertical-align: -.14em;
    background: var(--color-pink);
    width: 7px;
    height: 1em;
    margin-left: 4px;
    animation: .85s step-end infinite cs-stack-cursor;
    display: inline-block
}

.cs-stack-filters {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    display: flex
}

.cs-stack-filter {
    appearance: none;
    border: 1px solid var(--color-border);
    background: #191a1fbd;
    border-radius: 9px;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 13px;
    display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-filter {
        background: color-mix(in srgb, var(--color-bg) 74%, transparent)
    }
}

.cs-stack-filter {
    color: var(--color-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 10px;
    transition: color .2s, border-color .2s, background .2s, transform .2s
}

.cs-stack-filter span {
    background: #f3f3f312;
    border-radius: 999px;
    place-items: center;
    min-width: 19px;
    min-height: 19px;
    display: grid
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-filter span {
        background: color-mix(in srgb, var(--color-white) 7%, transparent)
    }
}

.cs-stack-filter span {
    color: var(--color-white);
    font-size: 9px
}

.cs-stack-filter:hover,
.cs-stack-filter:focus-visible {
    color: var(--color-white);
    border-color: #ca70f79b
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-stack-filter:hover,
    .cs-stack-filter:focus-visible {
        border-color: color-mix(in srgb, var(--color-lavender) 58%, var(--color-border))
    }
}

.cs-stack-filter:hover,
.cs-stack-filter:focus-visible {
    outline: none;
    transform: translateY(-1px)
}

.cs-stack-filter.is-active {
    color: var(--color-white);
    border-color: #6407ffbd
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-filter.is-active {
        border-color: color-mix(in srgb, var(--color-violet) 72%, var(--color-border))
    }
}

.cs-stack-filter.is-active {
    background: #2a194f
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-filter.is-active {
        background: color-mix(in srgb, var(--color-violet) 18%, var(--color-surface))
    }
}

.cs-stack-filter.is-active {
    box-shadow: 0 0 22px -12px var(--color-violet)
}

.cs-stack-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    display: grid
}

.cs-stack-card {
    --stack-card-accent: var(--color-violet);
    border: 1px solid var(--color-border);
    background: linear-gradient(145deg, var(--stack-card-accent), transparent 58%), #1a1b21;
    border-radius: 13px;
    flex-direction: column;
    align-items: flex-start;
    min-height: 158px;
    padding: 20px;
    display: flex;
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card {
        background: linear-gradient(145deg, color-mix(in srgb, var(--stack-card-accent) 8%, transparent), transparent 58%), color-mix(in srgb, var(--color-bg) 78%, var(--color-surface))
    }
}

.cs-stack-card {
    animation: .5s cubic-bezier(.2, .8, .2, 1) both cs-stack-card-in;
    animation-delay: calc(var(--stack-index) * 65ms + .18s);
    transition: transform .24s, border-color .24s, box-shadow .24s
}

.cs-stack-card:before {
    content: "";
    background: var(--stack-card-accent);
    opacity: .85;
    width: 2px;
    position: absolute;
    inset: 0 auto 0 0
}

.cs-stack-card:hover {
    border-color: var(--stack-card-accent);
    transform: translateY(-4px)
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card:hover {
        border-color: color-mix(in srgb, var(--stack-card-accent) 56%, var(--color-border))
    }
}

.cs-stack-card:hover {
    box-shadow: 0 18px 34px -24px var(--stack-card-accent)
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card:hover {
        box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--stack-card-accent) 72%, transparent)
    }
}

.cs-stack-card--accent-pink {
    --stack-card-accent: var(--color-pink)
}

.cs-stack-card--accent-blue {
    --stack-card-accent: var(--color-info)
}

.cs-stack-card--accent-lavender {
    --stack-card-accent: var(--color-lavender)
}

.cs-stack-card__category {
    border: 1px solid var(--stack-card-accent);
    margin-bottom: auto;
    padding: 5px 7px;
    display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card__category {
        border: 1px solid color-mix(in srgb, var(--stack-card-accent) 38%, var(--color-border))
    }
}

.cs-stack-card__category {
    background: var(--stack-card-accent);
    border-radius: 6px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card__category {
        background: color-mix(in srgb, var(--stack-card-accent) 10%, transparent)
    }
}

.cs-stack-card__category {
    color: var(--stack-card-accent)
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card__category {
        color: color-mix(in srgb, var(--stack-card-accent) 74%, var(--color-white))
    }
}

.cs-stack-card__category {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 9px
}

.cs-stack-card h3 {
    color: var(--color-white);
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin: 24px 0 0;
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.05
}

.cs-stack-card p {
    color: var(--color-muted);
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45
}

.cs-stack-card__index {
    color: var(--stack-card-accent);
    position: absolute;
    top: 14px;
    right: 14px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-card__index {
        color: color-mix(in srgb, var(--stack-card-accent) 52%, var(--color-muted))
    }
}

.cs-stack-card__index {
    font-size: 9px
}

.cs-stack-rationale {
    border: 1px solid #7827ff54;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 16px;
    margin: 24px 0 0;
    padding: 18px 20px;
    display: grid
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-rationale {
        border: 1px solid color-mix(in srgb, var(--color-violet) 28%, var(--color-border))
    }
}

.cs-stack-rationale {
    background: linear-gradient(90deg, #251c40, #1e1f28c2);
    border-radius: 12px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-stack-rationale {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-violet) 11%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 76%, transparent))
    }
}

.cs-stack-rationale span {
    color: var(--color-pink);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1.6
}

.cs-stack-rationale b {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: clamp(14px, 1.35vw, 16px);
    font-weight: 500;
    line-height: 1.6
}

.cs-stack-card-enter {
    transition: opacity .18s, transform .18s
}

.cs-stack-card-enter-start {
    opacity: 0;
    transform: translateY(8px)scale(.98)
}

.cs-stack-card-enter-end {
    opacity: 1;
    transform: translateY(0)scale(1)
}

@keyframes cs-stack-type {
    0% {
        width: 0
    }

    to {
        width: 21ch
    }
}

@keyframes cs-stack-cursor {
    50% {
        opacity: 0
    }
}

@keyframes cs-stack-card-in {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (width<=1040px) {
    .cs-stack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width<=640px) {
    .cs-stack-terminal__bar {
        grid-template-columns: auto 1fr
    }

    .cs-stack-terminal__status {
        display: none
    }

    .cs-stack-terminal__body {
        padding: 20px 16px 22px
    }

    .cs-stack-grid {
        grid-template-columns: 1fr
    }

    .cs-stack-card {
        min-height: 140px
    }

    .cs-stack-filter {
        flex: auto;
        justify-content: center
    }

    .cs-stack-rationale {
        grid-template-columns: 1fr;
        gap: 8px
    }
}

@media (prefers-reduced-motion:reduce) {

    .cs-stack-terminal__command,
    .cs-stack-terminal__command:after,
    .cs-stack-card {
        animation: none
    }

    .cs-stack-filter,
    .cs-stack-card,
    .cs-stack-card-enter {
        transition: none
    }
}

.cs-outcomes {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 28px;
    display: grid
}

@media (width<=760px) {
    .cs-outcomes {
        grid-template-columns: 1fr
    }
}

.cs-outcome {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px
}

.cs-outcome__k {
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 10.5px
}

.cs-outcome h3 {
    margin: 8px 0 6px;
    font-size: 16px
}

.cs-outcome p {
    color: var(--color-muted);
    margin: 0;
    font-size: 14.5px
}

.cs-outcome ul {
    color: var(--color-muted);
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 14px
}

.cs-evidence-note {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    max-width: 760px;
    color: var(--color-muted);
    border-radius: 12px;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    font-size: 14px;
    display: flex
}

.cs-evidence-note strong {
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-white);
    font-size: 11px
}

.cs-evidence-tag {
    font-family: var(--font-mono);
    color: var(--color-muted);
    margin-right: 4px;
    font-size: 10px
}

.cs-next-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: inherit;
    border-radius: 14px;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    padding: 26px 28px;
    text-decoration: none;
    transition: border-color .2s, transform .2s;
    display: flex
}

.cs-next-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px)
}

.cs-next-card__body {
    flex: 1
}

.cs-next-card__label {
    font-family: var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-violet);
    font-size: 11px
}

.cs-next-card__title {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    margin: 6px 0;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600
}

.cs-next-card__meta {
    font-family: var(--font-mono);
    color: var(--color-muted);
    font-size: 12px
}

.cs-next-card__arrow {
    color: var(--color-muted);
    margin-left: auto;
    font-size: 22px
}

.cs-sec-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    color: var(--color-white);
    margin: 0;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.06
}

.cs-cover__frame {
    z-index: 3;
    pointer-events: none;
    border-radius: var(--radius);
    border: 1px solid #ffffff1a;
    position: absolute;
    inset: 16px
}

@media (width<=600px) {
    .cs-cover__frame {
        inset: 10px
    }
}

.cs-status {
    background: #191a1f8c;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-status {
        background: color-mix(in srgb, var(--color-bg) 55%, transparent)
    }
}

.cs-status {
    color: #d492f6
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-status {
        color: color-mix(in srgb, var(--color-lavender) 70%, var(--color-white))
    }
}

.cs-status {
    border: 1px solid #ca71f794
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-status {
        border: 1px solid color-mix(in srgb, var(--color-lavender) 55%, var(--color-border))
    }
}

.cs-status {
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px
}

.cs-status:before {
    content: "";
    background: var(--color-lavender);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--color-lavender);
    border-radius: 999px
}

.cs-cover__meta div {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.cs-cover__meta dt {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff9e;
    font-size: 10.5px
}

.cs-cover__meta dd {
    color: var(--color-white);
    margin: 0;
    font-size: 14px;
    font-weight: 600
}

.cs-crumb {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg)
}

.cs-crumb__inner {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 14px;
    display: flex
}

.cs-crumb-back {
    color: var(--color-muted);
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    text-decoration: none;
    transition: color .2s;
    display: inline-flex
}

.cs-crumb-back:hover {
    color: var(--color-white)
}

.cs-crumb-back svg {
    width: 15px;
    height: 15px
}

.cs-meta-strip {
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    display: flex
}

.cs-meta-strip div {
    flex-direction: column;
    gap: 1px;
    display: flex
}

.cs-meta-strip dt {
    font-family: var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 10.5px
}

.cs-meta-strip dd {
    color: var(--color-white);
    margin: 0;
    font-size: 13px;
    font-weight: 600
}

.cs-empty-line {
    border: 1px dashed var(--color-border-strong);
    max-width: 760px;
    color: var(--color-muted);
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    padding: 22px 24px;
    font-size: 15px;
    display: flex
}

.cs-signal__eyebrow {
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9e66fa;
    margin: 0 0 12px;
    font-size: 11.5px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-signal__eyebrow {
        color: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-signal__intro {
    color: var(--color-muted);
    max-width: 62ch;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55
}

.cs-signal__foot {
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    margin-top: 22px;
    padding-top: 18px;
    font-size: 14px
}

.cs-signal__foot b {
    color: var(--color-white);
    font-weight: 600
}

.cs-signal--mini .cs-signal__item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 8px;
    padding-left: 6px;
    padding-right: 6px;
    transition: background .16s
}

.cs-signal--mini .cs-signal__item:hover {
    background: #f3f3f30f
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-signal--mini .cs-signal__item:hover {
        background: color-mix(in srgb, var(--color-white) 6%, transparent)
    }
}

.cs-signal--mini .cs-check {
    place-items: center;
    transition: background .16s, border-color .16s;
    display: grid
}

.cs-signal--mini .cs-signal__item.is-on .cs-check {
    background: var(--color-violet);
    border-color: var(--color-violet)
}

.cs-signal--mini .cs-signal__item.is-on .cs-check:after {
    content: "✓";
    color: var(--color-on-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1
}

.cs-signal--mini .cs-signal__item.is-on .cs-signal__text {
    color: var(--color-muted);
    text-decoration: line-through;
    -webkit-text-decoration-color: var(--color-border-strong);
    -webkit-text-decoration-color: var(--color-border-strong);
    -webkit-text-decoration-color: var(--color-border-strong);
    text-decoration-color: var(--color-border-strong)
}

.cs-diag-reopen {
    cursor: pointer;
    color: #9e66fa;
    background: 0 0;
    border: 0;
    margin-left: 6px;
    padding: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-diag-reopen {
        color: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-diag-reopen {
    text-underline-offset: 3px;
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline
}

.cs-cap__title {
    font-family: var(--font-display);
    letter-spacing: -.005em;
    color: var(--color-white);
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 600
}

.cs-cap__desc {
    color: var(--color-muted);
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.5
}

.cs-outcome-note {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    max-width: 720px;
    color: var(--color-muted);
    border-radius: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.55
}

.cs-ev-tag {
    font-family: var(--font-mono);
    letter-spacing: .03em;
    color: var(--color-muted);
    margin-right: 4px;
    font-size: 10px
}

.cs-next-card__thumb {
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-2);
    width: clamp(120px, 16vw, 196px);
    color: var(--color-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    flex: none;
    place-items: center;
    font-size: 10px;
    display: grid
}

.cs-milestrip {
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cs-mile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    flex-direction: column;
    flex: 148px;
    gap: 4px;
    min-width: 148px;
    padding: 16px 18px;
    display: flex
}

.cs-mile--conditional {
    border-style: dashed
}

.cs-mile__step {
    font-family: var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9e66fa;
    font-size: 11px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-mile__step {
        color: color-mix(in srgb, var(--color-violet) 58%, var(--color-white))
    }
}

.cs-mile__title {
    letter-spacing: -.005em;
    color: var(--color-white);
    font-size: 14.5px;
    font-weight: 600
}

.cs-mile__desc {
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.45
}

.cs-mile__date {
    color: var(--color-muted);
    margin-top: auto;
    padding-top: 12px;
    font-size: 11px
}

@media (width<=760px) {
    .cs-milestrip {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        overflow-x: auto
    }

    .cs-mile {
        scroll-snap-align: start;
        flex: 0 0 62%
    }
}

.cs-cta-band {
    background: radial-gradient(circle at 14% 100%, #fe005421, transparent 36%), radial-gradient(circle at 88% 0%, #6000ff38, transparent 42%), var(--color-surface);
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-band {
        background: radial-gradient(circle at 14% 100%, color-mix(in srgb, var(--color-red) 13%, transparent), transparent 36%), radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--color-violet) 22%, transparent), transparent 42%), var(--color-surface)
    }
}

.cs-cta-band {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border)
}

.cs-cta-inner {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: clamp(36px, 7vw, 96px);
    padding-block: clamp(64px, 8vw, 112px);
    display: grid
}

.cs-cta-copy {
    max-width: 600px
}

.cs-cta-copy>p:not(.wp-eyebrow) {
    color: var(--color-muted);
    max-width: 52ch;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.65
}

.cs-cta-btns {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    display: flex
}

.cs-cta-media {
    border: 1px solid #ce7bf863;
    min-height: clamp(300px, 34vw, 460px);
    margin: 0;
    position: relative;
    overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media {
        border: 1px solid color-mix(in srgb, var(--color-lavender) 34%, var(--color-border))
    }
}

.cs-cta-media {
    background: var(--color-surface-2);
    border-radius: 22px;
    box-shadow: 0 28px 70px #191a1f94
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media {
        box-shadow: 0 28px 70px color-mix(in srgb, var(--color-bg) 58%, transparent)
    }
}

.cs-cta-media:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 8px #191a1f5c
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media:after {
        box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--color-bg) 36%, transparent)
    }
}

.cs-cta-media:after {
    border-radius: inherit
}

.cs-cta-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block
}

.cs-cta-media figcaption {
    z-index: 1;
    width: fit-content;
    max-width: calc(100% - 32px);
    color: var(--color-white);
    background: #191a1fc7;
    padding: 9px 12px;
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media figcaption {
        background: color-mix(in srgb, var(--color-bg) 78%, transparent)
    }
}

.cs-cta-media figcaption {
    border: 1px solid #f3f3f324
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media figcaption {
        border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent)
    }
}

.cs-cta-media figcaption {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font: 11px/1.35 var(--font-mono);
    border-radius: 999px
}

.cs-cta-media--placeholder {
    background: linear-gradient(135deg, #6000ff17, transparent 46%), repeating-linear-gradient(135deg, transparent 0 18px, #f3f3f306 18px 19px), var(--color-surface-2);
    border-style: dashed;
    place-items: center;
    display: grid
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media--placeholder {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-violet) 9%, transparent), transparent 46%), repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--color-white) 2.5%, transparent) 18px 19px), var(--color-surface-2)
    }
}

.cs-cta-media--placeholder:before {
    content: "";
    border: 1px solid #d58df93d;
    position: absolute;
    inset: 22px
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media--placeholder:before {
        border: 1px solid color-mix(in srgb, var(--color-lavender) 18%, var(--color-border))
    }
}

.cs-cta-media--placeholder:before {
    border-radius: 14px
}

.cs-cta-media--placeholder:after {
    box-shadow: inset 0 0 0 8px #191a1f38, inset 0 0 70px #6000ff14
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media--placeholder:after {
        box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--color-bg) 22%, transparent), inset 0 0 70px color-mix(in srgb, var(--color-violet) 8%, transparent)
    }
}

.cs-cta-media__placeholder-mark {
    z-index: 1;
    color: var(--color-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    display: inline-flex;
    position: relative
}

.cs-cta-media__placeholder-mark:before {
    content: "";
    background: linear-gradient(90deg, var(--color-lavender), transparent);
    width: 28px;
    height: 1px
}

.cs-cta-media__placeholder-frame {
    border: 1px solid #9ca0b070;
    width: 56px;
    height: 44px;
    position: absolute
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-cta-media__placeholder-frame {
        border: 1px solid color-mix(in srgb, var(--color-muted) 44%, transparent)
    }
}

.cs-cta-media__placeholder-frame {
    border-radius: 8px;
    transform: translateY(44px)
}

.cs-cta-media__placeholder-frame:before,
.cs-cta-media__placeholder-frame:after {
    content: "";
    background: #9ca0b075;
    position: absolute
}

@supports (color:color-mix(in lab, red, red)) {

    .cs-cta-media__placeholder-frame:before,
    .cs-cta-media__placeholder-frame:after {
        background: color-mix(in srgb, var(--color-muted) 46%, transparent)
    }
}

.cs-cta-media__placeholder-frame:before {
    width: 33px;
    height: 1px;
    bottom: 10px;
    left: 11px;
    transform: rotate(-24deg)
}

.cs-cta-media__placeholder-frame:after {
    border-radius: 50%;
    width: 7px;
    height: 7px;
    top: 9px;
    right: 10px
}

@media (width<=920px) {
    .cs-cta-inner {
        grid-template-columns: 1fr;
        align-items: start
    }

    .cs-cta-media {
        width: 100%;
        min-height: clamp(280px, 62vw, 440px)
    }
}

@media (width<=560px) {
    .cs-cta-btns {
        grid-template-columns: 1fr;
        display: grid
    }

    .cs-cta-btns .btn {
        justify-content: center;
        width: 100%
    }

    .cs-cta-media {
        border-radius: 16px;
        min-height: 260px
    }
}

.cs-diag-modal {
    z-index: 110;
    place-items: center;
    padding: 20px;
    display: grid;
    position: fixed;
    inset: 0
}

.cs-diag-modal__backdrop {
    background: #191a1fc2;
    position: absolute;
    inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .cs-diag-modal__backdrop {
        background: color-mix(in srgb, var(--color-bg) 86%, transparent)
    }
}

.cs-diag-modal__backdrop {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.cs-diag-modal__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: auto
}

.cs-diag-modal__close {
    z-index: 2;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    width: 44px;
    height: 44px;
    color: var(--color-muted);
    border-radius: 999px;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    transition: color .16s, border-color .16s;
    display: grid;
    position: absolute;
    top: 10px;
    right: 10px
}

.cs-diag-modal__close:hover {
    color: var(--color-white);
    border-color: var(--color-border-strong)
}

.cs-diag-modal__body {
    padding: clamp(24px, 4vw, 36px)
}

.cs-diag-modal__title {
    font-family: var(--font-display);
    letter-spacing: -.015em;
    color: var(--color-white);
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.12
}

.cs-diag-modal__sub {
    color: var(--color-muted);
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55
}

.cs-diag-modal__actions {
    gap: 12px;
    margin-top: 26px;
    display: grid
}

.cs-diag-modal__actions .btn {
    justify-content: center;
    width: 100%
}

.work-pages.reveal-ready .cs-reveal {
    opacity: 0;
    transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal);
    transform: translateY(16px)
}

.work-pages.reveal-ready .cs-reveal.in {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .work-pages.reveal-ready .cs-reveal {
        opacity: 1 !important;
        transform: none !important
    }
}

.cs-arch-illustration {
    margin: 24px 0 0
}

.cs-arch-illustration img {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    width: 100%;
    height: auto;
    display: block
}

@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-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-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@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: "<percentage>";
    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: "<percentage>";
    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: "<length>";
    inherits: false;
    initial-value: 0
}

@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: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@keyframes ping {

    75%,
    to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes bounce {

    0%,
    to {
        animation-timing-function: cubic-bezier(.8, 0, 1, 1);
        transform: translateY(-25%)
    }

    50% {
        animation-timing-function: cubic-bezier(0, 0, .2, 1);
        transform: none
    }
}