@layer theme, base, components, utilities; @layer theme { @theme default { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 none); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 none); --color-neutral-100: oklch(97% 0 none); --color-neutral-200: oklch(92.2% 0 none); --color-neutral-300: oklch(87% 0 none); --color-neutral-400: oklch(70.8% 0 none); --color-neutral-500: oklch(55.6% 0 none); --color-neutral-600: oklch(43.9% 0 none); --color-neutral-700: oklch(37.1% 0 none); --color-neutral-800: oklch(26.9% 0 none); --color-neutral-900: oklch(20.5% 0 none); --color-neutral-950: oklch(14.5% 0 none); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 none); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --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: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --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: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } --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: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); } /* Deprecated */ @theme default inline reference { --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); --radius: 0.25rem; --max-width-prose: 65ch; } } @layer base { /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders. */ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */ } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS. */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: --theme( --default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); /* 4 */ font-feature-settings: --theme( --default-font-feature-settings, normal ); /* 5 */ font-variation-settings: --theme( --default-font-variation-settings, normal ); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: --theme( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); /* 1 */ font-feature-settings: --theme( --default-mono-font-feature-settings, normal ); /* 2 */ font-variation-settings: --theme( --default-mono-font-variation-settings, normal ); /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring:where(:not(iframe)) { outline: auto; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Make lists unstyled by default. */ ol, ul, menu { list-style: none; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers. */ button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */ } /* Restore default font weight. */ :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } /* Restore indentation. */ :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } /* Restore space after button. */ ::file-selector-button { margin-inline-end: 4px; } /* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) */ ::placeholder { opacity: 1; } /* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) */ @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. */ ::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */ } /* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. */ ::-webkit-datetime-edit { display: inline-flex; } /* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. */ ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } /* Center dropdown marker shown on inputs with paired ``s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499) */ ::-webkit-calendar-picker-indicator { line-height: 1; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Correct the inability to style the border radius in iOS Safari. */ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default. */ [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { @tailwind utilities; } @layer theme, base, components, utilities; @layer theme { @theme default { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 none); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 none); --color-neutral-100: oklch(97% 0 none); --color-neutral-200: oklch(92.2% 0 none); --color-neutral-300: oklch(87% 0 none); --color-neutral-400: oklch(70.8% 0 none); --color-neutral-500: oklch(55.6% 0 none); --color-neutral-600: oklch(43.9% 0 none); --color-neutral-700: oklch(37.1% 0 none); --color-neutral-800: oklch(26.9% 0 none); --color-neutral-900: oklch(20.5% 0 none); --color-neutral-950: oklch(14.5% 0 none); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 none); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --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: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --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: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } --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: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); } /* Deprecated */ @theme default inline reference { --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); --radius: 0.25rem; --max-width-prose: 65ch; } } @layer base { /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders. */ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */ } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS. */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: --theme( --default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ); /* 4 */ font-feature-settings: --theme( --default-font-feature-settings, normal ); /* 5 */ font-variation-settings: --theme( --default-font-variation-settings, normal ); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: --theme( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); /* 1 */ font-feature-settings: --theme( --default-mono-font-feature-settings, normal ); /* 2 */ font-variation-settings: --theme( --default-mono-font-variation-settings, normal ); /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring:where(:not(iframe)) { outline: auto; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Make lists unstyled by default. */ ol, ul, menu { list-style: none; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers. */ button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */ } /* Restore default font weight. */ :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } /* Restore indentation. */ :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } /* Restore space after button. */ ::file-selector-button { margin-inline-end: 4px; } /* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) */ ::placeholder { opacity: 1; } /* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) */ @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. */ ::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */ } /* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. */ ::-webkit-datetime-edit { display: inline-flex; } /* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. */ ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } /* Center dropdown marker shown on inputs with paired ``s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499) */ ::-webkit-calendar-picker-indicator { line-height: 1; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Correct the inability to style the border radius in iOS Safari. */ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default. */ [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { @tailwind utilities; } @property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }} @layer base { /* * Scrollbar styles * * TODO: This is a temporary workaround by removing the scrollbar styles. * Global scrollbar styling causes modal/overlay interaction/closure issues * (e.g. backdrop clicks not closing the overlay) and should be removed. */ /* *:not(.alert-dialog__backdrop):not(.modal__backdrop) { scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; } */ /* Border color inheritance */ *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--border, currentColor); } /* Keeps main page content interactive during view transitions */ :root { view-transition-name: none; } ::view-transition { pointer-events: none; } } @layer base { /* ============================================================================= * HeroUI scrollbar system * * Modes via data-scrollbar on any ancestor: * (unset) — HeroUI scrollbar from theme --scrollbar-width/color/gutter (light/dark) * thin — HeroUI themed thin scrollbar, useful for overriding inherited default mode * default — OS / browser scrollbar (auto) * none — hidden (inherited to descendants using @apply scrollbar) * * Each scroll container applies @apply scrollbar | scrollbar-thin | scrollbar-none | scrollbar-default * in its own component CSS file. * ============================================================================= */ [data-scrollbar="thin"] { --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --scrollbar-gutter: auto; } [data-scrollbar="default"] { --scrollbar-width: auto; --scrollbar-color: auto; --scrollbar-gutter: auto; } [data-scrollbar="none"] { --scrollbar-width: none; --scrollbar-color: auto; --scrollbar-gutter: auto; } } @layer components { /* Close Button component styles */ /* Base close button styles */ .close-button { @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight; /* Cursor */ cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), color 150ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 150ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Pending state */ &[data-pending="true"] { @apply status-pending; } /* SVG icon styling*/ & svg { @apply pointer-events-none; @apply size-4 shrink-0 self-center; @apply -mx-0.5 my-0.5; } } /* Variants */ .close-button--default { @apply bg-default text-muted; &:active, &[data-pressed="true"] { } @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default-hover; } } &:active, &[data-pressed="true"] { transform: scale(0.93); } } } @layer components { /* Base description styles */ .description { @apply text-xs text-wrap wrap-break-word text-muted; } } @layer components { /* Base error message styles */ .error-message { @apply h-auto text-xs wrap-break-word text-danger; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-out), height 350ms var(--ease-smooth); @apply motion-reduce:transition-none; } } @layer components { /* Field error styles */ .field-error { @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-visible:h-auto data-visible:opacity-100; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-out), height 350ms var(--ease-smooth); @apply motion-reduce:transition-none; } /* * Toggle fields (checkbox/switch): stack below the label like description. * Disable collapsible height/opacity — those styles break flex-col content layout. */ .checkbox > .field-error, .checkbox > [data-slot="field-error"], .switch > .field-error, .switch > [data-slot="field-error"], .radio > .field-error, .radio > [data-slot="field-error"] { @apply m-0 h-auto min-h-0 p-0 text-muted opacity-100; transition: none; } } @layer components { /* Base label styles */ .label { /* Base styling */ @apply text-sm font-medium text-foreground; } /* * Exclude group-level components (RadioGroup, CheckboxGroup) and radio/checkbox items * to ensure asterisks only appear on atomic form field labels and group labels, * not on individual options within those groups */ .label--required, [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"]) > .label, [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label { @apply after:ms-0.5 after:text-danger after:content-['*']; } .label--disabled, [data-disabled="true"] .label { @apply status-disabled; } .label--invalid, [data-invalid="true"] .label, [aria-invalid="true"] .label { @apply text-danger; } } @layer components { /* Base accordion styles */ .accordion { @apply w-full; /* Performance optimization - contain layout changes */ contain: layout style; } /* Accordion elements */ .accordion__body { @apply text-sm; } .accordion__body-inner { @apply px-4 pt-0 pb-4 text-muted; } .accordion__heading { @apply flex; } .accordion__indicator { @apply ms-auto size-4 shrink-0 text-muted; /** * Transitions */ @apply transition duration-250 motion-reduce:transition-none; /* Expanded state for indicator rotation */ &[data-expanded="true"] { @apply -rotate-180; } } /* Accordion Item - Separator styles */ .accordion__item { @apply relative border-none; } .accordion__item::after { content: ""; @apply absolute start-0 bottom-0 h-px w-full rounded-xs bg-separator; } .accordion__item:last-child::after { content: none; } /* Hide separator when hideSeparator prop is set */ .accordion__item[data-hide-separator="true"]::after { display: none; } /* ------------------------------------ */ .accordion__trigger { cursor: var(--cursor-interactive); /* Base Styles */ @apply flex flex-1 items-center justify-between px-4 py-4 text-start text-sm font-medium no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-out), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) { background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%); } } /* Pressed state */ &[data-pressed="true"]:not([aria-expanded="true"]) { } /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled State */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } } .accordion__panel { opacity: 0; height: var(--disclosure-panel-height); overflow: clip; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: height 200ms var(--ease-out-quad), opacity 200ms var(--ease-out); @apply motion-reduce:transition-none; &[data-expanded="true"] { will-change: height, opacity; opacity: 1; } } /* Surface variant */ .accordion--surface { @apply bg-surface; border-radius: min(32px, var(--radius-3xl)); .accordion__trigger { @media (hover: hover) { &:hover:not([aria-expanded="true"]), &[data-hovered="true"]:not([aria-expanded="true"]) { @apply bg-default; } } } .accordion__item::after { @apply bg-surface-foreground/6; } } .accordion--surface .accordion__item { /* Surface variant separator styling */ &::after { @apply start-[3%] w-[94%]; } /* Special rounding for first and last items in surface variant */ &:first-child [data-slot="accordion-trigger"] { border-start-start-radius: min(32px, var(--radius-3xl)); border-start-end-radius: min(32px, var(--radius-3xl)); } &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"])) [data-slot="accordion-trigger"] { border-end-start-radius: min(32px, var(--radius-3xl)); border-end-end-radius: min(32px, var(--radius-3xl)); } } } @layer components { /* Base breadcrumbs container */ .breadcrumbs { @apply flex items-center; /* Breadcrumb link */ .breadcrumbs__link { @apply relative px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100; &:hover, &[data-hovered="true"] { @apply underline; } &[data-current="true"] { @apply text-link opacity-100; } } /* Breadcrumb item wrapper */ .breadcrumbs__item { @apply flex shrink-0 items-center justify-center gap-0.5 px-0.5; } /* Separator icon */ .breadcrumbs__separator { @apply size-3 text-muted rtl:rotate-180; } } } @layer components { /* Base disclosure-group styles */ .disclosure-group { @apply w-full; /* Performance optimization - contain layout changes */ contain: layout style; } } @layer components { /* Base disclosure styles */ .disclosure { @apply relative; } .accordion__heading { @apply flex; } .disclosure__trigger { cursor: var(--cursor-interactive); @apply inline-block no-highlight; /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } } .disclosure__indicator { @apply ms-auto size-4 shrink-0 text-inherit; /** * Transitions */ @apply transition duration-250 motion-reduce:transition-none; /* Expanded state for indicator rotation */ &[data-expanded="true"] { @apply -rotate-180; } } .disclosure__content { opacity: 0; height: var(--disclosure-panel-height); overflow: clip; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: height 200ms var(--ease-out-quad), opacity 200ms var(--ease-out); @apply motion-reduce:transition-none; &[data-expanded="true"] { will-change: height, opacity; opacity: 1; } } .disclosure__body { @apply p-2; } } @layer components { /* Base link styles */ .link { @apply relative inline-flex h-fit w-fit items-center rounded-xl font-medium text-link no-underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 100ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 100ms var(--ease-out); @apply motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply underline decoration-muted/50; .link__icon { @apply opacity-100; } } } /* Pressed state */ &:active, &[data-pressed="true"] { @apply underline decoration-muted; .link__icon { @apply opacity-100; } } /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; .link__icon { @apply opacity-100; } } /* Disabled state */ &[aria-disabled="true"] { @apply status-disabled; } .link__icon { @apply pointer-events-none inline-flex size-[0.75em] shrink-0 items-center justify-center text-current opacity-60; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-out); @apply motion-reduce:transition-none; & svg { @apply transform-gpu; } } .link__icon[data-default-icon="true"] { @apply ms-1 pb-1.5; } /* Handle Link with Button Variants */ &.button { @apply gap-0 no-underline; } } } @layer components { /* ========================================================================== Pagination - Page navigation component ========================================================================== */ /* Base styles */ .pagination { @apply flex w-full flex-col items-center justify-between gap-4 sm:flex-row; } /* Summary - left side info container */ .pagination__summary { @apply flex items-center gap-2 self-start text-sm text-muted sm:self-center; } /* Content - container for pagination items */ .pagination__content { @apply flex items-center gap-1 self-start sm:self-center; } /* Item - list item wrapper */ .pagination__item { @apply inline-flex; } /* Link - page number button (ghost button style) */ .pagination__link { @apply relative isolate inline-flex size-9 origin-center items-center justify-center rounded-3xl text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:size-8; cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Ghost button tokens */ --pagination-link-bg: transparent; --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); --pagination-link-fg: var(--default-foreground); background-color: var(--pagination-link-bg); color: var(--pagination-link-fg); /* Focus state */ &:focus-visible, &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--pagination-link-bg-hover); } } /* Active / pressed */ &:active, &[data-pressed="true"] { background-color: var(--pagination-link-bg-pressed); transform: scale(0.97); } /* Active page - tertiary button style */ &[data-active="true"] { --pagination-link-bg: var(--default); --pagination-link-bg-hover: var(--default-hover); --pagination-link-bg-pressed: var(--default-hover); } } /* Ellipsis */ .pagination__ellipsis { @apply inline-flex size-9 items-center justify-center text-sm text-muted select-none md:size-8; } /* Navigation buttons (Previous / Next) */ .pagination__link--nav { @apply w-auto gap-1.5 px-2.5; & [data-slot="pagination-previous-icon"], & [data-slot="pagination-next-icon"] { @apply rtl:rotate-180; } } /* ========================================================================== Size variants ========================================================================== */ .pagination--sm { .pagination__link { @apply size-8 text-xs md:size-7; &:active, &[data-pressed="true"] { transform: scale(0.98); } } .pagination__link--nav { @apply w-auto px-2; } .pagination__ellipsis { @apply size-8 text-xs md:size-7; } .pagination__summary { @apply text-xs; } } .pagination--md { /* No styles as this is the default size */ } .pagination--lg { .pagination__link { @apply size-10 text-base md:size-9; &:active, &[data-pressed="true"] { transform: scale(0.96); } } .pagination__link--nav { @apply w-auto px-3; } .pagination__ellipsis { @apply size-10 text-base md:size-9; } .pagination__summary { @apply text-base; } } } @layer components { /* Base tabs component */ .tabs { @apply flex gap-2; /* Orientation styles */ &[data-orientation="horizontal"] { @apply flex-col; } &[data-orientation="vertical"] { @apply flex-row; } } /* Tab list container */ .tabs__list-container { @apply relative bg-default; border-radius: calc(var(--radius) * 2.5); /* Vertical scroller fills the container height so overflow detection engages when the wrapper height is constrained (e.g. h-[240px]) */ > .tabs__list-container__scroller[data-orientation="vertical"] { @apply h-full; } /* Overflow chevron buttons */ > .tabs__list-container__scroll-prev, > .tabs__list-container__scroll-next { @apply absolute z-2 hidden size-4 cursor-(--cursor-interactive) items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground outline-none; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; @media (hover: hover) { &:hover { @apply opacity-70; } } &:focus-visible { @apply status-focused; } } /* Chevron position - horizontal orientation */ &:has([data-orientation="horizontal"]) { > .tabs__list-container__scroll-prev { @apply start-1 top-1/2 -translate-y-1/2; } > .tabs__list-container__scroll-next { @apply end-1 top-1/2 -translate-y-1/2; } > .tabs__list-container__scroll-prev, > .tabs__list-container__scroll-next { @apply rtl:rotate-180; } } /* Chevron position - vertical orientation */ &:has([data-orientation="vertical"]) { > .tabs__list-container__scroll-prev { @apply top-1 left-1/2 -translate-x-1/2; } > .tabs__list-container__scroll-next { @apply bottom-1 left-1/2 -translate-x-1/2; } } /* Show chevrons only when ScrollShadow reports scrolling is possible */ &:has( > :is( [data-left-scroll="true"], [data-left-right-scroll="true"], [data-top-scroll="true"], [data-top-bottom-scroll="true"] ) ) > .tabs__list-container__scroll-prev { @apply inline-flex; } &:has( > :is( [data-right-scroll="true"], [data-left-right-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"] ) ) > .tabs__list-container__scroll-next { @apply inline-flex; } } /* Tab list */ .tabs__list { @apply inline-flex p-1; /* Horizontal orientation - grow with content so ScrollShadow can detect overflow */ &[data-orientation="horizontal"] { @apply w-max min-w-full flex-row; } /* Vertical orientation */ &[data-orientation="vertical"] { @apply flex-col gap-1; .tabs__tab { @apply min-w-20; } } } /* Individual tab */ .tabs__tab { @apply relative flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight; z-index: 1; cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out), opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Selected state */ &[data-selected="true"] { @apply text-segment-foreground; /* Hide separator on the selected tab and the one following it */ .tabs__separator, & + .tabs__tab .tabs__separator { @apply opacity-0; } } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } /* Hover states - both approaches for compatibility */ @media (hover: hover) { &:not([data-selected="true"]):not([data-disabled="true"]):hover, &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) { @apply opacity-70; } } /* Focus states - comprehensive fallback */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } } /* Tab separator */ .tabs__separator { @apply pointer-events-none absolute rounded-sm bg-muted/25; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Horizontal tabs - vertical separator */ .tabs__list[data-orientation="horizontal"] & { @apply start-0 top-1/4 h-1/2 w-px; } /* Vertical tabs - horizontal separator */ .tabs__list[data-orientation="vertical"] & { @apply start-[5%] top-0 h-px w-[90%]; } } /* Tab panel */ .tabs__panel { @apply w-full p-2 outline-none; /* Exiting animations */ &[data-exiting="true"] { @apply absolute start-0 top-0 w-full; } /* Orientation spacing */ &[data-orientation="horizontal"] { @apply mt-4; } &[data-orientation="vertical"] { @apply ms-4; } } /* Tab indicator - React Aria's SelectionIndicator */ .tabs__indicator { @apply absolute start-0 top-0 size-full rounded-3xl bg-segment shadow-surface; z-index: -1; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition-duration: 250ms; transition-property: translate, width, height; transition-timing-function: var(--ease-out-fluid); @apply motion-reduce:transition-none; } /* ========================================================================== Secondary Variant ========================================================================== */ .tabs--secondary { /* Container - flat, no pill. Underline on container (not list) so it stays stable when the inner list scrolls horizontally inside the ScrollShadow. */ > .tabs__list-container { @apply rounded-none bg-transparent; /* Tab list - remove padding */ .tabs__list { @apply p-0; } /* Hide separators in secondary variant */ .tabs__separator { @apply hidden; } /* Tab - adjust for secondary variant */ .tabs__tab { @apply rounded-none; /* Selected state - use text-foreground */ &[data-selected="true"] { @apply text-foreground; } } /* Tab indicator - line style */ .tabs__indicator { @apply rounded-none bg-accent shadow-none; } } /* Horizontal orientation - bottom border + bottom line indicator */ &[data-orientation="horizontal"] > .tabs__list-container { @apply border-b border-border; .tabs__indicator { @apply top-auto bottom-0 h-0.5; } } /* Vertical orientation - left border + left line indicator */ &[data-orientation="vertical"] > .tabs__list-container { @apply border-s border-border; .tabs__indicator { @apply start-0 top-0 h-full w-0.5; } } } } @layer components { /* Button component styles */ /* Base button styles */ .button { @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out); @apply transform-gpu will-change-transform motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* Default tokens (fallback behavior) */ --button-bg: transparent; --button-bg-hover: var(--button-bg); --button-bg-pressed: var(--button-bg-hover); --button-fg: currentColor; background-color: var(--button-bg); color: var(--button-fg); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Pending state */ &[data-pending="true"] { @apply status-pending; } /* Active / pressed */ &:active, &[data-pressed="true"] { background-color: var(--button-bg-pressed); transform: scale(0.97); } /* Hover */ @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--button-bg-hover); } } /* SVG icon styling - exclude spinner and link-icon svgs */ & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4; } } /* Size variants */ .button--sm { @apply h-9 px-3 md:h-8; & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) { @apply size-4; } &:active, &[data-pressed="true"] { transform: scale(0.98); } } .button--md { /* No styles as this is the default size */ } .button--lg { @apply h-11 text-base md:h-10; &:active, &[data-pressed="true"] { transform: scale(0.96); } } /* Color variants - only set custom property values */ .button--primary { --button-bg: var(--accent); --button-bg-hover: var(--accent-hover); --button-bg-pressed: var(--accent-hover); --button-fg: var(--accent-foreground); } .button--secondary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); --button-fg: var(--accent-soft-foreground); } .button--tertiary { --button-bg: var(--default); --button-bg-hover: var(--default-hover); --button-bg-pressed: var(--default-hover); } .button--ghost, .button--outline { --button-bg: transparent; --button-bg-hover: var(--default); --button-bg-pressed: var(--default); --button-fg: var(--default-foreground); } .button--outline { @apply border border-border; --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent); } .button--danger { --button-bg: var(--danger); --button-bg-hover: var(--danger-hover); --button-bg-pressed: var(--danger-hover); --button-fg: var(--danger-foreground); } .button--danger-soft { --button-bg: var(--danger-soft); --button-bg-hover: var(--danger-soft-hover); --button-bg-pressed: var(--danger-soft-hover); --button-fg: var(--danger-soft-foreground); } /* Icon-only modifier */ .button--icon-only { @apply w-10 p-0 md:w-9; } .button--icon-only.button--sm { @apply w-9 md:w-8; } .button--icon-only.button--lg { @apply w-11 md:w-10; } /* Full width modifier */ .button--full-width { @apply w-full; } } @layer components { /* ========================================================================== ButtonGroup - Groups related buttons together ========================================================================== */ /* Base button group styles */ .button-group { @apply inline-flex h-auto items-center justify-center gap-0; } /* ========================================================================== Orientation variants ========================================================================== */ .button-group--horizontal { @apply flex-row; } .button-group--vertical { @apply flex-col; } /* Remove border radius from all buttons in group */ .button-group .button { @apply rounded-none; } /* Apply border radius to first button (start edge) */ .button-group--horizontal .button:first-child { @apply rounded-s-3xl; } /* Apply border radius to last button (end edge) */ .button-group--horizontal .button:last-child { @apply rounded-e-3xl; } /* If only one button, apply both rounded edges */ .button-group--horizontal .button:first-child:last-child { @apply rounded-3xl; } /* Apply border radius to first button (top edge) in vertical */ .button-group--vertical .button:first-child { @apply rounded-t-3xl; } /* Apply border radius to last button (bottom edge) in vertical */ .button-group--vertical .button:last-child { @apply rounded-b-3xl; } /* If only one button in vertical, apply all rounded edges */ .button-group--vertical .button:first-child:last-child { @apply rounded-3xl; } /* Remove scale transform on active/pressed state for buttons in group */ .button-group .button:active, .button-group .button[data-pressed="true"] { transform: none; } /* Raise focused button so its outward focus ring + gap shows above adjacent buttons */ .button-group .button:focus-visible:not(:focus), .button-group .button[data-focus-visible="true"] { @apply z-10; } /* ========================================================================== Separator (compound component) ========================================================================== */ .button-group__separator { @apply rounded-sm bg-current opacity-15; position: absolute; pointer-events: none; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Horizontal orientation - vertical divider */ .button-group--horizontal & { inset-inline-start: -1px; top: 25%; width: 1px; height: 50%; } /* Vertical orientation - horizontal divider */ .button-group--vertical & { inset-inline-start: 25%; top: -1px; width: 50%; height: 1px; } } /* ========================================================================== Outline button border handling ========================================================================== */ /* Remove adjacent borders from outline buttons in horizontal group */ /* First button: remove end border (right in LTR, left in RTL) */ .button-group--horizontal .button--outline:first-child { @apply border-e-0; } /* Last button: remove start border (left in LTR, right in RTL) */ .button-group--horizontal .button--outline:last-child { @apply border-s-0; } /* Middle buttons: remove both inline borders */ .button-group--horizontal .button--outline:not(:first-child):not(:last-child) { @apply border-x-0; } /* Remove adjacent borders from outline buttons in vertical group */ /* First button: remove bottom border */ .button-group--vertical .button--outline:first-child { @apply border-b-0; } /* Last button: remove top border */ .button-group--vertical .button--outline:last-child { @apply border-t-0; } /* Middle buttons: remove both block borders */ .button-group--vertical .button--outline:not(:first-child):not(:last-child) { @apply border-y-0; } /* ========================================================================== Full width modifier ========================================================================== */ .button-group--full-width { @apply w-full; } } @layer components { /* ========================================================================== ToggleButton - Interactive toggle control for on/off states ========================================================================== */ /* Base styles */ .toggle-button { @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-smooth), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* Default tokens (unselected state) */ --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); --toggle-button-fg: currentColor; /* Selected state tokens */ --toggle-button-bg-selected: var(--accent-soft); --toggle-button-bg-selected-hover: var(--accent-soft-hover); --toggle-button-bg-selected-pressed: var(--accent-soft-hover); --toggle-button-fg-selected: var(--accent-soft-foreground); background-color: var(--toggle-button-bg); color: var(--toggle-button-fg); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Hover */ @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--toggle-button-bg-hover); } } /* Active / pressed */ &:active, &[data-pressed="true"] { background-color: var(--toggle-button-bg-pressed); transform: scale(0.97); } /* Selected state */ &[data-selected="true"] { background-color: var(--toggle-button-bg-selected); color: var(--toggle-button-fg-selected); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--toggle-button-bg-selected-hover); } } &:active, &[data-pressed="true"] { background-color: var(--toggle-button-bg-selected-pressed); } } /* SVG icon styling */ & svg { @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4; } } /* ========================================================================== Size variants ========================================================================== */ .toggle-button--sm { @apply h-9 px-3 md:h-8; & svg { @apply size-4; } &:active, &[data-pressed="true"] { transform: scale(0.98); } } .toggle-button--md { /* No styles as this is the default size */ } .toggle-button--lg { @apply h-11 text-base md:h-10; &:active, &[data-pressed="true"] { transform: scale(0.96); } } /* ========================================================================== Variant styles ========================================================================== */ .toggle-button--default { --toggle-button-bg: var(--default); --toggle-button-bg-hover: var(--default-hover); --toggle-button-bg-pressed: var(--default-hover); } .toggle-button--ghost { --toggle-button-bg: transparent; --toggle-button-bg-hover: var(--default); --toggle-button-bg-pressed: var(--default); --toggle-button-fg: var(--default-foreground); } /* ========================================================================== Icon-only modifier ========================================================================== */ .toggle-button--icon-only { @apply w-10 p-0 md:w-9; } .toggle-button--icon-only.toggle-button--sm { @apply w-9 md:w-8; } .toggle-button--icon-only.toggle-button--lg { @apply w-11 md:w-10; } } @layer components { /* ========================================================================== ToggleButtonGroup - Groups multiple ToggleButtons into a unified control ========================================================================== */ /* Base styles */ .toggle-button-group { @apply inline-flex h-auto w-fit items-center justify-center gap-0; } /* ========================================================================== Orientation variants ========================================================================== */ .toggle-button-group--horizontal { @apply flex-row; } .toggle-button-group--vertical { @apply flex-col; } /* ========================================================================== Full width modifier ========================================================================== */ .toggle-button-group--full-width { @apply w-full; } /* ========================================================================== Attached mode (default) - buttons connected with dividers ========================================================================== */ /* Remove border radius from all toggle buttons in attached group */ .toggle-button-group .toggle-button { @apply rounded-none; } /* Apply border radius to first button (start edge) */ .toggle-button-group--horizontal .toggle-button:first-child { @apply rounded-s-3xl; } /* Apply border radius to last button (end edge) */ .toggle-button-group--horizontal .toggle-button:last-child { @apply rounded-e-3xl; } /* If only one button, apply both rounded edges */ .toggle-button-group--horizontal .toggle-button:first-child:last-child { @apply rounded-3xl; } /* Apply border radius to first button (top edge) in vertical */ .toggle-button-group--vertical .toggle-button:first-child { @apply rounded-t-3xl; } /* Apply border radius to last button (bottom edge) in vertical */ .toggle-button-group--vertical .toggle-button:last-child { @apply rounded-b-3xl; } /* If only one button in vertical, apply all rounded edges */ .toggle-button-group--vertical .toggle-button:first-child:last-child { @apply rounded-3xl; } /* Remove scale transform on active/pressed state for buttons in group */ .toggle-button-group .toggle-button:active, .toggle-button-group .toggle-button[data-pressed="true"] { transform: none; } /* Override focus ring to use inset style so it stays within button bounds */ .toggle-button-group .toggle-button:focus-visible:not(:focus), .toggle-button-group .toggle-button[data-focus-visible="true"] { --tw-ring-offset-width: 0px; @apply ring-inset; } /* Full width: stretch each toggle button */ .toggle-button-group--full-width .toggle-button { @apply flex-1; } /* ========================================================================== Separator (compound component) ========================================================================== */ .toggle-button-group__separator { @apply rounded-sm bg-current opacity-15; position: absolute; pointer-events: none; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Horizontal orientation - vertical divider */ .toggle-button-group--horizontal & { inset-inline-start: -1px; top: 25%; width: 1px; height: 50%; } /* Vertical orientation - horizontal divider */ .toggle-button-group--vertical & { inset-inline-start: 25%; top: -1px; width: 50%; height: 1px; } } /* ========================================================================== Detached mode - buttons separated with gaps ========================================================================== */ .toggle-button-group--detached { @apply gap-1; } /* Restore border radius in detached mode */ .toggle-button-group--detached .toggle-button { @apply rounded-3xl; } /* Hide separators in detached mode */ .toggle-button-group--detached .toggle-button-group__separator { display: none; } } @layer components { /* ========================================================================== Toolbar - Container for interactive controls with arrow key navigation ========================================================================== */ /* Base styles */ .toolbar { @apply grid w-fit grid-flow-col items-center gap-2; .separator--vertical { @apply h-1/2 self-center; } .separator--horizontal { @apply w-1/2 justify-center justify-self-center; } } /* Orientation variants */ .toolbar--horizontal { } .toolbar--vertical { @apply grid-flow-row items-start justify-start; .button-group { @apply justify-start; } } /* Attached variant */ .toolbar--attached { @apply rounded-3xl bg-surface p-1 shadow-overlay; } } @layer components { /* ========================================================================== Base dropdown styles ========================================================================== */ .dropdown { @apply flex flex-col gap-1; } .dropdown__trigger { @apply inline-block; /* Only visible when using a custom trigger - not passing "Button" as a child - hence we use some button styles (custom trigger) */ @apply outline-none; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Pending state */ &[data-pending="true"] { @apply status-pending; } /* Default active/pressed state - scale transform */ &:active, &[data-pressed="true"] { transform: scale(0.97); } } /* Similar to select popover styles */ .dropdown__popover { @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm will-change-transform md:min-w-55; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } /* Menu styles */ [data-slot="dropdown-menu"] { @apply p-1.5 outline-none; } [data-slot="menu-item"] { @apply px-2.5; } } .dropdown__menu { @apply relative flex w-full flex-col gap-0.5 overflow-clip p-1; /* This makes the separator take up 94% of the width and be centered */ [data-slot="separator"] { @apply ms-[3%] w-[94%]; } } } @layer components { /* ========================================================================== Base list-box item styles ========================================================================== */ .list-box-item { @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); [data-slot="label"] { @apply pointer-events-none w-fit select-none; } [data-slot="description"] { @apply pointer-events-none text-wrap select-none; } /* Add inline-end padding when indicator is present */ &:has(.list-box-item__indicator) { @apply pe-7; } /* Focus visible state (keyboard focus only) */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Focus state */ &:focus, &[data-focus="true"] { } /* Pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.98); } /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default; } } /* Selected state */ &[aria-selected="true"], &[data-selected="true"] { } /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; } } /* ========================================================================== List-box item indicator ========================================================================== */ .list-box-item__indicator { @apply absolute top-1/2 end-2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-default-foreground; /** * Transitions */ @apply transition duration-250 motion-reduce:transition-none; /* Checkmark SVG indicator */ [data-slot="list-box-item-indicator--checkmark"] { @apply size-2.5; /** * Transitions */ @apply transition-all duration-300 motion-reduce:transition-none; } .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"], .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] { /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: stroke-dashoffset 250ms linear; @apply motion-reduce:transition-none; } } /* Default variant */ .list-box-item--default { } /* Danger variant */ .list-box-item--danger { .list-box-item__indicator { @apply text-danger; } [data-slot="label"] { @apply text-danger; } } } @layer components { /* ========================================================================== Base list-box section styles ========================================================================== */ .list-box-section { @apply flex flex-col items-start gap-0; } } @layer components { /* ========================================================================== Base list-box styles ========================================================================== */ .list-box { @apply relative w-full overflow-clip p-1; /** * Spacing between direct children. * * NOTE: We intentionally avoid `display: flex` + `gap` here because * react-aria's Virtualizer renders a `position: relative` content * div with an explicit large height (e.g. 50000px) as the only child * of the ListBox. Flex shrinking would collapse that height and break * scrollbar sizing during virtualized scroll. */ & > * + * { @apply mt-1; } /* This makes the horizontal separator take up 94% of the width and be centered */ [data-slot="separator"][data-orientation="horizontal"] { @apply ms-[3%] w-[94%]; } } } @layer components { /* ========================================================================== Base menu item styles ========================================================================== */ .menu-item { @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), box-shadow 150ms var(--ease-out); @apply will-change-transform motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); [data-slot="label"] { @apply pointer-events-none w-fit select-none; } [data-slot="description"] { @apply pointer-events-none text-wrap select-none; } [data-slot="submenu-indicator"] svg { @apply size-3.5; } /* Add inline-start padding when indicator is present */ &:has(.menu-item__indicator) { @apply ps-7; } /* Add inline-end padding when indicator is present and has submenu */ &[data-has-submenu="true"]:has(.menu-item__indicator) { @apply ps-2 pe-7; } /* Focus visible state (keyboard focus only) */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Focus state */ &:focus, &[data-focus="true"] { } /* Pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.98); } /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default; } } /* Selected state */ &[aria-checked="true"], &[aria-selected="true"], &[data-selected="true"] { [data-slot="menu-item-indicator--checkmark"] { /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: stroke-dashoffset 100ms linear; @apply motion-reduce:transition-none; } [data-slot="menu-item-indicator--dot"] { /** * Selected state: visible and scaled up */ @apply scale-100 opacity-100; } } /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; } } /* ========================================================================== Menu item indicator ========================================================================== */ .menu-item__indicator { @apply absolute start-2 top-1/2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-muted; /** * Transitions */ @apply transition duration-250 motion-reduce:transition-none; /* Position on the inline-end when menu item has submenu */ .menu-item[data-has-submenu="true"] & { @apply start-auto end-2; } /* Checkmark SVG indicator */ [data-slot="menu-item-indicator--checkmark"] { @apply size-2.5; .menu-item[data-selection-mode="multiple"] & { /** * Transitions */ @apply transition-all duration-300 motion-reduce:transition-none; } } /* Dot SVG indicator */ [data-slot="menu-item-indicator--dot"] { @apply size-2; .menu-item[data-selection-mode="multiple"] & { /** * Transitions */ @apply transition-all duration-250 motion-reduce:transition-none; } /** * Default state: hidden and scaled down */ @apply scale-70 opacity-0; } } /* Submenu indicator (chevron-right) */ .menu-item__indicator--submenu { @apply text-muted; svg { @apply size-3; } } /* Default variant */ .menu-item--default { } /* Danger variant */ .menu-item--danger { .menu-item__indicator { @apply text-danger; } [data-slot="label"] { @apply text-danger; } } } @layer components { /* ========================================================================== Base menu section styles ========================================================================== */ .menu-section { @apply flex flex-col items-start gap-0; } } @layer components { /* ========================================================================== Base menu styles ========================================================================== */ .menu { @apply relative flex w-full flex-col gap-1 overflow-clip p-1; /* This makes the separator take up 94% of the width and be centered */ [data-slot="separator"] { @apply ms-[3%] w-[94%]; } } } @layer components { /* Base styles */ .tag-group { @apply relative flex flex-col gap-1; } .tag-group__list { @apply relative flex flex-wrap gap-1.5; } .tag-group [slot="description"], .tag-group [data-slot="description"], .tag-group [slot="errorMessage"], .tag-group [data-slot="error-message"] { @apply p-1; } } @layer components { /* Tag component styles */ .tag { --optical-offset: 0.031em; @apply relative inline-flex items-center gap-1 rounded-xl font-medium select-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 100ms var(--ease-smooth), scale 100ms var(--ease-smooth), opacity 100ms var(--ease-smooth), background-color 100ms var(--ease-smooth), box-shadow 100ms var(--ease-out); @apply origin-center transform-gpu motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* SVG icon styling */ & svg { @apply pointer-events-none size-3 shrink-0 self-center text-current; } } /* Disabled state */ .tag:is([data-disabled="true"], [aria-disabled="true"]) { @apply status-disabled; } /* Focus visible state (keyboard focus only) */ .tag:is(:focus-visible, [data-focus-visible]) { @apply status-focused; } /* Pressed/Active state */ .tag:is(:active, [data-pressed="true"]) { } /* Selected state */ .tag:is([data-selected="true"], [aria-selected="true"]) { @apply bg-accent-soft text-accent-soft-foreground; /* Selected + Hover state */ @media (hover: hover) { &:is(:hover, [data-hovered="true"]) { @apply bg-accent-soft-hover; } } } /* Size */ .tag--sm { @apply px-2 py-0.5 text-xs; } .tag--md { @apply px-2 py-1 text-xs; } .tag--lg { @apply rounded-2xl px-2.5 py-1.5 text-sm; } /* Variant */ .tag--default { @apply bg-default text-default-foreground; /* Hover state (when not selected or disabled) */ @media (hover: hover) { &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { @apply bg-default-hover; } } } .tag--surface { @apply bg-surface text-surface-foreground; /* Hover state (when not selected or disabled) */ @media (hover: hover) { &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) { @apply bg-surface-hover; } } } /* Remove Button */ .tag__remove-button { @apply size-3 text-inherit; /* SVG icon styling */ & svg { @apply size-[inherit] shrink-0 self-center text-current; } } } @layer components { /* ========================================================================== ColorArea - 2D color picker for selecting colors from a gradient area ========================================================================== */ /* Base styles */ .color-area { @apply relative w-full max-w-56 shrink-0 rounded-2xl no-highlight; /* Square aspect ratio */ aspect-ratio: 1 / 1; /* Color gradient background from React Aria */ background: var(--color-area-background); /* Inner shadow for depth */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; } } /* ========================================================================== Dots overlay variant ========================================================================== */ .color-area--show-dots { /* Dot pattern overlay using radial gradient */ &::after { content: ""; @apply pointer-events-none absolute inset-0 rounded-[inherit]; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 8px 8px; } } /* ========================================================================== Thumb element ========================================================================== */ .color-area__thumb { @apply size-4 rounded-xl will-change-[width,height]; /* Current color from React Aria */ background-color: var(--color-area-thumb-color); /* White border for visibility */ border: 3px solid white; /* Inner shadow for depth */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: width 150ms var(--ease-out), height 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Focus state */ &[data-focus-visible="true"] { @apply status-focused; } /* Dragging state */ &[data-dragging="true"] { @apply size-5; } /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; } } } @layer components { /* ========================================================================== ColorPicker - Color selection component with popover ========================================================================== */ /* Base color-picker styles */ .color-picker { @apply inline-flex; } /* ========================================================================== Trigger ========================================================================== */ .color-picker__trigger { @apply inline-flex items-center gap-3 rounded-sm text-sm no-highlight; /* Cursor */ cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; [data-slot="label"] { cursor: var(--cursor-interactive); } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* ========================================================================== Popover ========================================================================== */ .color-picker__popover { @apply min-w-62 origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay px-2 pt-2 pb-3 scrollbar-none; box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); /* Content layout */ @apply flex flex-col gap-3; /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95; /* Placement-specific translations */ &[data-placement^="top"] { @apply slide-in-from-bottom-1; } &[data-placement^="bottom"] { @apply slide-in-from-top-1; } &[data-placement^="left"] { @apply slide-in-from-right-1; } &[data-placement^="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } } } @layer components { /* ========================================================================== ColorSlider - A slider for adjusting individual color channel values ========================================================================== */ /* Base styles */ .color-slider { @apply grid w-full gap-1; grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; grid-template-rows: auto auto; /* When neither label nor output exist, collapse to single row */ &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; } /* When only label exists (no output) */ &:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "label" "track"; grid-template-columns: 1fr; } /* When only output exists (no label) */ &:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-columns: 1fr; .color-slider__output { justify-self: end; } } [data-slot="label"] { @apply w-fit text-sm font-medium; grid-area: label; } .color-slider__output { @apply text-sm font-medium tabular-nums; grid-area: output; } .color-slider__track { @apply relative rounded-2xl; grid-area: track; /* Edge cap pseudo-elements */ &::before, &::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } } .color-slider__thumb { /* Flex container for centering */ @apply absolute flex cursor-grab items-center justify-center rounded-2xl no-highlight; /* Border to create white ring around the thumb */ @apply border-3 border-white shadow-overlay; /* Ensure thumb is above edge caps */ z-index: 1; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Dragging state - cursor changes and thumb scales down */ &[data-dragging="true"] { @apply cursor-grabbing; } /* Focus state - show focus ring */ &[data-focus-visible="true"] { @apply z-10 status-focused; } /* Disabled state */ &[data-disabled="true"] { @apply cursor-default bg-default; } } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; [data-slot="label"] { @apply opacity-100; } } /* Horizontal orientation */ &[data-orientation="horizontal"] { flex-direction: column; .color-slider__track { @apply h-5 justify-self-center rounded-none; width: calc(100% - 1.25rem); /* Default border for visibility against similar backgrounds */ box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); /* Edge caps for horizontal orientation */ &::before, &::after { @apply top-0 h-full; width: 0.625rem; /* Half thumb width + 2px gap */ } &::before { @apply rounded-ss-2xl rounded-es-2xl; inset-inline-start: -0.625rem; box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; } &::after { @apply rounded-se-2xl rounded-ee-2xl; inset-inline-end: -0.625rem; box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background-color: var(--track-end-color, transparent); } } .color-slider__thumb { @apply top-1/2 size-4; } } /* Vertical orientation */ &[data-orientation="vertical"] { @apply h-full gap-2; flex-direction: row; grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; align-items: center; justify-items: center; /* When neither label nor output exist in vertical, just show track */ &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) { grid-template-areas: "track"; grid-template-rows: 1fr; gap: 0; } /* When only label exists in vertical (no output) */ &:has([data-slot="label"]):not(:has(.color-slider__output)) { grid-template-areas: "track" "label"; grid-template-rows: 1fr auto; } /* When only output exists in vertical (no label) */ &:not(:has([data-slot="label"])):has(.color-slider__output) { grid-template-areas: "output" "track"; grid-template-rows: auto 1fr; } .color-slider__output { text-align: center; } [data-slot="label"] { text-align: center; } .color-slider__track { @apply w-5 justify-self-center rounded-none; height: calc(100% - 1.25rem); /* Left and right borders for vertical track */ box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1); /* Edge caps for vertical orientation */ &::before, &::after { @apply start-0 w-full; height: 0.625rem; /* Half thumb height + 2px gap */ } &::before { bottom: -0.625rem; border-end-start-radius: 999px; border-end-end-radius: 999px; /* Left, right, and bottom borders for bottom cap */ box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); background: linear-gradient(var(--track-start-color, transparent)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; } &::after { top: -0.625rem; border-start-start-radius: 999px; border-start-end-radius: 999px; /* Left, right, and top borders for top cap */ box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.1); background-color: var(--track-end-color, transparent); } } .color-slider__thumb { /* Cross-axis centering; React Aria applies a physical translateX(-50%), so keep left-1/2 for RTL correctness */ @apply left-1/2 size-4; } } } } @layer components { /* Base color-swatch styles */ .color-swatch { @apply relative box-border size-8 shrink-0; /* Checkered background pattern for transparency */ background: linear-gradient(var(--color-swatch-current), var(--color-swatch-current)), repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px; /* Default border for visibility against similar backgrounds */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } /* Shape variants */ .color-swatch--circle { @apply rounded-2xl; } .color-swatch--square { @apply rounded-md; } /* Size variants */ .color-swatch--xs { @apply size-4; &.color-swatch--circle { @apply rounded-lg; } } .color-swatch--sm { @apply size-6; &.color-swatch--circle { @apply rounded-xl; } } .color-swatch--md { /* No additional styles — default size (32px) uses circle's base rounded-2xl */ } .color-swatch--lg { @apply size-9; &.color-swatch--circle { @apply rounded-3xl; } } .color-swatch--xl { @apply size-10; &.color-swatch--circle { @apply rounded-3xl; } } } @layer components { /* ========================================================================== ColorSwatchPicker - A list of color swatches for selection ========================================================================== */ /* Base styles */ .color-swatch-picker { @apply flex flex-wrap items-center gap-2; } /* ========================================================================== Item - Individual swatch picker item ========================================================================== */ .color-swatch-picker__item { @apply relative flex size-8 items-center justify-center rounded-2xl border-2 border-transparent outline-none no-highlight; /* Cursor */ cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: border-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Focus state */ &:focus-visible, &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; } /* Selected state */ &[data-selected="true"] { border-color: var(--color-swatch-current); box-shadow: var(--field-shadow); /* Shrink the swatch to reveal the white gap */ .color-swatch-picker__swatch { transform: scale(0.77); } } } /* ========================================================================== Swatch - The color swatch visual ========================================================================== */ .color-swatch-picker__swatch { @apply block size-full; /* Inherit border-radius from item */ border-radius: inherit; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; @media (hover: hover) { &:hover { transform: scale(1.1); } } } /* ========================================================================== Indicator - Checkmark indicator for selected state ========================================================================== */ .color-swatch-picker__indicator { @apply pointer-events-none absolute inset-0 z-10 flex items-center justify-center; /* Checkmark SVG styles - default to white for dark backgrounds */ & > * { @apply size-1/3 text-white; /* Start scaled down - use translateZ(0) for GPU acceleration */ transform: scale(0) translateZ(0); /** * Transitions */ transition: transform 150ms var(--ease-out); @apply motion-reduce:transition-none; } /* Use black checkmark on light backgrounds */ &[data-light-color="true"] & > * { @apply text-black; } /* Scale up when parent item is selected */ .color-swatch-picker__item[data-selected="true"] & > * { transform: scale(1) translateZ(0); } } /* ========================================================================== Layout variants ========================================================================== */ .color-swatch-picker--grid { /* Default is already grid (flex-wrap) - no additional styles needed */ } .color-swatch-picker--stack { @apply flex-col; } /* ========================================================================== Size variants ========================================================================== */ .color-swatch-picker--xs { .color-swatch-picker__item { @apply size-4 rounded-lg border; } } .color-swatch-picker--sm { .color-swatch-picker__item { @apply size-6 rounded-xl border-2; } } .color-swatch-picker--md { .color-swatch-picker__item { /* No styles as this is the default size */ } } .color-swatch-picker--lg { .color-swatch-picker__item { @apply size-9 rounded-3xl border-3; } } .color-swatch-picker--xl { .color-swatch-picker__item { @apply size-10 rounded-3xl border-3; } } /* ========================================================================== Shape variants ========================================================================== */ /* Circle variant (default) - no additional styles needed */ .color-swatch-picker--circle .color-swatch-picker__item { /* Default is already circle - radius set per size */ } /* Square variant */ .color-swatch-picker--square { .color-swatch-picker__item { @apply rounded-xl; .color-swatch-picker__swatch { @apply rounded-lg; } &[data-selected="true"] { .color-swatch-picker__swatch { @apply rounded-lg; } } } } /* Square variant - item radius for xs */ .color-swatch-picker--square.color-swatch-picker--xs { .color-swatch-picker__item { @apply rounded-md; .color-swatch-picker__swatch { @apply rounded-md; } &[data-selected="true"] { .color-swatch-picker__swatch { @apply rounded-md; } } } } /* Square variant - item radius for sm */ .color-swatch-picker--square.color-swatch-picker--sm { .color-swatch-picker__item { @apply rounded-lg; .color-swatch-picker__swatch { @apply rounded-lg; } &[data-selected="true"] { .color-swatch-picker__swatch { @apply rounded-md; } } } } /* Square variant - item radius for md (default) */ .color-swatch-picker--square.color-swatch-picker--md { /* No styles as this is the default size */ } /* Square variant - item radius for lg */ .color-swatch-picker--square.color-swatch-picker--lg { .color-swatch-picker__item { @apply rounded-xl; .color-swatch-picker__swatch { @apply rounded-lg; } &[data-selected="true"] { .color-swatch-picker__swatch { @apply rounded-lg; } } } } /* Square variant - item radius for xl */ .color-swatch-picker--square.color-swatch-picker--xl { .color-swatch-picker__item { @apply rounded-xl; .color-swatch-picker__swatch { @apply rounded-lg; } &[data-selected="true"] { .color-swatch-picker__swatch { @apply rounded-lg; } } } } } @layer components { /* ========================================================================== ColorInputGroup - Input group for color field with prefix/suffix support ========================================================================== */ /* Base styles */ .color-input-group { @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus within state */ &[data-focus-within="true"], &:focus-within { @apply status-focused-field; } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } /* Disabled state */ &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* ========================================================================== Elements ========================================================================== */ .color-input-group__input { @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm; /* Placeholder styling */ &::placeholder { @apply text-field-placeholder; } /* Remove border radius on left side when prefix is present */ .color-input-group:has([data-slot="color-input-group-prefix"]) & { @apply rounded-s-none ps-2; } /* Remove border radius on right side when suffix is present */ .color-input-group:has([data-slot="color-input-group-suffix"]) & { @apply rounded-e-none pe-2; } /* Focus state - handled by group */ &:focus, &:focus-visible { @apply outline-none; } } .color-input-group__prefix { @apply shrink-0 text-field-placeholder; @apply ms-3 me-0 flex items-center; } .color-input-group__suffix { @apply shrink-0 text-field-placeholder; @apply me-3 flex items-center; } /* ========================================================================== Variant modifiers ========================================================================== */ .color-input-group--primary { /* Default styles - primary variant uses the base field styling */ } .color-input-group--secondary { @apply shadow-none; background-color: var(--color-input-group-bg); --color-input-group-bg: var(--default); --color-input-group-bg-hover: var(--default-hover); --color-input-group-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--color-input-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--color-input-group-bg-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; border-color: var(--color-field-border-invalid); background-color: var(--color-input-group-bg-focus); } [data-slot="color-input-group-input"] { @apply bg-transparent; } } /* ========================================================================== Full width modifier ========================================================================== */ .color-input-group--full-width { @apply w-full; } } @layer components { /* ========================================================================== ColorField - Form field for editing hex colors or individual color channels ========================================================================== */ /* Base styles */ .color-field { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } } /* Full width modifier */ .color-field--full-width { @apply w-full; } } @layer components { /* Slider styles */ .slider { @apply grid w-full gap-1; grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; [data-slot="label"] { @apply w-fit text-sm font-medium; grid-area: label; } .slider__output { @apply text-sm font-medium tabular-nums; grid-area: output; } .slider__track { @apply relative rounded-xl bg-default; grid-area: track; } .slider__fill { @apply pointer-events-none absolute bg-accent; } .slider__thumb { /* Flex container for centering pseudo-elements */ @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 250ms var(--ease-smooth), transform 250ms var(--ease-out), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* after: Visible thumb element */ &::after { @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field; content: ""; /** * Transitions */ @apply origin-center transition-all motion-reduce:transition-none; } /* Dragging state - cursor changes and thumb scales down */ &[data-dragging="true"] { @apply cursor-grabbing; &::after { @apply scale-[0.9] motion-reduce:scale-100; } } /* Focus state - increase z-index */ &[data-focus-visible="true"] { @apply z-10 status-focused; } /* Disabled state */ &[data-disabled="true"] { @apply cursor-default; } } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; [data-slot="label"] { @apply opacity-100; } } /* Horizontal orientation */ &[data-orientation="horizontal"] { flex-direction: column; .slider__track { @apply h-5 w-full; /* Add transparent borders to provide space for thumb at edges */ /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */ @apply border-x-[0.75rem] border-x-transparent; &[data-fill-start="true"] { @apply border-s-accent; } &[data-fill-end="true"] { @apply border-e-accent; } } .slider__fill, .slider__thumb { @apply h-full; } .slider__thumb { @apply top-1/2; /* Thumb width + border width */ width: calc(1.5rem + 0.25rem); &::after { width: 1.5rem; height: 1rem; } } } /* Vertical orientation */ &[data-orientation="vertical"] { @apply h-full gap-2; flex-direction: row; grid-template-areas: "output" "track" "label"; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; .slider__output { text-align: center; } [data-slot="label"] { text-align: center; } .slider__track { @apply h-full w-5; /* Add transparent borders to provide space for thumb at edges */ /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */ @apply border-y-[0.75rem] border-y-transparent; justify-self: center; &[data-fill-start="true"] { @apply border-b-accent; } &[data-fill-end="true"] { @apply border-t-accent; } } .slider__fill, .slider__thumb { @apply w-full; } .slider__thumb { /* Cross-axis centering; React Aria applies a physical translateX(-50%), so keep left-1/2 for RTL correctness */ @apply left-1/2; /* Thumb height + border height */ height: calc(1.5rem + 0.25rem); &::after { width: 1rem; height: 1.5rem; } } } } } @layer components { /* Switch base styles */ .switch { @apply flex flex-col items-start gap-1 no-highlight; /* Cursor */ cursor: var(--cursor-interactive); /* Default tokens for switch control states */ --switch-control-bg: var(--default); --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); --switch-control-bg-pressed: var(--switch-control-bg-hover); --switch-control-bg-checked: var(--accent); --switch-control-bg-checked-hover: var(--accent-hover); /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; [data-slot="description"], [data-slot="field-error"] { @apply status-disabled; } .switch__thumb { @apply bg-default-foreground/20; } } /* Field-level help text below the control + label row */ & > [data-slot="description"] { @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)]; } & > [data-slot="field-error"] { @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)] text-xs text-muted; } &.switch--sm > [data-slot="description"] { @apply ps-[calc(2rem+0.75rem)]; } &.switch--sm > [data-slot="field-error"] { @apply ps-[calc(2rem+0.75rem)]; } &.switch--lg > [data-slot="description"] { @apply ps-[calc(3rem+0.75rem)]; } &.switch--lg > [data-slot="field-error"] { @apply ps-[calc(3rem+0.75rem)]; } /* Disabled + Selected state */ &:disabled[aria-checked="true"], &:disabled[data-selected="true"], &[data-disabled="true"][aria-checked="true"], &[data-disabled="true"][data-selected="true"], &[aria-disabled="true"][aria-checked="true"], &[aria-disabled="true"][data-selected="true"] { .switch__thumb { opacity: 0.4; } } } /* Size variants - default is medium */ .switch--sm { /* Small size modifier */ } .switch--md { /* Medium size - no styles as this is the default */ } .switch--lg { /* Large size modifier */ } /* Switch control (track) */ .switch__control { /* Default size (medium) */ @apply relative flex shrink-0 items-center overflow-hidden rounded-xl; height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */ width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */ background-color: var(--switch-control-bg); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 250ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Focus states */ .switch:focus-visible &, .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &, .switch [data-slot="switch-content"][data-focus-visible="true"] & { @apply status-focused; } /* Hover states */ .switch:hover &, .switch:has([data-slot="switch-content"][data-hovered="true"]) &, .switch [data-slot="switch-content"][data-hovered="true"] & { background-color: var(--switch-control-bg-hover); } /* Pressed states */ .switch:active &, .switch:has([data-slot="switch-content"][data-pressed="true"]) &, .switch [data-slot="switch-content"][data-pressed="true"] & { background-color: var(--switch-control-bg-pressed); @apply motion-reduce:transform-none; } /* Checked states */ .switch[aria-checked="true"] &, .switch[data-selected="true"] & { background-color: var(--switch-control-bg-checked); } /* Checked + Hover states */ .switch[aria-checked="true"]:hover &, .switch[data-selected="true"]:hover &, .switch[aria-checked="true"][data-hovered="true"] &, .switch[data-selected="true"][data-hovered="true"] &, .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & { background-color: var(--switch-control-bg-checked-hover); } /* Checked + Pressed states */ .switch[aria-checked="true"]:active &, .switch[data-selected="true"]:active &, .switch[aria-checked="true"][data-pressed="true"] &, .switch[data-selected="true"][data-pressed="true"] &, .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & { background-color: var(--switch-control-bg-checked-hover); } } /* Switch content — the clickable label (control + label text) */ .switch__content { @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight; } /* Size-specific control dimensions */ .switch--sm .switch__control { @apply rounded-lg; height: 1rem; /* ~14px on desktop, ~16px on mobile */ width: 2rem; /* ~32px on desktop, ~36px on mobile */ } .switch--md .switch__control { /* No styles as this is the default size */ } .switch--lg .switch__control { height: 1.5rem; /* ~21px on desktop, ~24px on mobile */ width: 3rem; /* ~48px on desktop, ~56px on mobile */ } /* Switch thumb */ .switch__thumb { /* Default size (medium) with margin-based positioning */ @apply ms-0.5 flex origin-center rounded-lg bg-white text-black shadow-field; height: 1rem; /* ~14px on desktop, ~16px on mobile */ width: 1.375rem; /* ~19px on desktop, ~22px on mobile */ /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: margin 300ms var(--ease-out-fluid), background-color 200ms var(--ease-out); @apply motion-reduce:transition-none; /* Selected/checked state - use margin instead of translate */ .switch[aria-checked="true"] &, .switch[data-selected="true"] & { @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent; box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3); } .switch:active &, .switch[data-pressed="true"] & { } } /* Size-specific thumb dimensions */ .switch--sm .switch__thumb { @apply rounded-md; height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */ width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */ /* Small selected state positioning */ .switch[aria-checked="true"] &, .switch[data-selected="true"] & { @apply ms-[calc(100%-1.15625rem)]; } } .switch--lg .switch__thumb { @apply rounded-xl; height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */ width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */ /* Large selected state positioning */ .switch[aria-checked="true"] &, .switch[data-selected="true"] & { @apply ms-[calc(100%-1.84375rem)]; } } /* Switch thumb content container */ .switch__thumb > * { @apply flex size-full items-center justify-center; } /* Switch label */ .switch__label { @apply text-base font-medium text-foreground; } .switch [data-slot="label"] { @apply select-none; } .switch__content [data-slot="label"] { cursor: var(--cursor-interactive); } .switch [data-slot="description"] { @apply cursor-default select-none; } } @layer components { /* Switch Group styles */ .switch-group { @apply flex flex-col gap-6; } .switch-group__items { @apply flex gap-4; } /* Orientation modifiers */ .switch-group--horizontal .switch-group__items { @apply flex-row; } .switch-group--vertical .switch-group__items { @apply flex-col; } } @layer components { /* ========================================================================== Badge - Small informational badges for displaying labels, statuses, and categories. ========================================================================== */ /* Base styles */ .badge { @apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium; /* Default size (matches --md) */ @apply min-h-7 min-w-7 rounded-3xl text-xs leading-[1.34]; /* Default tokens */ --badge-bg: var(--default); --badge-fg: var(--default-foreground); --badge-border: var(--background); background-color: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-border); background-clip: padding-box; } .badge__label { @apply px-0.5; } .badge-anchor { @apply relative inline-flex shrink-0; } /* ========================================================================== Size variants ========================================================================== */ .badge--lg { @apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43]; } .badge--md { /* No styles as this is the default size */ } .badge--sm { @apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34]; } /* ========================================================================== Color variants - set foreground color ========================================================================== */ .badge--accent { --badge-fg: var(--accent-soft-foreground); } .badge--default { --badge-fg: var(--default-foreground); } .badge--success { --badge-fg: var(--success-soft-foreground); } .badge--warning { --badge-fg: var(--warning-soft-foreground); } .badge--danger { --badge-fg: var(--danger-soft-foreground); } /* ========================================================================== Variant styles ========================================================================== */ .badge--primary { /* Solid background - compound variants below handle bg/fg per color */ } .badge--secondary { /* Default background with colored text - base behavior */ } .badge--soft { /* Soft/muted background - compound variants below handle bg/fg per color */ } /* ========================================================================== Placement variants ========================================================================== */ .badge--top-right { @apply absolute top-0 right-0; transform: translate(25%, -25%); } .badge--top-left { @apply absolute top-0 left-0; transform: translate(-25%, -25%); } .badge--bottom-right { @apply absolute right-0 bottom-0; transform: translate(25%, 25%); } .badge--bottom-left { @apply absolute bottom-0 left-0; transform: translate(-25%, 25%); } /* ========================================================================== Compound variants - Primary (solid background) ========================================================================== */ .badge--primary.badge--accent { --badge-bg: var(--accent); --badge-fg: var(--accent-foreground); } .badge--primary.badge--default { --badge-bg: var(--default); --badge-fg: var(--default-foreground); } .badge--primary.badge--success { --badge-bg: var(--success); --badge-fg: var(--success-foreground); } .badge--primary.badge--warning { --badge-bg: var(--warning); --badge-fg: var(--warning-foreground); } .badge--primary.badge--danger { --badge-bg: var(--danger); --badge-fg: var(--danger-foreground); } /* ========================================================================== Compound variants - Soft (muted background) ========================================================================== */ .badge--soft.badge--accent { --badge-bg: var(--accent-soft); --badge-fg: var(--accent-soft-foreground); } .badge--soft.badge--default { --badge-bg: var(--default-soft); --badge-fg: var(--default-soft-foreground); } .badge--soft.badge--success { --badge-bg: var(--success-soft); --badge-fg: var(--success-soft-foreground); } .badge--soft.badge--warning { --badge-bg: var(--warning-soft); --badge-fg: var(--warning-soft-foreground); } .badge--soft.badge--danger { --badge-bg: var(--danger-soft); --badge-fg: var(--danger-soft-foreground); } } @layer components { /* Base styles */ .chip { @apply inline-flex w-fit shrink-0 items-center gap-0.5 rounded-2xl px-2 py-0.5 text-xs leading-5 font-medium; /* Default tokens */ --chip-bg: var(--default); --chip-fg: currentColor; background-color: var(--chip-bg); color: var(--chip-fg); } .chip__label { @apply px-0.5; } /* Color variants - set foreground color */ .chip--accent { --chip-fg: var(--accent-soft-foreground); } .chip--danger { --chip-fg: var(--danger-soft-foreground); } .chip--default { --chip-fg: var(--default-foreground); } .chip--success { --chip-fg: var(--success-soft-foreground); } .chip--warning { --chip-fg: var(--warning-soft-foreground); } /* Variant styles */ .chip--primary { } .chip--secondary { /* No additional styles for secondary variant */ } .chip--tertiary { --chip-bg: transparent; } /* Size variants */ .chip--sm { @apply px-1 py-0 text-xs; } .chip--md { @apply text-xs; } .chip--lg { @apply px-3 py-1 text-sm font-medium; } /* ====================== */ /* = Compound variants = */ /* ====================== */ /* Primary variants - solid backgrounds */ .chip--primary.chip--accent { --chip-bg: var(--accent); --chip-fg: var(--accent-foreground); } .chip--primary.chip--success { --chip-bg: var(--success); --chip-fg: var(--success-foreground); } .chip--primary.chip--warning { --chip-bg: var(--warning); --chip-fg: var(--warning-foreground); } .chip--primary.chip--danger { --chip-bg: var(--danger); --chip-fg: var(--danger-foreground); } /* Soft variants - muted backgrounds */ .chip--accent.chip--soft { --chip-bg: var(--accent-soft); --chip-fg: var(--accent-soft-foreground); } .chip--success.chip--soft { --chip-bg: var(--success-soft); --chip-fg: var(--success-soft-foreground); } .chip--warning.chip--soft { --chip-bg: var(--warning-soft); --chip-fg: var(--warning-soft-foreground); } .chip--danger.chip--soft { --chip-bg: var(--danger-soft); --chip-fg: var(--danger-soft-foreground); } .chip--default.chip--soft { --chip-bg: var(--default-soft); --chip-fg: var(--default-soft-foreground); } } @layer components { /* ========================================================================== Table — Data display component for structured tabular data. ========================================================================== */ /* -------------------------------------------------------------------------- Table Root — Outer container for table + optional footer. Primary variant: gray background with the table body as a white card inside. -------------------------------------------------------------------------- */ .table-root { @apply relative grid w-full overflow-clip; grid-template-columns: minmax(0, 1fr); } /* -------------------------------------------------------------------------- Scroll Container — Allows the table to scroll horizontally while the wrapper and footer remain at full width. The parent grid with minmax(0, 1fr) creates a hard width boundary that table layout cannot push beyond. -------------------------------------------------------------------------- */ .table__scroll-container { @apply scrollbar overflow-x-auto; scrollbar-gutter: auto; } .table-root--primary { @apply bg-surface-secondary px-1 pb-1; border-radius: min(32px, calc(var(--radius) * 2.5)); } .table-root--secondary { /* No background, padding, or rounding on the root */ } /* Secondary: header is a standalone rounded card. Background is on cells (not ) because Firefox does not support */ .table-root--secondary .table__header { @apply border-b-0 bg-transparent; } .table-root--secondary .table__column { @apply bg-surface-secondary; } /* Round only the truly first/last column header. Non-virtualized: column is a child of . Virtualized: column is wrapped in a `VirtualizerItem` (role="presentation") so `:first-child` / `:last-child` on `.table__column` would match every column (each is the only child of its wrapper). Walk up to the row instead. */ .table-root--secondary :is( th.table__column:first-child, [role="row"] > [role="presentation"]:first-of-type > .table__column ) { border-start-start-radius: min(32px, var(--radius-2xl)); border-end-start-radius: min(32px, var(--radius-2xl)); } .table-root--secondary :is( th.table__column:last-child, [role="row"] > [role="presentation"]:last-of-type > .table__column ) { border-start-end-radius: min(32px, var(--radius-2xl)); border-end-end-radius: min(32px, var(--radius-2xl)); } /* Secondary: body has no shadow or rounded corners */ .table-root--secondary .table__body { @apply shadow-none; /* Non-virtualized */ & tr:first-child td:first-child, & tr:first-child td:last-child, & tr:last-child td:first-child, & tr:last-child td:last-child { @apply rounded-none; } /* Virtualized: undo the rounding applied by .table__body:not(tbody) */ &:not(tbody) { @apply overflow-visible rounded-none; } } /* Secondary: rows are transparent and keep bottom border on every row */ .table-root--secondary .table__row { .table__cell { @apply border-b border-separator-tertiary/50 bg-transparent; } @media (hover: hover) { &:hover .table__cell, &[data-hovered="true"] .table__cell { @apply bg-default/50; } } } /* -------------------------------------------------------------------------- Table Content ( element) — the white card inside the root -------------------------------------------------------------------------- */ .table__content { @apply w-full border-separate border-spacing-0 text-sm; } /* Primary variant: table gets the white surface card look */ .table-root--primary .table__content { @apply overflow-clip; } /* -------------------------------------------------------------------------- Table Header () -------------------------------------------------------------------------- */ .table__header { @apply border-b border-separator/50 bg-surface-secondary; } /* -------------------------------------------------------------------------- Table Column () -------------------------------------------------------------------------- */ .table__body { /* Non-virtualized: round corners via first/last cells (border-radius on itself has no effect). Logical properties so corners follow `dir` in RTL. */ & tr:first-child td:first-child { border-start-start-radius: min(32px, var(--radius-2xl)); } & tr:first-child td:last-child { border-start-end-radius: min(32px, var(--radius-2xl)); } & tr:last-child td:first-child { border-end-start-radius: min(32px, var(--radius-2xl)); } & tr:last-child td:last-child { border-end-end-radius: min(32px, var(--radius-2xl)); } /* Virtualized: elements are divs, not tr/td. VirtualizerItem wrappers break :first-child/:last-child on rows and cells, so round the body itself and clip overflow instead. */ &:not(tbody) { @apply relative h-full overflow-clip; border-radius: min(32px, var(--radius-2xl)); } } /* -------------------------------------------------------------------------- Table Row () -------------------------------------------------------------------------- */ .table__row { @apply relative h-full; /* Bottom separator */ @apply border-b border-separator/50; /* Last row in body has no bottom border */ &:last-child { @apply border-b-0; } /* Hover state — applied to cells so Firefox clips bg to border-radius */ @media (hover: hover) { &:hover .table__cell, &[data-hovered="true"] .table__cell { @apply bg-surface/40; } } /* Selected state */ &[data-selected="true"] .table__cell { @apply bg-surface/10; } /* Disabled state */ &[aria-disabled="true"], &[data-disabled="true"] { @apply status-disabled; } /* Row focus ring: see “Table row focus ring” block below (after `.table__cell`). */ &:focus-visible, &[data-focus-visible="true"] { @apply outline-none; } /* Dragging state */ &[data-dragging="true"] { @apply opacity-50; } /* Drop target state */ &[data-drop-target="true"] .table__cell { @apply bg-accent-soft; } } /* -------------------------------------------------------------------------- Table Cell (
) -------------------------------------------------------------------------- */ .table__column { @apply relative px-4 py-2.5 text-start text-xs font-medium text-muted; /* Separator between columns — a short vertical line on the right edge */ &::after { content: ""; @apply pointer-events-none absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm bg-separator; } &:last-child:not(:only-child)::after { content: none; } /* Sortable columns */ &[data-allows-sorting="true"] { cursor: var(--cursor-interactive); } @media (hover: hover) { &[data-allows-sorting="true"]:hover, &[data-allows-sorting="true"][data-hovered="true"] { @apply text-foreground; } } /* Focus visible — inset shadow for consistent table focus styling */ &:focus-visible, &[data-focus-visible="true"] { @apply rounded-lg outline-none; box-shadow: inset 0 0 0 2px var(--focus); } } /* Virtualized: each column is wrapped in a `VirtualizerItem` (role="presentation"), so `.table__column:last-child:not(:only-child)::after` above never matches. Hide the trailing separator on the rightmost wrapper instead. */ [role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .table__column::after { content: none; } /* -------------------------------------------------------------------------- Sortable Column Header — wraps the column label and an optional indicator icon. Rendered inside a sortable `Table.Column`'s render prop callback. -------------------------------------------------------------------------- */ .table__sortable-column-header { @apply flex items-center justify-between; } /* -------------------------------------------------------------------------- Sortable Column Indicator — chevron that flips based on `data-direction`. Defaults to pointing up (ascending) and rotates 180° for descending. -------------------------------------------------------------------------- */ .table__sortable-column-indicator { @apply inline-grid size-3 transform place-content-center transition-transform duration-100 ease-out; &[data-direction="descending"] { @apply rotate-180; } } /* -------------------------------------------------------------------------- Table Body (
) -------------------------------------------------------------------------- */ .table__cell { @apply h-full bg-surface px-4 py-3 align-middle text-sm text-foreground; @apply border-b border-separator-tertiary/50; /* Focus visible — inset shadow so focus stays within the cell boundaries */ &:focus-visible, &[data-focus-visible="true"] { @apply rounded-lg outline-none; box-shadow: inset 0 0 0 2px var(--focus); } } /* -------------------------------------------------------------------------- Table row focus ring — must follow `.table__cell` (cascade). One continuous inset ring split across cells; `:is(.table__cell, .table__column)` + direct vs `> *:…` covers virtualized wrappers. `:is(:focus-visible, [data-focus-visible])` matches row keyboard focus from RAC. -------------------------------------------------------------------------- */ .table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) { @apply shadow-none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):only-child, .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:only-child :is(.table__cell, .table__column) { @apply rounded-lg shadow-[inset_0_0_0_2px_var(--focus)] outline-none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):first-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:first-child:not(:only-child) :is(.table__cell, .table__column) { @apply rounded-s-lg shadow-[inset_2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):last-child:not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:last-child:not(:only-child) :is(.table__cell, .table__column) { @apply rounded-e-lg shadow-[inset_-2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; } .table__row:is(:focus-visible, [data-focus-visible="true"]) > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child), .table__row:is(:focus-visible, [data-focus-visible="true"]) > *:not(:first-child):not(:last-child):not(:only-child) :is(.table__cell, .table__column) { @apply shadow-[inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; } /* -------------------------------------------------------------------------- Tree / expandable rows — indent the tree column by depth (any level). React Aria sets `--table-row-level` (1-based) on each body row and `data-level` on cells; tree column cells expose `[data-tree-column]`. The row custom property inherits onto cells (1rem per level). -------------------------------------------------------------------------- */ .table__cell[data-tree-column] { padding-inline-start: calc(1rem * var(--table-row-level, 1)); } /* -------------------------------------------------------------------------- Table Footer (div outside , sits on gray bg) -------------------------------------------------------------------------- */ .table__footer { @apply flex items-center px-4 py-2.5; } /* -------------------------------------------------------------------------- Resizable Container — wraps table to enable column resizing via React Aria. -------------------------------------------------------------------------- */ .table__resizable-container { @apply relative scrollbar overflow-auto; scrollbar-gutter: auto; } /* -------------------------------------------------------------------------- Column Resizer — drag handle between resizable columns. Replaces the ::after separator when present. -------------------------------------------------------------------------- */ .table__column-resizer { /* Match the ::after separator: absolute, right edge, short vertical line */ @apply absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm bg-separator; /* Make it interactive — wider hit area with transparent padding */ @apply box-content translate-x-1/2 cursor-col-resize touch-none px-2; /* Reset appearance */ @apply border-none bg-clip-content outline-none; &[data-hovered="true"], &:hover { @apply h-full w-0.5 bg-accent; } &[data-resizing="true"] { @apply h-full w-0.5 bg-accent; } &[data-focus-visible="true"], &:focus-visible { @apply h-full w-0.5 bg-focus; } } /* Hide the ::after separator when a resizer is present in the column */ .table__column:has(.table__column-resizer)::after { content: none; } /* -------------------------------------------------------------------------- Load More Item — sentinel row for infinite scrolling. Non-virtualized: with
inside. Virtualized:
with
inside. -------------------------------------------------------------------------- */ .table__load-more { & td, & [role="rowheader"] { @apply py-3 text-center; & > * { @apply mx-auto; } } } /* -------------------------------------------------------------------------- Load More Content — styled container for the loading indicator inside the load-more sentinel row. -------------------------------------------------------------------------- */ .table__load-more-content { @apply flex items-center justify-center gap-2 py-2; } } @layer components { /* Alert component styles */ /* Base alert styles */ .alert { @apply flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface; border-radius: min(32px, var(--radius-3xl)); } /* Alert elements */ .alert__content { @apply flex h-full grow flex-col items-start; } .alert__indicator { @apply flex items-center justify-center p-1 select-none; [data-slot="alert-default-icon"] { @apply box-content size-4; } } .alert__title { @apply text-sm leading-6 font-medium; } .alert__description { @apply text-sm text-muted; } /* Variant modifiers */ .alert--default .alert__indicator { @apply text-foreground; } .alert--default .alert__title { @apply text-foreground; } .alert--accent .alert__indicator { @apply text-accent-soft-foreground; } .alert--accent .alert__title { @apply text-accent-soft-foreground; } .alert--success .alert__indicator { @apply text-success-soft-foreground; } .alert--success .alert__title { @apply text-success-soft-foreground; } .alert--warning .alert__indicator { @apply text-warning-soft-foreground; } .alert--warning .alert__title { @apply text-warning-soft-foreground; } .alert--danger .alert__indicator { @apply text-danger-soft-foreground; } .alert--danger .alert__title { @apply text-danger-soft-foreground; } } @layer components { /* Base empty-state styles */ .empty-state { @apply p-2 text-sm text-muted; } } @layer components { .skeleton { @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70; } /* TODO: Skeleton with parent are not visible */ /* Animation types */ .skeleton--shimmer { &::after { @apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-['']; } /* When applied to a parent container with multiple skeletons */ &:has(.skeleton) { &::after { content: none; } /* Single synchronized shimmer that passes over all children */ &::before { @apply absolute inset-0 -translate-x-full animate-skeleton content-['']; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100% ); z-index: 10; pointer-events: none; /* Use mix-blend-mode to only show over skeleton elements */ mix-blend-mode: overlay; } /* Ensure children don't have their own shimmer */ & .skeleton { &::after { content: none; } } } } .skeleton--pulse { @apply animate-pulse; } .skeleton--none { } } @layer components { /* ========================================================================== Meter - A quantity indicator within a known range ========================================================================== */ /* Base styles */ .meter { @apply grid w-full gap-1; grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; /* Default color tokens (accent) */ --meter-fill: var(--accent); [data-slot="label"] { @apply w-fit text-sm font-medium; grid-area: label; } .meter__output { @apply text-sm font-medium tabular-nums; grid-area: output; } .meter__track { @apply relative overflow-hidden rounded-sm bg-default; grid-area: track; /* Default height (matches --md) */ @apply h-2; } .meter__fill { @apply absolute start-0 top-0 h-full rounded-sm; background-color: var(--meter-fill); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: width 300ms var(--ease-out); @apply motion-reduce:transition-none; } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; [data-slot="label"] { @apply opacity-100; } } } /* ========================================================================== Size variants ========================================================================== */ .meter--sm { .meter__track { @apply h-1 rounded-xs; } .meter__fill { @apply rounded-xs; } } .meter--md { /* No styles as this is the default size */ } .meter--lg { .meter__track { @apply h-3 rounded-md; } .meter__fill { @apply rounded-md; } } /* ========================================================================== Color variants ========================================================================== */ .meter--default { --meter-fill: var(--default-foreground); } .meter--accent { --meter-fill: var(--accent); } .meter--success { --meter-fill: var(--success); } .meter--warning { --meter-fill: var(--warning); } .meter--danger { --meter-fill: var(--danger); } } @layer components { /* ========================================================================== ProgressBar - Shows determinate or indeterminate progress ========================================================================== */ /* Base styles */ .progress-bar { @apply grid w-full gap-1; grid-template-areas: "label output" "track track"; grid-template-columns: 1fr auto; /* Default color token (accent) */ --progress-bar-fill: var(--accent); [data-slot="label"] { @apply w-fit text-sm font-medium; grid-area: label; } .progress-bar__output { @apply text-sm font-medium tabular-nums; grid-area: output; } .progress-bar__track { @apply relative overflow-hidden rounded-sm bg-default; grid-area: track; /* Default height (matches --md) */ @apply h-2; } .progress-bar__fill { @apply absolute start-0 top-0 h-full rounded-sm; background-color: var(--progress-bar-fill); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: width 300ms var(--ease-out); @apply motion-reduce:transition-none; } /* Indeterminate state - when no aria-valuenow is set */ &:not([aria-valuenow]) { .progress-bar__fill { @apply w-2/5; animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; @apply motion-reduce:animate-none; } } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; [data-slot="label"] { @apply opacity-100; } } } /* ========================================================================== Indeterminate animation ========================================================================== */ @keyframes progress-bar-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* ========================================================================== Size variants ========================================================================== */ .progress-bar--sm { .progress-bar__track { @apply h-1 rounded-xs; } .progress-bar__fill { @apply rounded-xs; } } .progress-bar--md { /* No styles as this is the default size */ } .progress-bar--lg { .progress-bar__track { @apply h-3 rounded-md; } .progress-bar__fill { @apply rounded-md; } } /* ========================================================================== Color variants ========================================================================== */ .progress-bar--default { --progress-bar-fill: var(--default-foreground); } .progress-bar--accent { --progress-bar-fill: var(--accent); } .progress-bar--success { --progress-bar-fill: var(--success); } .progress-bar--warning { --progress-bar-fill: var(--warning); } .progress-bar--danger { --progress-bar-fill: var(--danger); } } @layer components { /* ========================================================================== ProgressCircle - Circular progress indicator ========================================================================== */ /* Base styles */ .progress-circle { @apply inline-flex items-center justify-center; /* Default color token (accent) */ --progress-circle-stroke: var(--accent); --progress-circle-track-stroke: var(--default); .progress-circle__track { /* Default size (matches --md) */ @apply size-7; } .progress-circle__track-circle { stroke: var(--progress-circle-track-stroke); } .progress-circle__fill-circle { stroke: var(--progress-circle-stroke); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: stroke-dashoffset 300ms var(--ease-out); @apply motion-reduce:transition-none; } /* Indeterminate state - when no aria-valuenow is set */ &:not([aria-valuenow]) { .progress-circle__track { animation: progress-circle-spin 1s linear infinite; @apply motion-reduce:animate-none; } } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* ========================================================================== Indeterminate animation ========================================================================== */ @keyframes progress-circle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================================== Size variants ========================================================================== */ .progress-circle--sm { .progress-circle__track { @apply size-5; } } .progress-circle--md { /* No styles as this is the default size */ } .progress-circle--lg { .progress-circle__track { @apply size-9; } } /* ========================================================================== Color variants ========================================================================== */ .progress-circle--default { --progress-circle-stroke: var(--default-foreground); } .progress-circle--accent { --progress-circle-stroke: var(--accent); } .progress-circle--success { --progress-circle-stroke: var(--success); } .progress-circle--warning { --progress-circle-stroke: var(--warning); } .progress-circle--danger { --progress-circle-stroke: var(--danger); } } @layer components { /* Base spinner styles */ .spinner { @apply pointer-events-none inline-flex size-6 shrink-0 animate-spin-fast motion-reduce:animate-none; } /* Size variants */ .spinner--sm { @apply size-4; } .spinner--md { /* No styles as this is the default size */ } .spinner--lg { @apply size-8; } .spinner--xl { @apply size-10; } /* Color variants */ .spinner--current { color: inherit; } .spinner--accent { color: var(--accent); } .spinner--danger { color: var(--danger); } .spinner--success { color: var(--success); } .spinner--warning { color: var(--warning); } } @layer components { /* Toast component styles */ /* Toast Region - Container for all toasts */ .toast-region { @apply pointer-events-none fixed z-50 outline-none; @apply w-[calc(100vw-2rem)] sm:w-auto sm:min-w-(--toast-width); display: block; } /* Placement variants - Bottom */ .toast-region--bottom { /* left-1/2 + -translate-x-1/2 centers in both LTR and RTL (translate is physical) */ @apply bottom-4 left-1/2 -translate-x-1/2; } .toast-region--bottom-start { @apply start-4 bottom-4; } .toast-region--bottom-end { @apply end-4 bottom-4; } /* Placement variants - Top */ .toast-region--top { /* left-1/2 + -translate-x-1/2 centers in both LTR and RTL (translate is physical) */ @apply top-4 left-1/2 -translate-x-1/2; } .toast-region--top-start { @apply start-4 top-4; } .toast-region--top-end { @apply end-4 top-4; } .toast-region:focus-visible { @apply outline-2 outline-offset-2 outline-focus; } /* Base toast styles */ .toast { position: absolute; inset-inline-start: 0; inset-inline-end: 0; @apply pointer-events-auto flex flex-row items-start justify-start gap-1.5 bg-surface px-4 py-3 shadow-overlay; border-radius: min(32px, var(--radius-3xl)); } .toast--bottom, .toast--bottom-start, .toast--bottom-end { bottom: 0; } .toast--top, .toast--top-start, .toast--top-end { top: 0; } .toast:not([data-frontmost="true"]) { @apply pointer-events-none; height: var(--front-height); overflow: hidden; .toast__close-button { @apply pointer-events-none opacity-0; outline: none; } } .toast[data-hidden="true"] { @apply pointer-events-none flex opacity-0; } .toast:focus-visible { @apply outline-2 outline-offset-2 outline-focus; } /* Toast placements + view transitions */ .toast--bottom, .toast--bottom-start, .toast--bottom-end { view-transition-class: toast-bottom; } .toast--top, .toast--top-start, .toast--top-end { view-transition-class: toast-top; } /* Toast content */ .toast__content { @apply flex h-full grow flex-col items-start self-center; } /* Toast indicator */ .toast__indicator { @apply flex shrink-0 items-center justify-center p-1 text-overlay-foreground select-none; [data-slot="toast-default-icon"] { @apply box-content size-4; } /* Spinner styles override for toast */ [data-slot="spinner"] { @apply size-4; } [data-slot="spinner-icon"] { @apply size-4; } } /* Toast title */ .toast__title { @apply text-sm leading-5 font-medium text-overlay-foreground; } /* Toast description */ .toast__description { @apply text-sm text-muted; } /* Toast close button */ .toast__close-button { @apply pointer-events-none absolute -end-1 -top-1 size-5 border-border bg-default opacity-0 sm:border sm:bg-overlay; transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Overrides close button default icon size from 16px to 12px */ [data-slot="close-button-icon"] { @apply size-3.5 sm:size-3; } /* Overrides close button hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default; } } } /* Only show close button on hover for frontmost toast */ .toast[data-frontmost="true"]:hover .toast__close-button { @apply pointer-events-auto opacity-100; } /* Toast action button */ .toast__action { @apply mt-2 sm:mt-0; } /* Variant modifiers */ .toast--accent .toast__title { @apply text-accent-soft-foreground; } .toast--success .toast__title { @apply text-success-soft-foreground; } .toast--success .toast__indicator { @apply text-success-soft-foreground; } .toast--warning .toast__title { @apply text-warning-soft-foreground; } .toast--warning .toast__indicator { @apply text-warning-soft-foreground; } .toast--danger .toast__title { @apply text-danger-soft-foreground; } .toast--danger .toast__indicator { @apply text-danger-soft-foreground; } /* View transition animations */ ::view-transition-group(.toast-bottom), ::view-transition-group(.toast-top) { } ::view-transition-old(*), ::view-transition-new(*) { will-change: translate, opacity; } /* Bottom */ ::view-transition-new(.toast-bottom):only-child { animation: toast-slide-bottom-in 350ms; } ::view-transition-old(.toast-bottom):only-child { animation: toast-slide-bottom-out 350ms; animation-fill-mode: forwards; } /* Top */ ::view-transition-new(.toast-top):only-child { animation: toast-slide-top-in 350ms; } ::view-transition-old(.toast-top):only-child { animation: toast-slide-top-out 350ms; animation-fill-mode: forwards; } /* Keyframes */ /* Bottom */ @keyframes toast-slide-bottom-in { from { translate: 0 100%; opacity: 0; } } @keyframes toast-slide-bottom-out { to { translate: 0 100%; opacity: 0; } } /* Top */ @keyframes toast-slide-top-in { from { translate: 0 -100%; opacity: 0; } } @keyframes toast-slide-top-out { to { translate: 0 -100%; opacity: 0; } } } @layer components { .checkbox-group { @apply flex flex-col; [data-slot="checkbox"] { @apply mt-4; } } } @layer components { /* ========================================================================== Base checkbox styles ========================================================================== */ .checkbox { @apply flex flex-col items-start gap-1 outline-none no-highlight; cursor: var(--cursor-interactive); /* Field-level help text (siblings of the button), indented to align under the label */ & > [data-slot="description"], & > [data-slot="field-error"] { @apply w-full min-w-0 cursor-default ps-7 text-xs text-wrap wrap-break-word text-muted select-none; } [data-slot="label"] { @apply select-none; } .checkbox__content [data-slot="label"] { cursor: var(--cursor-interactive); } /* Disabled state */ &[data-disabled="true"] { @apply status-disabled; [data-slot="description"], [data-slot="field-error"] { @apply status-disabled; } } /* Indicator styles */ &[data-selected="true"], &[data-indeterminate="true"] { .checkbox__indicator { border-color: var(--accent-foreground); } } /* Checkmark SVG indicator */ [data-slot="checkbox-default-indicator--checkmark"] { @apply size-2.5 stroke-[2.5px] text-accent-foreground; /** * Transitions */ @apply transition-all duration-200 motion-reduce:transition-none; } &[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] { transition: stroke-dashoffset 150ms linear 15ms; } /* Invalid + Selected: checkmark icon color */ &[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], &[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"], &[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"], &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] { @apply text-danger-foreground; } /* Indeterminate line indicator */ &[data-indeterminate="true"] { [data-slot="checkbox-default-indicator--indeterminate"] { @apply size-3; } } /* Invalid + Indeterminate: indeterminate icon color */ &[data-indeterminate="true"][data-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"], &[data-indeterminate="true"][aria-invalid="true"] [data-slot="checkbox-default-indicator--indeterminate"] { @apply text-danger-foreground; } } /* ========================================================================== Checkbox control (the square button) ========================================================================== */ .checkbox__control { @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 100ms var(--ease-out); @apply motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Background indicator pseudo-element */ &::before { @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-md bg-accent opacity-0 content-['']; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: scale 100ms var(--ease-linear), opacity 200ms var(--ease-linear), background-color 200ms var(--ease-out); @apply motion-reduce:transition-none; } /* Interactive states */ /* Focus */ .checkbox:focus-visible &, .checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) &, .checkbox [data-slot="checkbox-content"][data-focus-visible="true"] & { @apply status-focused; } /* Hover */ .checkbox:hover &, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &, .checkbox [data-slot="checkbox-content"][data-hovered="true"] & { @apply border-field-border-hover; &::before { @apply bg-accent-hover; } } /* Pressed */ .checkbox:active &, .checkbox:has([data-slot="checkbox-content"][data-pressed="true"]) &, .checkbox [data-slot="checkbox-content"][data-pressed="true"] & { } /* Selection states */ /* Selected */ .checkbox[aria-checked="true"] &, .checkbox[data-selected="true"] & { @apply border-transparent text-accent-foreground; &::before { @apply scale-100 opacity-100; } } /* Indeterminate */ .checkbox[data-indeterminate="true"] & { @apply bg-accent text-accent-foreground; } /* Indeterminate + Pressed */ .checkbox:active[data-indeterminate="true"] &, .checkbox[data-pressed="true"][data-indeterminate="true"] &, .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] & { @apply bg-accent-hover; } /* Validation states */ /* Invalid (only when not selected/indeterminate) */ .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) &, .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) & { @apply status-invalid-field; } /* Invalid + Selected */ .checkbox[data-invalid="true"][aria-checked="true"] &, .checkbox[data-invalid="true"][data-selected="true"] &, .checkbox[aria-invalid="true"][aria-checked="true"] &, .checkbox[aria-invalid="true"][data-selected="true"] & { @apply border-transparent bg-danger text-danger-foreground; &::before { @apply scale-100 bg-danger opacity-100; } } /* Invalid + Indeterminate */ .checkbox[data-indeterminate="true"][aria-invalid="true"] &, .checkbox[data-indeterminate="true"][data-invalid="true"] & { @apply bg-danger text-danger-foreground; } } /* ========================================================================== Checkbox indicator ========================================================================== */ .checkbox__indicator { @apply relative z-10 flex size-3 items-center justify-center; & svg { @apply size-full transform-gpu; } } /* ========================================================================== Disabled modifier ========================================================================== */ .checkbox--disabled { @apply status-disabled; } /* ========================================================================== Variant property definitions ========================================================================== */ .checkbox--primary { /* Default styles */ } .checkbox--secondary .checkbox__control { @apply shadow-none; background-color: var(--checkbox-control-bg); --checkbox-control-bg: var(--default); /* Hover state */ .checkbox:hover &, .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &, .checkbox [data-slot="checkbox-content"][data-hovered="true"] & { @apply border-field-border-hover; } } /* Checkbox content — the clickable label (control + label text) */ .checkbox__content { @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight; } /* Unselected state background for secondary variant */ .checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not( [data-indeterminate="true"] ) .checkbox__control { background-color: var(--checkbox-control-bg); } /* Selected state on secondary variant */ .checkbox--secondary[aria-checked="true"] .checkbox__control, .checkbox--secondary[data-selected="true"] .checkbox__control { &::before { @apply bg-accent; } } /* Indeterminate state on secondary variant */ .checkbox--secondary[data-indeterminate="true"] .checkbox__control { @apply bg-accent; &::before { @apply bg-accent; } } } @layer components { /* Base component styles */ .fieldset { @apply flex flex-col gap-6; /* fix flexbox issue in Safari when fieldset with legend is inside a flexbox */ @apply shrink grow basis-0; } .fieldset__legend { @apply text-base font-medium text-foreground; } .fieldset__field_group { @apply w-full space-y-4; } .fieldset__actions { @apply flex items-center gap-2 pt-1; } } @layer components { /* Base container */ .input-otp { @apply relative flex w-full items-center gap-2; &[data-disabled="true"] { @apply cursor-not-allowed opacity-50; } } /* Group - slots separated with gap */ .input-otp__group { @apply flex min-w-0 items-center gap-2; } /* Individual slot box - fully rounded, standalone */ .input-otp__slot { @apply relative flex h-10 w-9.5 min-w-0 flex-1 items-center justify-center; @apply border bg-field text-field-foreground shadow-field; @apply rounded-field text-sm font-semibold outline-none; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Active/Focus */ &[data-active="true"] { @apply z-10 bg-field-focus status-focused-field; } /* Filled */ &[data-filled="true"] { @apply bg-field-focus; } /* Disabled */ &[data-disabled="true"] { @apply status-disabled; } /* Invalid */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); } } /* Slot value */ .input-otp__slot-value { @apply text-lg leading-6 tracking-[-0.27px]; /** * Animations * CRITICAL: motion-reduce must be AFTER animation for correct override specificity */ animation: slot-value-in 250ms var(--ease-smooth) both; transform-origin: bottom center; @apply motion-reduce:animate-none; } /* Caret */ .input-otp__caret { @apply absolute h-4 w-[2px] animate-caret-blink rounded-sm bg-field-placeholder; } /* Separator */ .input-otp__separator { @apply h-[2px] w-[6px] shrink-0 rounded-sm bg-separator; } /* Variant property definitions */ .input-otp--primary { /* Default styles */ } .input-otp--secondary .input-otp__slot { @apply shadow-none; background-color: var(--input-otp-slot-bg); --input-otp-slot-bg: var(--default); --input-otp-slot-bg-hover: var(--default-hover); --input-otp-slot-bg-focus: var(--default); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--input-otp-slot-bg-hover); } } &[data-active="true"], &[data-filled="true"] { background-color: var(--input-otp-slot-bg-focus); } } /* Animations */ @keyframes slot-value-in { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } } } @layer components { .input { @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus state */ &:focus, &[data-focused="true"] { @apply status-focused-field; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* Variant property definitions */ .input--primary { /* Default styles */ } .input--secondary { @apply shadow-none; background-color: var(--input-bg); --input-bg: var(--default); --input-bg-hover: var(--default-hover); --input-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) { background-color: var(--input-bg-hover); } } &:focus, &[data-focused="true"] { background-color: var(--input-bg-focus); } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--input-bg-focus); } } /* Full width modifier */ .input--full-width { @apply w-full; } } @layer components { /* Input group styles */ .input-group { @apply inline-flex min-h-9 items-center rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none; border-width: var(--border-width-field); border-color: var(--field-border); /* When textarea is present, align items to start and allow height to grow */ &:has([data-slot="input-group-textarea"]) { @apply items-start; height: auto; } /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus within state - only when input/textarea is focused */ &:has([data-slot="input-group-input"]:focus), &:has([data-slot="input-group-textarea"]:focus) { @apply status-focused-field; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } /* Disabled state */ &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } /** * Browser autofill state. * The user-agent paints `:-webkit-autofill`/`:autofill` on the inner * element only, inside its content box. Because the inner input has its * border-radius stripped on whichever side touches a prefix/suffix, the * autofill highlight ends up as a sharp-cornered rectangle and the * prefix/suffix slots receive no highlight at all. Lift the highlight * onto the group so the rounded shell + prefix + suffix all share it. */ &:has([data-slot="input-group-input"]:-webkit-autofill), &:has([data-slot="input-group-input"]:autofill) { background-color: var(--field-focus); border-color: var(--field-border-focus); } } .input-group__input { @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none placeholder:text-field-placeholder sm:text-sm; /* Remove border radius on left side when prefix is present */ .input-group:has([data-slot="input-group-prefix"]) & { @apply rounded-s-none ps-0; } /* Remove border radius on right side when suffix is present */ .input-group:has([data-slot="input-group-suffix"]) & { @apply rounded-e-none pe-0; } /* Focus state - handled by group */ &:focus, &:focus-visible { @apply outline-none; } /** * Neutralize the browser's per-input autofill paint so the inner * doesn't draw a sharp-cornered yellow rectangle. The unified highlight * is applied to `.input-group` above. Preserve the autofilled text and * caret colors, and pin the background-color transition so the inset * box-shadow trick doesn't flicker on state changes. */ &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:autofill { -webkit-box-shadow: 0 0 0 1000px transparent inset; box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out 0s; } } /* TextArea within InputGroup - uses same base class as input but with textarea-specific styles */ .input-group__input[data-slot="input-group-textarea"] { min-height: 38px; resize: vertical; } .input-group__prefix { @apply flex h-full items-center justify-center rounded-s-field rounded-e-none bg-transparent px-3 text-field-placeholder; border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-inline-end-color: var(--field-border); border-inline-start: none; border-top: none; border-bottom: none; /* Align to top when textarea is present */ .input-group:has([data-slot="input-group-textarea"]) & { @apply items-start; padding-top: 0.5rem; } /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); @apply motion-reduce:transition-none; } .input-group__suffix { @apply flex h-full items-center justify-center rounded-s-none rounded-e-field bg-transparent px-3 text-field-placeholder; border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; border-inline-start-color: var(--field-border); border-inline-end: none; border-top: none; border-bottom: none; /* Align to top when textarea is present */ .input-group:has([data-slot="input-group-textarea"]) & { @apply items-start; padding-top: 0.5rem; } /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); @apply motion-reduce:transition-none; } /* Variant property definitions */ .input-group--primary { /* Default styles */ } .input-group--secondary { @apply shadow-none; background-color: var(--input-group-bg); --input-group-bg: var(--default); --input-group-bg-hover: var(--default-hover); --input-group-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--input-group-bg-hover); } } &:has([data-slot="input-group-input"]:focus), &:has([data-slot="input-group-textarea"]:focus) { background-color: var(--input-group-bg-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; border-color: var(--color-field-border-invalid); background-color: var(--input-group-bg-focus); } [data-slot="input-group-input"], [data-slot="input-group-textarea"] { @apply bg-transparent; } } /* Full width modifier */ .input-group--full-width { @apply w-full; } } @layer components { /* Number field styles */ .number-field { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } } .number-field__group { @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none; border-width: var(--border-width-field); border-color: var(--field-border); grid-template-columns: 40px 1fr 40px; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus within state */ &[data-focus-within="true"], &:focus-within { @apply status-focused-field; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } /* Disabled state */ &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } /** * Browser autofill state. * The user-agent paints `:-webkit-autofill`/`:autofill` on the inner * only. Because the input has its border-radius stripped on whichever side * touches the increment/decrement buttons, the autofill highlight ends up * as a sharp-cornered rectangle and the buttons receive no highlight. * Lift the highlight onto the group so the rounded shell + buttons all * share it. (Affects autofilled numeric fields, e.g. OTP/year inputs.) */ &:has([data-slot="number-field-input"]:-webkit-autofill), &:has([data-slot="number-field-input"]:autofill) { background-color: var(--field-focus); border-color: var(--field-border-focus); } } .number-field__input { @apply min-w-0 rounded-none border-0 bg-transparent px-3 py-2 text-base tabular-nums shadow-none outline-none sm:text-sm; /* Remove border radius on left side when decrement button is present */ .number-field__group:has([slot="decrement"]) & { @apply rounded-s-none; } /* Remove border radius on right side when increment button is present */ .number-field__group:has([slot="increment"]) & { @apply rounded-e-none; } /* Focus state - handled by group */ &:focus, &:focus-visible { @apply outline-none; } /** * Neutralize the browser's per-input autofill paint so the inner * doesn't draw a sharp-cornered yellow rectangle. The unified highlight * is applied to `.number-field__group` above. Preserve the autofilled * text and caret colors, and pin the background-color transition so the * inset box-shadow trick doesn't flicker on state changes. */ &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:autofill { -webkit-box-shadow: 0 0 0 1000px transparent inset; box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out 0s; } } .number-field__increment-button, .number-field__decrement-button { @apply flex h-full w-10 items-center justify-center rounded-none bg-transparent text-field-foreground outline-none; border-width: var(--border-width-field); border-color: var(--field-border); border-style: solid; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth); @apply motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); /* Hover state */ &:hover, &[data-hovered="true"] { } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { } /* Pressed state */ &:active, &[data-pressed="true"] { @apply bg-field-foreground/10; transform: scale(0.97); } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } /* Icon styling */ [data-slot="number-field-increment-button-icon"], [data-slot="number-field-decrement-button-icon"] { @apply size-4; } } .number-field__increment-button { @apply rounded-s-none rounded-e-field border-s border-field-placeholder/15; } .number-field__decrement-button { @apply rounded-s-field rounded-e-none border-e border-field-placeholder/15; } /* Variant property definitions */ .number-field--primary { /* Default styles */ } .number-field--secondary .number-field__group { @apply shadow-none; background-color: var(--number-field-group-bg); --number-field-group-bg: var(--default); --number-field-group-bg-hover: var(--default-hover); --number-field-group-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--number-field-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--number-field-group-bg-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; border-color: var(--color-field-border-invalid); background-color: var(--number-field-group-bg-focus); } [data-slot="number-field-input"] { @apply bg-transparent; } } /* Full width modifier */ .number-field--full-width { @apply w-full; } .number-field__group--full-width { @apply w-full; } } @layer components { /* Radio Group base styles */ .radio-group { @apply flex flex-col; /* Default orientation */ &[data-orientation="vertical"] { [data-slot="radio"] { @apply mt-4; } } &[data-orientation="horizontal"] { @apply flex-row flex-wrap gap-4; } } /* Variant property definitions */ .radio-group--primary { /* Default styles */ } .radio-group--secondary .radio__control { @apply shadow-none; background-color: var(--radio-control-bg); --radio-control-bg: var(--default); --radio-control-bg-hover: var(--default-hover); /* Hover state */ .radio:has([data-slot="radio-content"][data-hovered="true"]) &, .radio [data-slot="radio-content"][data-hovered="true"] & { @apply border-field-border-hover; } /* Default indicator color (unselected) */ .radio:not([data-selected]):not(:has(input:checked)) & .radio__indicator:empty::before { background-color: var(--radio-control-bg); } /* Hover indicator color (unselected) */ .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not( :has(input:checked) ) & { .radio__indicator:empty::before { background-color: var(--radio-control-bg-hover); } } } } @layer components { /* ========================================================================== Base radio styles Structure (explicit composition): .radio → RadioField wrapper (column) .radio__content → RadioButton: the clickable row (control + label) .radio__control [data-slot="label"] [data-slot="description"] → field-level sibling, below the row [data-slot="field-error"] ========================================================================== */ .radio { @apply flex flex-col items-start gap-1 outline-none no-highlight; cursor: var(--cursor-interactive); [data-slot="label"] { @apply select-none; } .radio__content [data-slot="label"] { cursor: var(--cursor-interactive); } /* Field-level help text (siblings of the button), indented to align under the label */ & > [data-slot="description"], & > [data-slot="field-error"] { @apply w-full min-w-0 cursor-default ps-7 text-xs text-wrap wrap-break-word text-muted select-none; } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; [data-slot="description"], [data-slot="field-error"] { @apply status-disabled; } } } /* Radio content — the clickable label (control + label text) */ .radio__content { @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight; } /* ========================================================================== Radio control (the circular button) ========================================================================== */ .radio__control { @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 100ms var(--ease-out); @apply motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Interactive states */ /* Focus */ .radio:has([data-slot="radio-content"][data-focus-visible="true"]) &, .radio [data-slot="radio-content"][data-focus-visible="true"] & { @apply status-focused; } /* Hover */ .radio:has([data-slot="radio-content"][data-hovered="true"]) &, .radio [data-slot="radio-content"][data-hovered="true"] & { @apply border-field-border-hover; } /* Hover - only when not selected */ .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not( :has(input:checked) ) & { .radio__indicator:empty::before { @apply bg-field-hover; } } /* Pressed */ .radio:has([data-slot="radio-content"][data-pressed="true"]) &, .radio [data-slot="radio-content"][data-pressed="true"] & { @apply scale-95; } /* Selection states */ /* Selected */ .radio[data-selected] &, .radio:has([data-slot="radio-content"][aria-checked="true"]) &, .radio:has(input:checked) & { @apply border-transparent bg-accent; } /* Selected + Pressed */ .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & { @apply bg-accent-hover; } /* Validation states */ /* Invalid */ .radio[data-invalid="true"] &, .radio[aria-invalid="true"] & { @apply status-invalid-field; } /* Invalid + Selected */ .radio[data-invalid="true"][data-selected] &, .radio[aria-invalid="true"][data-selected] &, .radio[data-invalid="true"]:has(input:checked) &, .radio[aria-invalid="true"]:has(input:checked) & { @apply status-invalid-field; } } /* ========================================================================== Radio indicator (the inner dot) ========================================================================== */ .radio__indicator { @apply absolute inset-0 flex items-center justify-center; pointer-events: none; } /* :empty pseudo-class ensures these styles only apply when the indicator has no custom children (e.g., custom icon). When custom content is present, these default dot styles are not applied. */ .radio__indicator:empty::before { content: ""; @apply rounded-lg bg-field; width: 100%; height: 100%; scale: 1; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: scale 200ms var(--ease-out), background-color 200ms var(--ease-out); @apply motion-reduce:transition-none; } /* Selected state */ .radio[data-selected] .radio__indicator:empty::before, .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty::before, .radio:has(input:checked) .radio__indicator:empty::before { @apply bg-accent-foreground; scale: 0.4286; /* 6px */ } /* Selected + Pressed state */ .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty::before, .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) .radio__indicator:empty::before, .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) .radio__indicator:empty::before { scale: 0.5714; /* 8px */ } /* ========================================================================== Disabled modifier ========================================================================== */ .radio--disabled { @apply status-disabled; } } @layer components { /* Text field styles */ /* use textfield instead of text-field to avoid conflict with Tailwind `text-` prefix */ .textfield { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } } /* Full width modifier */ .textfield--full-width { @apply w-full; /* Automatically make Input full width when TextField is full width */ [data-slot="input"], [data-slot="textarea"] { @apply w-full; } } } @layer components { /* Search field styles */ .search-field { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } &[data-empty="true"] { [data-slot="search-field-clear-button"] { @apply pointer-events-none opacity-0; } } } .search-field__group { @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus within state */ &[data-focus-within="true"], &:focus-within { @apply status-focused-field; } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } /* Disabled state */ &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } /** * Browser autofill state. * The user-agent paints `:-webkit-autofill`/`:autofill` on the inner * only. Because the input has its border-radius stripped on whichever side * touches the search icon or clear button, the autofill highlight ends up * as a sharp-cornered rectangle and the sibling slots receive no highlight. * Lift the highlight onto the group so the rounded shell + icon + clear * button all share it. */ &:has([data-slot="search-field-input"]:-webkit-autofill), &:has([data-slot="search-field-input"]:autofill) { background-color: var(--field-focus); border-color: var(--field-border-focus); } } .search-field__input { @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm; /* Hide browser default search clear button */ &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* Remove border radius on left side when search icon is present */ .search-field__group:has([data-slot="search-field-search-icon"]) & { @apply rounded-s-none ps-2; } /* Remove border radius on right side when clear button is present */ .search-field__group:has([slot="clear"]) & { @apply rounded-e-none pe-2; } /* Focus state - handled by group */ &:focus, &:focus-visible { @apply outline-none; } /** * Neutralize the browser's per-input autofill paint so the inner * doesn't draw a sharp-cornered yellow rectangle. The unified highlight * is applied to `.search-field__group` above. Preserve the autofilled * text and caret colors, and pin the background-color transition so the * inset box-shadow trick doesn't flicker on state changes. */ &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:autofill { -webkit-box-shadow: 0 0 0 1000px transparent inset; box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--field-foreground); caret-color: var(--field-foreground); transition: background-color 9999s ease-in-out 0s; } } .search-field__search-icon { @apply pointer-events-none shrink-0 text-field-placeholder; @apply ms-3 me-0 size-4; } .search-field__clear-button { @apply me-2 size-5 shrink-0; /* Overrides close button default icon size from 16px to 12px */ [data-slot="close-button-icon"] { @apply size-3; } } /* Variant property definitions */ .search-field--primary { /* Default styles */ } .search-field--secondary .search-field__group { @apply shadow-none; background-color: var(--search-field-group-bg); --search-field-group-bg: var(--default); --search-field-group-bg-hover: var(--default-hover); --search-field-group-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--search-field-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--search-field-group-bg-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; border-color: var(--color-field-border-invalid); background-color: var(--search-field-group-bg-focus); } [data-slot="search-field-input"] { @apply bg-transparent; } } /* Full width modifier */ .search-field--full-width { @apply w-full; } .search-field__group--full-width { @apply w-full; } } @layer components { /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */ .textarea { @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm; min-height: 38px; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus state */ &:focus, &[data-focused="true"] { @apply status-focused-field; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { } &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* Variant property definitions */ .textarea--primary { /* Default styles */ } .textarea--secondary { @apply shadow-none; background-color: var(--textarea-bg); --textarea-bg: var(--default); --textarea-bg-hover: var(--default-hover); --textarea-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus):not(:focus-visible), &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) { background-color: var(--textarea-bg-hover); } } &:focus, &[data-focused="true"] { background-color: var(--textarea-bg-focus); } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--textarea-bg-focus); } } /* Full width modifier */ .textarea--full-width { @apply w-full; } } @layer components { /* ============================================================================= * Calendar Component Styles * * A compound component for date selection. * Uses BEM naming convention: calendar, calendar__element, calendar--modifier * ============================================================================= */ /* ----------------------------------------------------------------------------- * Base Calendar Styles * -------------------------------------------------------------------------- */ .calendar { @apply w-63 max-w-63; container-type: inline-size; } /* Week view – visibleDuration={{ weeks: n }} */ .calendar--week-view { .calendar__cell { /* Keep cells circular on the 7-column grid; only filled cells take space. */ @apply aspect-square size-auto w-full place-self-center; } } /* Day view – visibleDuration={{ days: n }} */ .calendar--day-view { .calendar__cell { @apply aspect-square size-auto w-full place-self-center; } /* * Isolate header and body into separate 7-column grids. With display:contents * on the root grid, fewer than 7 weekday headers flow into the same row as dates. */ .calendar__grid { display: flex; flex-direction: column; } .calendar__grid-header { display: grid; grid-template-columns: repeat(7, 1fr); @apply w-full; & > tr { display: contents; } } .calendar__grid-body { display: grid; grid-template-columns: repeat(7, 1fr); @apply mt-1 w-full; & > tr { display: contents; } & > tr:first-child > td { @apply mt-0; } } } /* ----------------------------------------------------------------------------- * Calendar Header * -------------------------------------------------------------------------- */ .calendar__header { @apply flex items-center justify-between px-0.5 pb-4; &:has(.calendar-year-picker__trigger[data-open="true"]) { .calendar__nav-button { @apply pointer-events-none opacity-0; } } } .calendar__heading { @apply flex-1 text-sm font-medium; } .calendar__nav-button { @apply flex size-6 items-center justify-center rounded-2xl text-accent-soft-foreground; will-change: scale; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Hover state – only on devices that support hover (avoids false triggers on touch) */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default text-accent-soft-foreground; } } /* Pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.95); } /* Focus state */ &:focus-visible, &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[data-disabled="true"] { @apply status-disabled; } } .calendar__nav-button-icon { @apply size-4 rtl:rotate-180; } /* ----------------------------------------------------------------------------- * Calendar Grid * -------------------------------------------------------------------------- */ .calendar__grid { /* Override table display with CSS Grid for easier customization */ display: grid; grid-template-columns: repeat(7, 1fr); @apply w-full; &[aria-readonly="true"] { .calendar__cell { @apply pointer-events-none; } } } .calendar__grid-header { /* Grid header (thead) styles */ display: contents; & > tr { display: contents; } } .calendar__grid-body { /* Grid body (tbody) styles */ display: contents; & > tr { display: contents; } /* Add top spacing between header and first body row */ & > tr:first-child > td { @apply mt-1; } } .calendar__grid-row { /* Use 'contents' so cells participate directly in grid */ /* Note: This class can be used for custom row styling if needed */ display: contents; } .calendar__header-cell { /* Header cell (th - weekday names) styles */ @apply flex items-center justify-center pb-2 text-xs font-medium text-muted; } /* ----------------------------------------------------------------------------- * Calendar Cells * -------------------------------------------------------------------------- */ .calendar__cell { /* Cell (td) wrapper styles - margins now work with grid layout */ @apply relative flex aspect-square size-full items-center justify-center rounded-3xl text-center text-sm font-medium outline-none no-highlight; will-change: scale; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out), box-shadow 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Today indicator */ &[data-today="true"] { @apply bg-accent-soft text-accent-soft-foreground; @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { @apply bg-accent-soft-hover; } } } /* Selected state */ &[data-selected="true"] { @apply bg-accent text-accent-foreground; } /* Pressed state */ &:active, &[data-pressed="true"] { @apply bg-default; transform: scale(0.95); &[data-selected="true"] { @apply bg-accent-hover; } } /* Hover state – only on devices that support hover (avoids false triggers on touch) */ @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { @apply bg-default; } } /* Outside month (previous/next month days) */ &[data-outside-month="true"] { @apply text-muted opacity-50; } &[data-selected="true"][data-outside-month="true"] { @apply bg-default; } /* Unavailable dates */ &[data-unavailable="true"] { @apply status-disabled; } /* Disabled state */ &:disabled:not([data-outside-month="true"]), &[data-disabled="true"]:not([data-outside-month="true"]) { @apply status-disabled; text-decoration: line-through; } } /* Cell indicator - small dot at bottom center of cell */ .calendar__cell-indicator { @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted; /* Indicator color changes when cell is selected */ [data-selected="true"] > & { @apply bg-accent-foreground; } } } @layer components { /* ============================================================================= * RangeCalendar Component Styles * * A compound component for contiguous date range selection. * Uses BEM naming convention: range-calendar, range-calendar__element, range-calendar--modifier * ============================================================================= */ /* ----------------------------------------------------------------------------- * Base RangeCalendar Styles * -------------------------------------------------------------------------- */ .range-calendar { @apply w-63 max-w-63; container-type: inline-size; } /* Week view – visibleDuration={{ weeks: n }} */ .range-calendar--week-view { .range-calendar__cell { /* Keep cells circular on the 7-column grid; only filled cells take space. */ @apply aspect-square size-auto w-full place-self-center; } } /* Day view – visibleDuration={{ days: n }} */ .range-calendar--day-view { .range-calendar__cell { @apply aspect-square size-auto w-full place-self-center; } /* * Isolate header and body into separate 7-column grids. With display:contents * on the root grid, fewer than 7 weekday headers flow into the same row as dates. */ .range-calendar__grid { display: flex; flex-direction: column; } .range-calendar__grid-header { display: grid; grid-template-columns: repeat(7, 1fr); @apply w-full; & > tr { display: contents; } } .range-calendar__grid-body { display: grid; grid-template-columns: repeat(7, 1fr); @apply mt-1 w-full; & > tr { display: contents; } & > tr:first-child > td { @apply mt-0; } } } /* ----------------------------------------------------------------------------- * RangeCalendar Header * -------------------------------------------------------------------------- */ .range-calendar__header { @apply flex items-center justify-between px-0.5 pb-4; &:has(.calendar-year-picker__trigger[data-open="true"]) { .range-calendar__nav-button { @apply pointer-events-none opacity-0; } } } .range-calendar__heading { @apply flex-1 text-sm font-medium; } .range-calendar__nav-button { @apply flex size-6 items-center justify-center rounded-xl text-accent-soft-foreground; will-change: scale; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out), background-color 100ms var(--ease-out), box-shadow 100ms var(--ease-out), opacity 150ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Hover state – only on devices that support hover (avoids false triggers on touch) */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default text-accent-soft-foreground; } } /* Pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.95); } /* Focus state */ &:focus-visible, &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[data-disabled="true"] { @apply status-disabled; } } .range-calendar__nav-button-icon { @apply size-4 rtl:rotate-180; } /* ----------------------------------------------------------------------------- * RangeCalendar Grid * -------------------------------------------------------------------------- */ .range-calendar__grid { /* Override table display with CSS Grid for easier customization */ display: grid; grid-template-columns: repeat(7, 1fr); @apply w-full; &[aria-readonly="true"] { .range-calendar__cell { @apply pointer-events-none; } } } .range-calendar__grid-header { /* Grid header (thead) styles */ display: contents; & > tr { display: contents; } } .range-calendar__grid-body { /* Grid body (tbody) styles */ display: contents; & > tr { display: contents; } /* Add top spacing between header and first body row */ & > tr:first-child > td { @apply mt-1; } } .range-calendar__grid-row { /* Use 'contents' so cells participate directly in grid */ /* Note: This class can be used for custom row styling if needed */ display: contents; } .range-calendar__header-cell { /* Header cell (th - weekday names) styles */ @apply flex items-center justify-center pb-2 text-xs font-medium text-muted; } /* ----------------------------------------------------------------------------- * RangeCalendar Cells * -------------------------------------------------------------------------- */ .range-calendar__cell { @apply relative z-1 mx-0 my-[2px] rounded-3xl p-0 outline-none; cursor: var(--cursor-interactive); will-change: background-color, border-color; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: box-shadow 100ms var(--ease-out), border-color 100ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; /* Inner interactive circle/capsule (equivalent to React Aria "button-base") */ .range-calendar__cell-button { @apply flex aspect-square w-full items-center justify-center rounded-3xl text-sm font-medium text-foreground no-highlight; will-change: scale; transition: scale 200ms var(--ease-out); @apply transform-gpu motion-reduce:transition-none; } /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply z-2; .range-calendar__cell-button { @apply status-focused; } } /* Today indicator */ &[data-today="true"] { .range-calendar__cell-button { @apply bg-accent-soft text-accent-soft-foreground; } @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { .range-calendar__cell-button { @apply bg-accent-soft-hover; } } } } /* Range selected track (middle segment) */ &[data-selected="true"]:not([data-outside-month="true"]) { @apply rounded-none bg-accent-soft; } /* Round row boundaries so the range track looks continuous across weeks */ &[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) { @apply rounded-ss-lg rounded-es-lg; &[data-selection-start="true"] { @apply rounded-ss-3xl rounded-es-3xl; } } &[data-selected="true"]:is(td:last-child > *, td:has(+ [aria-disabled]) > *) { @apply rounded-se-lg rounded-ee-lg; &[data-selection-end="true"] { @apply rounded-se-3xl rounded-ee-3xl; } } /* Range caps (start/end) */ &[data-selection-start="true"]:not([data-outside-month="true"]), &[data-selection-end="true"]:not([data-outside-month="true"]) { @apply z-2; .range-calendar__cell-button { @apply bg-accent text-accent-foreground; } } /* &[data-selection-start="true"]:has(+ [data-selection-end="true"]) { @apply rounded-full; } */ &[data-selection-start="true"]:not([data-outside-month="true"]) { @apply rounded-ss-3xl rounded-es-3xl; } &[data-selection-end="true"]:not([data-outside-month="true"]) { @apply rounded-se-3xl rounded-ee-3xl; } /* Pressed state */ &:active, &[data-pressed="true"] { .range-calendar__cell-button { scale: 0.9; } &[data-selection-start="true"], &[data-selection-end="true"] { .range-calendar__cell-button { @apply bg-accent-hover; } } } /* Hover state for non-selected days */ @media (hover: hover) { &:hover:not([data-selected="true"]), &[data-hovered="true"]:not([data-selected="true"]) { .range-calendar__cell-button { @apply bg-default; } } } /* Outside month (previous/next month days) */ &[data-outside-month="true"] { @apply text-muted opacity-50; } &[data-selected="true"][data-outside-month="true"]:not( [data-selection-start="true"], [data-selection-end="true"] ) { @apply bg-default/20; } /* Unavailable dates */ &[data-unavailable="true"] { @apply status-disabled; } /* Disabled state */ &:disabled:not([data-outside-month="true"]), &[data-disabled="true"]:not([data-outside-month="true"]) { @apply status-disabled; text-decoration: line-through; } } /* Outside-month cell followed by selected cell across adjacent table cells */ .range-calendar__grid-body td:has(> .range-calendar__cell[data-outside-month="true"]) + td > .range-calendar__cell[data-selected="true"] { @apply rounded-ss-lg rounded-es-lg; &[data-outside-month="true"], &[data-selection-start="true"] { @apply rounded-ss-3xl rounded-es-3xl; } } /* Selected cell followed by outside-month cell across adjacent table cells */ .range-calendar__grid-body td:has(> .range-calendar__cell[data-selected="true"]):has( + td > .range-calendar__cell[data-outside-month="true"] ) > .range-calendar__cell[data-selected="true"] { @apply rounded-se-lg rounded-ee-lg; &[data-outside-month="true"], &[data-selection-end="true"] { @apply rounded-se-3xl rounded-ee-3xl; } } /* Cell indicator - small dot at bottom center of cell */ .range-calendar__cell-indicator { @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted; /* Indicator color changes when cell is selected */ [data-selected="true"] > & { @apply bg-accent-foreground; } } } @layer components { /* ============================================================================= * Calendar Year Picker Component Styles * * Internal component used inside Calendar / RangeCalendar to provide a * toggleable year selector. Uses CSS :has() on the parent .calendar to * drive crossfade transitions. * * The year grid is absolutely positioned and sized via JS to match the * day grid's exact area. This keeps the calendar's original block layout * completely untouched. * * BEM naming: calendar-year-picker__element, calendar-year-picker--modifier * ============================================================================= */ /* ----------------------------------------------------------------------------- * Positioning Context * -------------------------------------------------------------------------- */ .calendar:has(.calendar-year-picker__year-grid), .range-calendar:has(.calendar-year-picker__year-grid) { position: relative; } /* ----------------------------------------------------------------------------- * Crossfade + Blur Transitions * * The crossfade is staggered to avoid both grids being semi-transparent at * the same time (ghosting). When opening, the day grid fades out first, * then the year grid fades in. When closing, the year grid fades out first, * then the day grid fades in (via transition-delay). * * -------------------------------------------------------------------------- */ /* Day grid – default visible */ .calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] { will-change: opacity; transition: opacity 150ms var(--ease-out), visibility 0ms linear; @apply motion-reduce:transition-none; } /* Day grid – hidden when year picker is open (fade + blur out) */ .calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"], .range-calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="range-calendar-grid"] { @apply pointer-events-none opacity-0; visibility: hidden; transition: opacity 150ms var(--ease-out), visibility 0ms linear 150ms; @apply motion-reduce:transition-none; } /* ----------------------------------------------------------------------------- * Trigger Button * -------------------------------------------------------------------------- */ .calendar-year-picker__trigger { @apply flex flex-1 items-center justify-start gap-1 rounded-lg outline-none; cursor: var(--cursor-interactive); touch-action: manipulation; /* Focus state */ &:focus-visible { @apply status-focused; } } .calendar-year-picker__trigger-heading { @apply text-sm font-medium; transition: color 150ms var(--ease-out); @apply motion-reduce:transition-none; } .calendar-year-picker__trigger-indicator { @apply text-xs text-accent-soft-foreground rtl:[transform:rotate(180deg)]; transition: transform 150ms var(--ease-out); @apply motion-reduce:transition-none; } /* Rotate chevron when open */ .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator { transform: rotate(90deg); } .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading { @apply text-accent-soft-foreground; } /* ----------------------------------------------------------------------------- * Year Grid Container * * Absolutely positioned over the day grid area. The exact `top` and `height` * are set via JS to match the sibling day grid element. * -------------------------------------------------------------------------- */ .calendar-year-picker__year-grid { @apply pointer-events-none absolute start-0 end-0 grid scrollbar content-start gap-1 overflow-y-auto p-1 opacity-0; grid-template-columns: repeat(3, 1fr); /* When closing: instant (no transition) */ will-change: opacity; } .calendar-year-picker__year-grid[data-open="true"] { @apply pointer-events-auto opacity-100; /* When opening: slight delay so the day grid starts fading out first */ transition: opacity 200ms var(--ease-out) 50ms; @apply motion-reduce:transition-none; } /* ----------------------------------------------------------------------------- * Year Cell * -------------------------------------------------------------------------- */ .calendar-year-picker__year-cell { @apply relative inline-flex h-8 items-center justify-center rounded-3xl px-2.5 text-sm font-medium outline-none select-none no-highlight; touch-action: manipulation; /** * Transitions – same as .tag * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 100ms var(--ease-smooth), scale 100ms var(--ease-smooth), opacity 100ms var(--ease-smooth), background-color 100ms var(--ease-smooth), box-shadow 100ms var(--ease-out); @apply origin-center transform-gpu motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Hover state (when not selected) – only on devices that support hover */ @media (hover: hover) and (pointer: fine) { &:is(:hover, [data-hovered="true"]):not([data-selected="true"]) { @apply bg-default text-default-foreground; } } /* Selected state (current year) – same as .tag[data-selected] */ &[data-selected="true"], &[aria-selected="true"] { @apply bg-accent text-accent-foreground; @media (hover: hover) and (pointer: fine) { &:is(:hover, [data-hovered="true"]) { @apply bg-accent-hover; } } } /* Focus state */ &:focus-visible { @apply status-focused; } } } @layer components { /* Date field styles */ .date-field { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } } /* Full width modifier */ .date-field--full-width { @apply w-full; } } @layer components { /* Time field styles */ .time-field { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } } /* Full width modifier */ .time-field--full-width { @apply w-full; } } @layer components { /* Date input group styles */ .date-input-group { @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none; border-width: var(--border-width-field); border-color: var(--field-border); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Hover state */ @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus within state */ &[data-focus-within="true"]:not( :has( [data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"] ) ), &:focus-within:not( :has( [data-slot="date-picker-trigger"]:focus, [data-slot="date-picker-trigger"][data-focused="true"], [data-slot="date-range-picker-trigger"]:focus, [data-slot="date-range-picker-trigger"][data-focused="true"] ) ) { @apply status-focused-field; } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; background-color: var(--field-focus); border-color: var(--color-field-border-invalid); } /* Disabled state */ &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } .date-input-group__input { @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm; /* Remove border radius on left side when prefix is present */ .date-input-group:has([data-slot="date-input-group-prefix"]) & { @apply rounded-s-none ps-2; } /* Remove border radius on right side when suffix is present */ .date-input-group:has([data-slot="date-input-group-suffix"]) & { @apply rounded-e-none pe-2; } .date-input-group:has(.date-range-picker__range-separator) & { &[slot="start"] { @apply flex-none pe-0; } &[slot="end"] { @apply ps-0; } } /* Focus state - handled by group */ &:focus, &:focus-visible { @apply outline-none; } } .date-input-group__input-container { @apply flex flex-1 scrollbar-none items-center; width: fit-content; overflow-x: auto; overflow-y: clip; } .date-input-group__segment { @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none; /* Segment separators styling "/" */ &[data-type="literal"] { @apply p-0 text-muted; } /* Placeholder styling */ &[data-placeholder="true"] { @apply text-field-placeholder; } /* Focused segment */ &:focus, &[data-focused="true"] { @apply bg-accent-soft text-accent-soft-foreground; } /* Disabled segment */ &[data-disabled="true"] { @apply opacity-50; } /* Invalid segment */ &[data-invalid="true"] { @apply text-danger; /* Focused segment */ &:focus, &[data-focused="true"] { @apply bg-danger-soft text-danger-soft-foreground; } } } .date-input-group__prefix { @apply pointer-events-none shrink-0 text-field-placeholder; @apply ms-3 me-0 flex items-center; } .date-input-group__suffix { @apply pointer-events-none shrink-0 text-field-placeholder; @apply me-3 flex items-center; } /* Variant property definitions */ .date-input-group--primary { /* Default styles */ } .date-input-group--secondary { @apply shadow-none; background-color: var(--date-input-group-bg); --date-input-group-bg: var(--default); --date-input-group-bg-hover: var(--default-hover); --date-input-group-bg-focus: var(--default); @media (hover: hover) { &:hover:not(:focus-within), &[data-hovered="true"]:not([data-focus-within="true"]) { background-color: var(--date-input-group-bg-hover); } } &:focus-within, &[data-focus-within="true"] { background-color: var(--date-input-group-bg-focus); } /* Invalid state */ &[data-invalid="true"] { @apply status-invalid-field; border-color: var(--color-field-border-invalid); background-color: var(--date-input-group-bg-focus); } [data-slot="date-input-group-input"] { @apply bg-transparent; } } /* Full width modifier */ .date-input-group--full-width { @apply w-full; } } @layer components { /* ========================================================================== DatePicker - Date selection trigger and popover container ========================================================================== */ .date-picker { @apply inline-flex flex-col gap-1; .date-input-group__suffix, .date-input-group__prefix { @apply pointer-events-auto; } } .date-picker__trigger { @apply inline-flex w-full items-center rounded-field p-1 text-sm no-highlight; cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } .date-picker__trigger-indicator { @apply inline-flex size-4 items-center justify-center text-field-placeholder; } .date-picker__popover { @apply w-fit origin-(--trigger-anchor-point) scrollbar-none overflow-y-auto overscroll-contain bg-overlay p-3; @apply motion-reduce:transition-none; box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95; &[data-placement^="top"] { @apply slide-in-from-bottom-1; } &[data-placement^="bottom"] { @apply slide-in-from-top-1; } &[data-placement^="left"] { @apply slide-in-from-right-1; } &[data-placement^="right"] { @apply slide-in-from-left-1; } } &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } } .date-picker__popover .calendar__nav-button-icon, .date-picker__popover .range-calendar__nav-button-icon { @apply rotate-0; } } @layer components { /* ========================================================================== DateRangePicker - Date range selection trigger and popover container ========================================================================== */ .date-range-picker { @apply inline-flex flex-col gap-1; .date-input-group__suffix, .date-input-group__prefix { @apply pointer-events-auto; } } .date-range-picker__trigger { @apply inline-flex w-full items-center rounded-field p-1 text-sm no-highlight; cursor: var(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } .date-range-picker__trigger-indicator { @apply inline-flex size-4 items-center justify-center text-field-placeholder; } .date-range-picker__range-separator { @apply px-1 text-field-placeholder select-none; } .date-range-picker__popover { @apply w-fit origin-(--trigger-anchor-point) scrollbar-none overflow-y-auto overscroll-contain bg-overlay p-3; @apply motion-reduce:transition-none; box-shadow: var(--shadow-overlay); border-radius: min(32px, calc(var(--radius) * 2.5)); &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95; &[data-placement^="top"] { @apply slide-in-from-bottom-1; } &[data-placement^="bottom"] { @apply slide-in-from-top-1; } &[data-placement^="left"] { @apply slide-in-from-right-1; } &[data-placement^="right"] { @apply slide-in-from-left-1; } } &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } } .date-range-picker__popover .range-calendar__nav-button-icon, .date-range-picker__popover .calendar__nav-button-icon { @apply rotate-0; } } @layer components { /* Card component styles */ /* Block */ .card { @apply relative flex flex-col gap-3 overflow-visible p-4; @apply shadow-surface; border-radius: min(32px, var(--radius-3xl)); } /* Element - header */ .card__header { @apply flex flex-col; } /* Element - title */ .card__title { @apply text-sm leading-6 font-medium text-foreground; } /* Element - description */ .card__description { @apply text-sm leading-5 text-muted; } /* Element - content */ .card__content { @apply flex flex-1 flex-col gap-1; } /* Element - footer */ .card__footer { @apply flex flex-row items-center; } /* Modifier - variant */ .card--transparent { @apply border-none bg-transparent shadow-none; } .card--default { @apply bg-surface; } .card--secondary { @apply bg-surface-secondary; } .card--tertiary { @apply bg-surface-tertiary; } } @layer components { /* ========================================================================== Base header styles ========================================================================== */ .header { @apply w-full px-2 pt-1.5 pb-1 text-start text-xs font-medium text-muted; } } @layer components { /* Separator Component Styles */ /* Base separator with default horizontal orientation */ .separator { @apply shrink-0 rounded-sm border-t-0 border-b-0 bg-separator; /* Default size - horizontal orientation */ @apply h-px w-full; } /* Orientation variants */ .separator--horizontal { @apply h-px w-full; } .separator--vertical { @apply h-auto min-h-2 w-px self-stretch; } /* Color variants */ .separator--default { @apply bg-separator; } .separator--secondary { @apply bg-separator-secondary; } .separator--tertiary { @apply bg-separator-tertiary; } .separator__container { @apply flex items-center gap-3; } .separator__container--horizontal { @apply w-full flex-row; } .separator__container--vertical { @apply h-full flex-col justify-center; } .separator__line { @apply shrink-0 grow; } .separator__content { @apply inline-flex items-center justify-center text-center whitespace-nowrap text-muted; } .separator__content--horizontal { @apply text-center; } .separator__content--vertical { @apply text-center; } } @layer components { /* Surface component styles */ /* Block */ .surface { @apply relative text-foreground; } /* Modifier - variant */ .surface--transparent { @apply bg-transparent; } .surface--default { @apply bg-surface text-surface-foreground; } .surface--secondary { @apply bg-surface-secondary text-surface-secondary-foreground; } .surface--tertiary { @apply bg-surface-tertiary text-surface-tertiary-foreground; } } @layer components { /* Base avatar styles */ .avatar { @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default; } /* Avatar fallback element */ .avatar__fallback { @apply flex size-full items-center justify-center bg-default text-sm font-medium; } /* Avatar image element */ .avatar__image { @apply absolute inset-0 aspect-square size-full; /** * Transitions */ @apply transition-opacity duration-250 motion-reduce:transition-none; } /* Size modifiers */ .avatar--sm { @apply size-8 rounded-2xl; } .avatar--md { /* No styles as this is the default size */ } .avatar--lg { @apply size-12 rounded-3xl; .avatar__fallback { @apply text-base; } } /* Color modifiers for fallback */ .avatar__fallback--accent { @apply text-accent-soft-foreground; } .avatar__fallback--default { @apply text-default-soft-foreground; } .avatar__fallback--success { @apply text-success-soft-foreground; } .avatar__fallback--warning { @apply text-warning-soft-foreground; } .avatar__fallback--danger { @apply text-danger-soft-foreground; } /* Variant modifiers */ .avatar--soft { @apply bg-transparent; } .avatar--soft .avatar__fallback--accent { @apply bg-accent-soft text-accent-soft-foreground; } .avatar--soft .avatar__fallback--success { @apply bg-success-soft text-success-soft-foreground; } .avatar--soft .avatar__fallback--warning { @apply bg-warning-soft text-warning-soft-foreground; } .avatar--soft .avatar__fallback--default { @apply bg-default-soft text-default-soft-foreground; } .avatar--soft .avatar__fallback--danger { @apply bg-danger-soft text-danger-soft-foreground; } } @layer components { /* ------------------------------------------------------------------------------------------------- * AlertDialog Component Styles * Block: alert-dialog * -----------------------------------------------------------------------------------------------*/ /** * Element: trigger - the element that opens the modal */ .alert-dialog__trigger { @apply inline-block; @apply cursor-(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Active/pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.97); } } /** * Element: backdrop - the overlay behind the dialog */ .alert-dialog__backdrop { @apply fixed inset-0 z-50; @apply flex flex-row items-center justify-center; @apply h-(--visual-viewport-height) w-full; /* Entering animation */ &[data-entering="true"] { @apply animate-in duration-150 ease-out fade-in-0; } /* Exiting animation */ &[data-exiting="true"] { @apply animate-out duration-100 ease-out fade-out-0; } /** * Reduce Animation * CRITICAL: motion-reduce must be AFTER animate for correct override specificity */ &[data-exiting="true"], &[data-entering="true"] { @apply will-change-[opacity]; @apply motion-reduce:animate-none; } } /** * Modifier: backdrop--transparent */ .alert-dialog__backdrop--transparent { @apply bg-transparent; } /** * Modifier: backdrop--opaque */ .alert-dialog__backdrop--opaque { @apply bg-backdrop; } /** * Modifier: backdrop--blur */ .alert-dialog__backdrop--blur { @apply bg-backdrop backdrop-blur-md; } /** * Element: container - the positioning wrapper for the modal */ .alert-dialog__container { @apply flex flex-col items-center; @apply h-(--visual-viewport-height) w-full min-w-0 flex-1; @apply p-4; @apply sm:w-fit sm:p-10; @apply pointer-events-none; /* Entering animation */ &[data-entering="true"] { @apply animate-in duration-250 ease-out-quad fade-in-0 zoom-in-105; &[data-placement="auto"] { @apply slide-in-from-bottom-1; @apply sm:slide-in-from-bottom-0; } &[data-placement="top"] { @apply slide-in-from-top-1; } &[data-placement="center"] { @apply slide-in-from-top-0; } &[data-placement="bottom"] { @apply slide-in-from-bottom-1; } } /* Exiting animation */ &[data-exiting="true"] { @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95; } /** * Reduce Animation * CRITICAL: motion-reduce must be AFTER animate for correct override specificity */ &[data-exiting="true"], &[data-entering="true"] { @apply will-change-[opacity,transform]; @apply motion-reduce:animate-none; } } /** * Element: dialog - the content container for the modal */ .alert-dialog__dialog { @apply relative; @apply flex min-h-0 w-full flex-col; @apply max-h-full; @apply bg-overlay shadow-overlay outline-none; border-radius: min(32px, var(--radius-3xl)); @apply p-6; @apply overflow-clip; @apply pointer-events-auto; &[data-placement="auto"] { @apply mt-auto; @apply sm:my-auto; } &[data-placement="center"] { @apply my-auto; } &[data-placement="bottom"] { @apply mt-auto; } &[data-placement="top"] { @apply mt-0; } } /** * Modifier: dialog--xs */ .alert-dialog__dialog--xs { @apply max-w-xs; } /** * Modifier: dialog--sm */ .alert-dialog__dialog--sm { @apply max-w-sm; } /** * Modifier: dialog--md */ .alert-dialog__dialog--md { @apply max-w-md; } /** * Modifier: dialog--lg */ .alert-dialog__dialog--lg { @apply max-w-lg; } /** * Modifier: dialog--cover */ .alert-dialog__dialog--cover { @apply h-full min-h-full w-full; } /** * Element: header - the top section with the title */ .alert-dialog__header { @apply flex flex-col gap-3; @apply mb-0; /* When header contains icon, use flex-col layout with gap */ & > .modal__icon { @apply mb-0; } } /** * Element: heading - the main title text */ .alert-dialog__heading { @apply align-middle; @apply text-base font-medium text-foreground; } /** * Element: icon - the optional icon indicator */ .alert-dialog__icon { @apply flex items-center justify-center; @apply size-10 shrink-0; @apply rounded-3xl select-none; [data-slot="alert-dialog-default-icon"] { @apply box-content size-5; } } /** * Modifier: icon--default */ .alert-dialog__icon--default { @apply bg-default text-foreground; } /** * Modifier: icon--accent */ .alert-dialog__icon--accent { @apply bg-accent-soft text-accent-soft-foreground; } /** * Modifier: icon--success */ .alert-dialog__icon--success { @apply bg-success-soft text-success-soft-foreground; } /** * Modifier: icon--warning */ .alert-dialog__icon--warning { @apply bg-warning-soft text-warning-soft-foreground; } /** * Modifier: icon--danger */ .alert-dialog__icon--danger { @apply bg-danger-soft text-danger-soft-foreground; } /** * Element: body - the main content area */ .alert-dialog__body { @apply min-h-0 flex-1 scrollbar; @apply text-sm leading-[1.43] text-muted; @apply -m-[3px] my-0 p-[3px]; @apply overflow-y-auto overscroll-contain; -webkit-overflow-scrolling: touch; } /** * Element: footer - the bottom action section */ .alert-dialog__footer { @apply flex flex-row items-center justify-end gap-2; @apply mt-0; } /** * Element: close-trigger - the optional x icon button to close the modal */ .alert-dialog__close-trigger { @apply absolute end-4 top-4; } /** * Elements Spacing */ .alert-dialog__header + .alert-dialog__body { @apply mt-2; } .alert-dialog__header + .alert-dialog__footer { @apply mt-5; } .alert-dialog__body + .alert-dialog__footer { @apply mt-5; } } @layer components { /* ------------------------------------------------------------------------------------------------- * Drawer Component Styles * Block: drawer * -----------------------------------------------------------------------------------------------*/ /** * Element: trigger - the element that opens the drawer */ .drawer__trigger { @apply inline-block cursor-(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Active/pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.97); } } /** * Element: backdrop - the overlay behind the drawer */ .drawer__backdrop { @apply fixed inset-0 z-50; @apply h-(--visual-viewport-height) w-full; opacity: 1; transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1); &[data-entering="true"] { opacity: 0; } &[data-exiting="true"] { opacity: 0; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); } &[data-exiting="true"], &[data-entering="true"] { will-change: opacity; } @media (prefers-reduced-motion: reduce) { transition: none; } } /** * Modifier: backdrop--transparent */ .drawer__backdrop--transparent { @apply bg-transparent; } /** * Modifier: backdrop--opaque */ .drawer__backdrop--opaque { @apply bg-backdrop; } /** * Modifier: backdrop--blur */ .drawer__backdrop--blur { @apply bg-backdrop backdrop-blur-md; } /** * Element: content - the positioning wrapper for the drawer panel */ .drawer__content { @apply pointer-events-none; @apply fixed inset-0 z-50 flex; @apply h-(--visual-viewport-height) w-full min-w-0; } /** * Modifier: content--bottom (default) * Slides up from the bottom edge */ .drawer__content--bottom { @apply items-end; } /** * Modifier: content--top * Slides down from the top edge */ .drawer__content--top { @apply items-start; } /** * Modifier: content--left * Slides in from the left edge */ .drawer__content--left { @apply justify-start; } /** * Modifier: content--right * Slides in from the right edge */ .drawer__content--right { @apply justify-end; } /** * Element: dialog - the drawer panel itself */ .drawer__dialog { @apply relative; @apply flex flex-col; @apply bg-overlay shadow-overlay outline-none; @apply p-6; @apply pointer-events-auto; --drawer-enter-duration: 250ms; --drawer-exit-duration: 200ms; --drawer-enter-ease: cubic-bezier(0.32, 0.72, 0, 1); --drawer-exit-ease: cubic-bezier(0.32, 0.72, 0, 1); will-change: translate; transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease); @media (prefers-reduced-motion: reduce) { transition: none; } /* Bottom/top placement: full width, auto height */ &[data-placement="bottom"] { @apply w-full; @apply max-h-[85vh]; border-start-start-radius: min(32px, var(--radius-2xl)); border-start-end-radius: min(32px, var(--radius-2xl)); } &[data-placement="top"] { @apply w-full; @apply max-h-[85vh]; border-end-start-radius: min(32px, var(--radius-2xl)); border-end-end-radius: min(32px, var(--radius-2xl)); } /* Left/right placement: auto width, full height */ &[data-placement="left"] { @apply h-full rounded-none; @apply w-80 max-w-[85vw] sm:w-96; } &[data-placement="right"] { @apply h-full rounded-none; @apply w-80 max-w-[85vw] sm:w-96; } } [data-exiting="true"] .drawer__dialog { transition-duration: var(--drawer-exit-duration); transition-timing-function: var(--drawer-exit-ease); } .drawer__content--left .drawer__dialog, .drawer__content--right .drawer__dialog, .drawer__content--top .drawer__dialog, .drawer__content--bottom .drawer__dialog { translate: 0 0; } .drawer__content--left[data-entering="true"] .drawer__dialog, .drawer__content--left[data-exiting="true"] .drawer__dialog { translate: -100% 0; } .drawer__content--right[data-entering="true"] .drawer__dialog, .drawer__content--right[data-exiting="true"] .drawer__dialog { translate: 100% 0; } .drawer__content--top[data-entering="true"] .drawer__dialog, .drawer__content--top[data-exiting="true"] .drawer__dialog { translate: 0 -100%; } .drawer__content--bottom[data-entering="true"] .drawer__dialog, .drawer__content--bottom[data-exiting="true"] .drawer__dialog { translate: 0 100%; } .drawer__dialog--top { @apply pb-2; .drawer__handle { @apply pb-0; } } /** * Element: header - the top section with the title */ .drawer__header { @apply flex flex-col gap-3; @apply mb-0; } /** * Element: heading - the main title text */ .drawer__heading { @apply align-middle; @apply text-base font-medium text-foreground; } /** * Element: body - the main content area * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures */ .drawer__body { @apply min-h-0 flex-1 scrollbar; @apply text-sm leading-[1.43] text-muted; @apply -m-[3px] my-0 p-[3px]; @apply overflow-y-auto overscroll-contain; -webkit-overflow-scrolling: touch; } /** * Element: footer - the bottom action section */ .drawer__footer { @apply flex flex-row items-center justify-end gap-2; @apply mt-0; } /** * Element: handle - visual drag handle indicator */ .drawer__handle { @apply flex items-center justify-center; @apply pb-2; /* The handle bar */ & > [data-slot="drawer-handle-bar"] { @apply h-1 w-9 rounded-xs; @apply bg-separator; } } /** * Element: close-trigger - the close button */ .drawer__close-trigger { @apply absolute end-4 top-4; } /** * Elements Spacing */ .drawer__header + .drawer__body { @apply mt-2; } .drawer__header + .drawer__footer { @apply mt-5; } .drawer__body + .drawer__footer { @apply mt-5; } .drawer__handle + .drawer__header { @apply mt-0; } .drawer__handle + .drawer__body { @apply mt-0; } } @layer components { /* ------------------------------------------------------------------------------------------------- * Modal Component Styles * Block: modal * -----------------------------------------------------------------------------------------------*/ /** * Element: trigger - the element that opens the modal */ .modal__trigger { @apply inline-block cursor-(--cursor-interactive); /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: transform 250ms var(--ease-out-quart), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } /* Active/pressed state */ &:active, &[data-pressed="true"] { transform: scale(0.97); } } /** * Element: backdrop - the overlay behind the dialog */ .modal__backdrop { @apply fixed inset-0 z-50; @apply flex flex-row items-center justify-center; @apply h-(--visual-viewport-height) w-full; /* Entering animation */ &[data-entering="true"] { @apply animate-in duration-150 ease-out fade-in-0; } /* Exiting animation */ &[data-exiting="true"] { @apply animate-out duration-100 ease-out fade-out-0; } /** * Reduce Animation * CRITICAL: motion-reduce must be AFTER animate for correct override specificity */ &[data-exiting="true"], &[data-entering="true"] { @apply will-change-[opacity]; @apply motion-reduce:animate-none; } } /** * Modifier: backdrop--transparent */ .modal__backdrop--transparent { @apply bg-transparent; } /** * Modifier: backdrop--opaque */ .modal__backdrop--opaque { @apply bg-backdrop; } /** * Modifier: backdrop--blur */ .modal__backdrop--blur { @apply bg-backdrop backdrop-blur-md; } /** * Element: container - the positioning wrapper for the modal */ .modal__container { @apply flex flex-col items-center; @apply h-(--visual-viewport-height) w-full min-w-0 flex-1; @apply p-4; @apply sm:w-fit sm:p-10; @apply pointer-events-none; /* Entering animation */ &[data-entering="true"] { @apply animate-in duration-250 ease-out-quad fade-in-0 zoom-in-105; &[data-placement="auto"] { @apply slide-in-from-bottom-1; @apply sm:slide-in-from-bottom-0; } &[data-placement="top"] { @apply slide-in-from-top-1; } &[data-placement="center"] { @apply slide-in-from-top-0; } &[data-placement="bottom"] { @apply slide-in-from-bottom-1; } } /* Exiting animation */ &[data-exiting="true"] { @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95; } /** * Reduce Animation * CRITICAL: motion-reduce must be AFTER animate for correct override specificity */ &[data-exiting="true"], &[data-entering="true"] { @apply will-change-[opacity,transform]; @apply motion-reduce:animate-none; } } /** * Modifier: container--scroll-outside * * The container is React Aria's modal ref, so it must stay `pointer-events: none`, * otherwise clicks around the dialog count as inside the modal and never dismiss it. * The backdrop owns the scrolling instead. */ .modal__container--scroll-outside { @apply h-auto min-h-(--visual-viewport-height) overflow-y-visible; } .modal__backdrop:has(.modal__container--scroll-outside) { @apply scrollbar items-start overflow-y-auto; -webkit-overflow-scrolling: touch; } /** * Modifier: container--full */ .modal__container--full { @apply p-0 sm:p-0; /* Entering animation */ &[data-entering="true"] { @apply slide-in-from-bottom-0 zoom-in-100; @apply sm:slide-in-from-bottom-0; } /* Exiting animation */ &[data-exiting="true"] { @apply zoom-out-100; } } /** * Element: dialog - the content container for the modal */ .modal__dialog { @apply relative; @apply flex w-full flex-col; @apply bg-overlay shadow-overlay outline-none; border-radius: min(32px, var(--radius-3xl)); @apply p-6; @apply pointer-events-auto; &[data-placement="auto"] { @apply mt-auto; @apply sm:my-auto; } &[data-placement="center"] { @apply my-auto; } &[data-placement="bottom"] { @apply mt-auto; } &[data-placement="top"] { @apply mt-0; } } /** * Modifier: dialog--scroll-inside */ .modal__dialog--scroll-inside { @apply max-h-full min-h-0 overflow-clip; } /** * Modifier: dialog--scroll-outside */ .modal__dialog--scroll-outside { @apply h-auto; @apply min-h-0 shrink-0; } /** * Modifier: dialog--xs */ .modal__dialog--xs { @apply max-w-xs; } /** * Modifier: dialog--sm */ .modal__dialog--sm { @apply max-w-sm; } /** * Modifier: dialog--md */ .modal__dialog--md { @apply max-w-md; } /** * Modifier: dialog--lg */ .modal__dialog--lg { @apply max-w-lg; } /** * Modifier: dialog--cover */ .modal__dialog--cover { @apply h-full min-h-full w-full; } /** * Modifier: dialog--full */ .modal__dialog--full { @apply h-full min-h-full w-full; @apply rounded-none shadow-none; } /** * Element: header - the top section with the title */ .modal__header { @apply flex flex-col gap-3; @apply mb-0; /* When header contains icon, use flex-col layout with gap */ & > .modal__icon { @apply mb-0; } } /** * Element: heading - the main title text */ .modal__heading { @apply align-middle; @apply text-base font-medium text-foreground; } /** * Element: icon - the optional icon indicator */ .modal__icon { @apply flex items-center justify-center; @apply size-10 shrink-0; @apply rounded-3xl select-none; } /** * Element: body - the main content area */ .modal__body { @apply min-h-0 flex-1; @apply text-sm leading-[1.43] text-muted; @apply -m-[3px] my-0 overflow-visible p-[3px]; } /** * Modifier: body--scroll-inside */ .modal__body--scroll-inside { @apply scrollbar overflow-y-auto overscroll-contain; -webkit-overflow-scrolling: touch; } /** * Modifier: body--scroll-outside */ .modal__body--scroll-outside { @apply overflow-y-visible; } /** * Element: footer - the bottom action section */ .modal__footer { @apply flex flex-row items-center justify-end gap-2; @apply mt-0; } /** * Element: close-trigger - the optional x icon button to close the modal */ .modal__close-trigger { @apply absolute end-4 top-4; } /** * Elements Spacing */ .modal__header + .modal__body { @apply mt-2; } .modal__header + .modal__footer { @apply mt-5; } .modal__body + .modal__footer { @apply mt-5; } } @layer components { /* Popover component styles */ /* Base popover styles */ .popover { @apply origin-(--trigger-anchor-point) bg-overlay p-0 text-sm; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } } /* Popover dialog */ .popover__dialog { @apply p-4 outline-none; } /* Popover heading */ .popover__heading { @apply font-medium; } /* Popover trigger */ .popover__trigger { @apply inline-block; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; cursor: var(--cursor-interactive); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } /* Disabled state */ &:disabled, &[aria-disabled="true"] { @apply status-disabled; } } } @layer components { /* Tooltip component styles */ /* Base tooltip styles */ .tooltip { @apply max-w-xs origin-(--trigger-anchor-point) bg-overlay p-2 text-xs break-all; border-radius: min(32px, var(--radius-xl)); box-shadow: var(--shadow-overlay); /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="overlay-arrow"] { @apply stroke-border/40; fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="overlay-arrow"] { rotate: 90deg; } } /* Tooltip trigger */ .tooltip__trigger { @apply inline-block; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; } } } @layer components { /* ComboBox styles */ .combo-box { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } [data-slot="input"] { @apply min-w-0 flex-1; /* Add inline-end padding when trigger is present */ &:has(+ .combo-box__trigger) { @apply pe-7; } /* Focus state (input.css only has focus-visible, but combo-box also needs focus) */ &:focus, &[data-focus] { @apply status-focused-field; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Disabled state */ &:disabled, &[data-disabled], &[aria-disabled="true"] { @apply status-disabled; } } } .combo-box__input-group { @apply relative isolate inline-flex items-center; } .combo-box__value { @apply text-sm wrap-break-word text-field-foreground empty:hidden; &[data-placeholder="true"] { @apply text-field-placeholder; } /* Removes the list-box-item indicator element from the combo-box value */ [data-slot="list-box-item-indicator"] { @apply hidden; } } .combo-box__trigger { @apply absolute end-0 top-1/2 flex h-full shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center pe-2 text-field-placeholder transition duration-150 no-highlight; /* Remove default button styles */ @apply border-none bg-transparent outline-none; /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply text-field-foreground; } } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply rounded ring-2 ring-focus ring-offset-2 ring-offset-background outline-none; } /* Pressed state */ &[data-pressed="true"] { @apply opacity-70; } /* Disabled state */ &:disabled, &[data-disabled], &[aria-disabled="true"] { @apply cursor-not-allowed opacity-50; } [data-slot="combo-box-trigger-default-icon"] { @apply size-4 transition-transform duration-150 motion-reduce:transition-none; } /* Rotate icon when trigger is open */ &[data-open="true"] [data-slot="combo-box-trigger-default-icon"] { @apply rotate-180; } } /* Similar to popover content styles */ .combo-box__popover { @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } /* Listbox styles */ [data-slot="list-box"] { @apply p-1.5 outline-none; } [data-slot="list-box-item"] { @apply px-2.5; /* As the combo-box is single-select, we don't need to animate the checkmark */ [data-slot="list-box-item-indicator--checkmark"] { @apply transition-none; } } } /* Full width modifier */ .combo-box--full-width { @apply w-full; } .combo-box__input-group--full-width { @apply w-full; } } @layer components { /* Select styles */ .select { @apply flex flex-col gap-1; &[data-invalid="true"], &[aria-invalid="true"] { [data-slot="description"] { @apply hidden; } } [data-slot="label"] { @apply w-fit; } } .select__trigger { @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); /* Add inline-end padding when indicator is present */ &:has(.select__indicator) { @apply pe-7; } /* Hover state */ @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Focus state */ &:focus, &[data-focus="true"] { } /* Invalid state */ .select[data-invalid="true"] &, .select[aria-invalid="true"] & { @apply status-invalid-field; background-color: var(--field-focus); } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* Variant property definitions */ .select--primary { /* Default styles */ } .select--secondary .select__trigger { @apply shadow-none; background-color: var(--select-trigger-bg); --select-trigger-bg: var(--default); --select-trigger-bg-hover: var(--default-hover); --select-trigger-bg-focus: var(--default); @media (hover: hover) { &:hover, &[data-hovered="true"] { background-color: var(--select-trigger-bg-hover); } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { background-color: var(--select-trigger-bg-focus); } &:focus, &[data-focus="true"] { } .select[data-invalid="true"] &, .select[aria-invalid="true"] & { background-color: var(--select-trigger-bg-focus); } } .select__value { @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm; &[data-placeholder="true"] { @apply text-field-placeholder; } /* Removes the list-box-item indicator element from the select value*/ [data-slot="list-box-item-indicator"] { @apply hidden; } } .select__indicator { @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150; &[data-open="true"] { @apply rotate-180; } &[data-slot="select-default-indicator"] { @apply size-4; } } /* Similar to popover content styles */ .select__popover { @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain bg-overlay p-0 text-sm scrollbar; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); /* Focus state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } /* Listbox styles */ [data-slot="list-box"] { @apply p-1.5 outline-none; } [data-slot="list-box-item"] { @apply px-2.5; } /* As the popover closes fast in single-select mode, the default item indicator transition is not even visible - so we disable it only for single-select */ [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { @apply transition-none; } } /* Full width modifier */ .select--full-width { @apply w-full; } .select__trigger--full-width { @apply w-full; } } @layer components { /* Autocomplete styles */ .autocomplete { @apply flex flex-col gap-1; } .autocomplete__trigger { @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight; /** * Transitions * CRITICAL: motion-reduce must be AFTER transition for correct override specificity */ transition: background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-out); @apply motion-reduce:transition-none; /* Cursor */ cursor: var(--cursor-interactive); border-width: var(--border-width-field); border-color: var(--field-border); /* Add inline-end padding when indicator is present */ &:has(.autocomplete__indicator) { @apply pe-7; } /* Hover state - exclude when clear button is hovered to prevent double hover effect */ @media (hover: hover) { &:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { @apply bg-field-hover; border-color: var(--field-border-hover); } } /* Focus visible state */ &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply status-focused; border-color: var(--field-border-focus); background-color: var(--field-focus); } /* Focus state */ &:focus, &[data-focus="true"] { } /* Invalid state */ .autocomplete[data-invalid="true"] &, .autocomplete[aria-invalid="true"] & { @apply status-invalid-field; background-color: var(--field-focus); } /* Disabled state */ &:disabled, &[data-disabled="true"], &[aria-disabled="true"] { @apply status-disabled; } } /* Variant property definitions */ .autocomplete--primary { /* Default styles */ } .autocomplete--secondary .autocomplete__trigger { @apply shadow-none; background-color: var(--autocomplete-trigger-bg); --autocomplete-trigger-bg: var(--default); --autocomplete-trigger-bg-hover: var(--default-hover); --autocomplete-trigger-bg-focus: var(--default); /* Exclude when clear button is hovered to prevent double hover effect */ @media (hover: hover) { &:hover:not(:has(.autocomplete__clear-button:hover)), &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) { background-color: var(--autocomplete-trigger-bg-hover); } } &:focus-visible:not(:focus), &[data-focus-visible="true"] { background-color: var(--autocomplete-trigger-bg-focus); } &:focus, &[data-focus="true"] { } .autocomplete[data-invalid="true"] &, .autocomplete[aria-invalid="true"] & { background-color: var(--autocomplete-trigger-bg-focus); } } .autocomplete__value { @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm; &[data-placeholder="true"] { @apply text-field-placeholder; } /* Removes the list-box-item indicator element from the autocomplete value*/ [data-slot="list-box-item-indicator"] { @apply hidden; } } .autocomplete__indicator { @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150; /* Cursor */ cursor: var(--cursor-interactive); &[data-open="true"] { @apply rotate-180; } &[data-slot="autocomplete-default-indicator"] { @apply size-4; } } /* Similar to popover content styles */ .autocomplete__popover { @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none; border-radius: min(32px, var(--radius-3xl)); box-shadow: var(--shadow-overlay); &:focus, &:focus-visible, &:focus-visible:not(:focus), &[data-focus-visible="true"] { @apply outline-none; } /* Entering animations */ &[data-entering="true"] { @apply animate-in duration-250 ease-out-fluid fade-in-0 zoom-in-95; /* Placement-specific translations */ &[data-placement="top"] { @apply slide-in-from-bottom-1; } &[data-placement="bottom"] { @apply slide-in-from-top-1; } &[data-placement="left"] { @apply slide-in-from-right-1; } &[data-placement="right"] { @apply slide-in-from-left-1; } } /* Exiting animations */ &[data-exiting="true"] { @apply animate-out duration-100 ease-out-quad zoom-out-95 fade-out; } &[data-exiting="true"], &[data-entering="true"] { @apply transition-[opacity,transform] will-change-[opacity,transform]; } /* Arrow styling */ & [data-slot="popover-overlay-arrow"] { fill: var(--overlay); } /* Arrow rotation based on placement */ &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] { rotate: 180deg; } &[data-placement="left"] [data-slot="popover-overlay-arrow"] { rotate: -90deg; } &[data-placement="right"] [data-slot="popover-overlay-arrow"] { rotate: 90deg; } /* Listbox styles. * `min-h-0` + the popover's flex column let the list shrink below 320px when the * popover itself is constrained (e.g. inside a Modal, or a short viewport). Without * it the list keeps its full 320px and its overflow is clipped by the popover, making * the last options unreachable. */ [data-slot="list-box"] { @apply max-h-[320px] min-h-0 scrollbar overflow-y-auto p-1.5 outline-none; } [data-slot="list-box-item"] { @apply px-2.5; } /* Virtualized rows: react-aria's Virtualizer wraps each row in an absolutely-positioned * [role="presentation"] element whose width equals the scroll container's clientWidth * (which includes the list-box horizontal padding) while sitting inside the padded content * box. Without this, rows overflow the right padding and the hover background reaches the * popover edge. Subtract the horizontal padding (2 × p-1.5 = 12px) to keep rows aligned. */ [role="presentation"] > [data-slot="list-box-item"] { width: calc(100% - var(--spacing) * 3); } /* As the popover closes fast in single-select mode, the default item indicator transition is not even visible - so we disable it only for single-select */ [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"], [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] { @apply transition-none; } /* Search Field styles */ [data-slot="search-field"] { @apply shrink-0 px-3 py-1 outline-none; } /* Empty State */ [data-slot="empty-state"] { @apply text-center text-sm text-overlay-foreground/60; } } /* Full width modifier */ .autocomplete--full-width { @apply w-full; } .autocomplete__trigger--full-width { @apply w-full; } /* Clear Button styles */ .autocomplete__clear-button { @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight; @apply me-0 size-5 shrink-0 self-center bg-transparent; /* Cursor */ cursor: var(--cursor-interactive); @apply transform-gpu; /* Transition only when visible - disappears immediately when cleared */ &:not([data-empty="true"]) { transition: opacity 150ms var(--ease-smooth); @apply motion-reduce:transition-none; } &[data-empty="true"] { @apply pointer-events-none opacity-0; } [data-slot="autocomplete-clear-button-icon"] { @apply size-3.5; } &:active, &[data-pressed="true"] { } @media (hover: hover) { &:hover, &[data-hovered="true"] { @apply bg-default-hover; } } &:active, &[data-pressed="true"] { transform: scale(0.93); } } } @layer components { /* Base styles */ .kbd { @apply inline-flex h-6 items-center space-x-0.5 rounded-lg bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse; word-spacing: -0.25rem; } /* Key abbreviation styles */ .kbd__abbr { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decoration: none; } /* Content wrapper */ .kbd__content { display: flex; justify-content: center; align-items: center; } /* Variant styles */ .kbd--light { @apply bg-transparent; } } @layer components { .typography { @apply text-foreground; } .typography-prose { @apply text-foreground; } .typography-prose h1 { @apply text-4xl font-semibold tracking-tight; } .typography-prose h2 { @apply text-3xl font-semibold tracking-tight; } .typography-prose h3 { @apply text-2xl font-semibold tracking-tight; } .typography-prose h4 { @apply text-xl font-semibold tracking-tight; } .typography-prose h5 { @apply text-lg font-semibold tracking-tight; } .typography-prose h6 { @apply text-base font-semibold tracking-tight; } .typography-prose p { @apply text-base leading-7; } .typography-prose code { @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; } .typography-prose a { @apply font-medium text-link underline underline-offset-4; } .typography-prose blockquote { @apply mt-4 border-s-4 border-border ps-4 text-muted italic; } .typography-prose ul { @apply my-4 list-disc space-y-2 ps-6; } .typography-prose ol { @apply my-4 list-decimal space-y-2 ps-6; } .typography-prose li { @apply text-base leading-7; } .typography-prose hr { @apply my-8 border-separator; } .typography-prose pre { @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed; } .typography-prose strong { @apply font-semibold text-foreground; } .typography-prose em { @apply italic; } .typography-prose img { @apply my-4 rounded-xl; } .typography--h1 { @apply text-4xl font-semibold tracking-tight; } .typography--h2 { @apply text-3xl font-semibold tracking-tight; } .typography--h3 { @apply text-2xl font-semibold tracking-tight; } .typography--h4 { @apply text-xl font-semibold tracking-tight; } .typography--h5 { @apply text-lg font-semibold tracking-tight; } .typography--h6 { @apply text-base font-semibold tracking-tight; } .typography--body { @apply text-base leading-7; } .typography--body-sm { @apply text-sm leading-6; } .typography--body-xs { @apply text-xs leading-5; } .typography--code { @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; } .typography--align-start { @apply text-start; } .typography--align-center { @apply text-center; } .typography--align-end { @apply text-end; } .typography--align-justify { @apply text-justify; } .typography--color-default { @apply text-foreground; } .typography--color-muted { @apply text-muted; } .typography--truncate { @apply block truncate; } .typography--weight-normal { @apply font-normal; } .typography--weight-medium { @apply font-medium; } .typography--weight-semibold { @apply font-semibold; } .typography--weight-bold { @apply font-bold; } } @layer components { /* Base scroll-shadow component */ .scroll-shadow { @apply relative; --scroll-shadow-size: 40px; --scroll-shadow-scrollbar-size: 10px; } /* Orientation: Vertical */ .scroll-shadow--vertical { @apply scrollbar overflow-y-auto; } /* Orientation: Horizontal */ .scroll-shadow--horizontal { @apply scrollbar overflow-x-auto; } /* Variant: Fade - Vertical */ .scroll-shadow--fade.scroll-shadow--vertical { &:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"]) { mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-position: left top, right top; mask-repeat: no-repeat; mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: left top, right top; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - var(--scroll-shadow-scrollbar-size)) 100%, var(--scroll-shadow-scrollbar-size) 100%; } &[data-top-scroll="true"] { --scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } &[data-bottom-scroll="true"] { --scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } &[data-top-bottom-scroll="true"] { --scroll-linear-gradient: #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } } /* Variant: Fade - Horizontal */ .scroll-shadow--fade.scroll-shadow--horizontal { &:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"]) { mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); mask-position: left top, left bottom; mask-repeat: no-repeat; mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000); -webkit-mask-position: left top, left bottom; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% calc(100% - var(--scroll-shadow-scrollbar-size)), 100% var(--scroll-shadow-scrollbar-size); } /* `left`/`right` data attributes are logical (before/end of scroll). In RTL the start edge is on the right, so the physical fade direction must be swapped. */ &[data-left-scroll="true"] { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; &:dir(rtl) { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } } &[data-right-scroll="true"] { --scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; &:dir(rtl) { --scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent; } } &[data-left-right-scroll="true"] { --scroll-linear-gradient: to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size), #000 calc(100% - var(--scroll-shadow-size)), transparent; } } .scroll-shadow--hide-scrollbar { @apply scrollbar-none; --scroll-shadow-scrollbar-size: 0px; } } @layer components { /* ------------------------------------------------------------------------------------------------ * Component Styles * ------------------------------------------------------------------------------------------------ * CRITICAL: Import order matters for CSS specificity and style overrides. * * General Rule: Shared/primitive components MUST be imported FIRST, before components that use them. * This ensures that parent component styles can properly override shared component defaults. * * Organization: Components are grouped by their Storybook categories (Components/Category/Name) * to maintain consistency between documentation and implementation. * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Shared Components - MUST Import FIRST * ------------------------------------------------------------------------------------------------ * These are used by multiple components and must be imported early to allow proper overrides. * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Navigation * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Buttons * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Collections * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Colors * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Controls * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * DataDisplay * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Feedback * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Forms * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Date & Time * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Layout * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Media * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Overlays * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Pickers * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Typography * ------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------ * Utilities * ------------------------------------------------------------------------------------------------ */ } @layer theme { @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-surface: var(--surface); --color-surface-foreground: var(--surface-foreground); --color-surface-hover: var(--surface-hover); --color-surface-secondary: var(--surface-secondary); --color-surface-secondary-foreground: var(--surface-secondary-foreground); --color-surface-tertiary: var(--surface-tertiary); --color-surface-tertiary-foreground: var(--surface-tertiary-foreground); --color-overlay: var(--overlay); --color-overlay-foreground: var(--overlay-foreground); --color-muted: var(--muted); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-segment: var(--segment); --color-segment-foreground: var(--segment-foreground); --color-border: var(--border); --color-separator: var(--separator); --color-focus: var(--focus); --color-link: var(--link); --color-default: var(--default); --color-default-foreground: var(--default-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-danger: var(--danger); --color-danger-foreground: var(--danger-foreground); --color-backdrop: var(--backdrop); --shadow-surface: var(--surface-shadow); --shadow-overlay: var(--overlay-shadow); --shadow-field: var(--field-shadow); /* Form Field Tokens */ --color-field: var(--field-background, var(--default)); --color-field-hover: var(--field-hover); --color-field-foreground: var(--field-foreground, var(--foreground)); --color-field-placeholder: var(--field-placeholder, var(--muted)); --color-field-border: var(--field-border, var(--border)); --radius-field: var(--field-radius, calc(var(--radius) * 1.5)); --border-width-field: var(--field-border-width, var(--border-width)); /* Color Tokens */ --color-background-secondary: var(--background-secondary); --color-background-tertiary: var(--background-tertiary); --color-background-inverse: var(--background-inverse); --color-default-hover: var(--default-hover); --color-accent-hover: var(--accent-hover); --color-success-hover: var(--success-hover); --color-warning-hover: var(--warning-hover); --color-danger-hover: var(--danger-hover); /* Form Field Colors */ --color-field-focus: var(--field-focus); --color-field-border-hover: var(--field-border-hover); --color-field-border-focus: var(--field-border-focus); /* Soft Colors */ --color-default-soft: var(--default-soft); --color-default-soft-foreground: var(--default-soft-foreground); --color-default-soft-hover: var(--default-soft-hover); --color-accent-soft: var(--accent-soft); --color-accent-soft-foreground: var(--accent-soft-foreground); --color-accent-soft-hover: var(--accent-soft-hover); --color-danger-soft: var(--danger-soft); --color-danger-soft-foreground: var(--danger-soft-foreground); --color-danger-soft-hover: var(--danger-soft-hover); --color-warning-soft: var(--warning-soft); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-warning-soft-hover: var(--warning-soft-hover); --color-success-soft: var(--success-soft); --color-success-soft-foreground: var(--success-soft-foreground); --color-success-soft-hover: var(--success-soft-hover); /* Separator Colors - Levels */ --color-separator-secondary: var(--separator-secondary); --color-separator-tertiary: var(--separator-tertiary); /* Border Colors - Levels */ --color-border-secondary: var(--border-secondary); --color-border-tertiary: var(--border-tertiary); /* Radius and default sizes - defaults can change by just changing the --radius */ --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */ --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */ --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */ --radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */ --radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */ --radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */ --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */ --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */ /* Transition Timing Functions */ --ease-smooth: ease; /* same as transition: ease; */ /* These custom curves are made by https://twitter.com/bdc */ /* From smoother to faster */ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); /* From slower to faster */ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); /* Custom smooth-out curve: fast start, smooth stop - Apple style */ --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1); /* From slower to faster */ --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); /* Linear */ --ease-linear: linear; /* Animations */ --animate-spin-fast: spin 0.75s linear infinite; --animate-skeleton: skeleton 2s linear infinite; --animate-caret-blink: caret-blink 1.2s ease-out infinite; @keyframes skeleton { 100% { transform: translateX(200%); } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } } } @layer theme { @layer theme {@layer base { /* HeroUI Default Theme */ :root, .light, .default, [data-theme="light"], [data-theme="default"] { color-scheme: light; /* == Common Variables == */ /* Primitive Colors (Do not change between light and dark) */ --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(0.9911 0 0); --eclipse: oklch(0.2103 0.0059 285.89); /* Spacing scale */ --spacing: 0.25rem; /* Border */ --border-width: 1px; --field-border-width: 0px; --disabled-opacity: 0.5; /* Ring offset - Used for focus ring */ --ring-offset-width: 2px; /* Cursor */ --cursor-interactive: pointer; --cursor-disabled: not-allowed; /* Radius */ --radius: 0.5rem; --field-radius: calc(var(--radius) * 1.5); /* == Light Theme Variables == */ /* Base Colors */ --background: oklch(0.9702 0 0); --foreground: var(--eclipse); /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */ --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.9524 0.0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(0.9373 0.0013 286.37); --surface-tertiary-foreground: var(--foreground); /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */ --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(0.5517 0.0138 285.94); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(94% 0.001 286.375); --default-foreground: var(--eclipse); --accent: oklch(0.6204 0.195 253.83); --accent-foreground: var(--snow); /* Form Fields */ --field-background: var(--white); --field-foreground: oklch(0.2103 0.0059 285.89); --field-placeholder: var(--muted); --field-border: transparent; /* no border by default on form fields */ /* Status Colors */ --success: oklch(0.7329 0.1935 150.81); --success-foreground: var(--eclipse); --warning: oklch(0.7819 0.1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(0.6532 0.2328 25.74); --danger-foreground: var(--snow); /* Component Colors */ --segment: var(--white); --segment-foreground: var(--eclipse); /* Misc Colors */ --border: oklch(90% 0.004 286.32); --separator: oklch(92% 0.004 286.32); --focus: var(--accent); --link: var(--foreground); /* Backdrop */ --backdrop: rgba(0, 0, 0, 0.5); /* Calculated Colors */ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); --background-inverse: var(--foreground); --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); --field-hover: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); --field-focus: var(--field-background, var(--default)); --field-border-hover: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); --field-border-focus: color-mix( in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22% ); --default-soft: color-mix(in oklab, var(--default) 50%, transparent); --default-soft-foreground: var(--default-foreground); --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%); --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%); --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%); --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); --success-soft: color-mix(in oklab, var(--success) 15%, transparent); --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%); --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); /* Shadows */ /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */ --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); /* Overlay shadow */ --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08); --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); /* Skeleton Default Global Animation */ --skeleton-animation: shimmer; /* shimmer, pulse, none */ /* Tooltip Default Delays */ --tooltip-delay: 1500ms; --tooltip-close-delay: 500ms; } .dark, [data-theme="dark"] { color-scheme: dark; /* == Dark Theme Variables == */ /* Base Colors */ --background: oklch(12% 0.005 285.823); --foreground: var(--snow); /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */ --surface: oklch(0.2103 0.0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.257 0.0037 286.14); --surface-tertiary: oklch(0.2721 0.0024 247.91); /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */ --overlay: oklch(0.2103 0.0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% 0.015 286.067); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(27.4% 0.006 286.033); --default-foreground: var(--snow); /* Form Fields */ --field-background: oklch(0.2103 0.0059 285.89); --field-foreground: var(--foreground); /* Status Colors */ --warning: oklch(0.8203 0.1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(0.594 0.1967 24.63); --danger-foreground: var(--snow); /* Component Colors */ --segment: oklch(0.3964 0.01 285.93); --segment-foreground: var(--foreground); /* Misc Colors */ --border: oklch(28% 0.006 286.033); --separator: oklch(25% 0.006 286.033); --focus: var(--accent); --link: var(--foreground); /* Backdrop */ --backdrop: rgba(0, 0, 0, 0.6); /* Shadows */ --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */ --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset; --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */ /* Calculated Colors */ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); --background-inverse: var(--foreground); --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); --field-hover: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); --field-focus: var(--field-background, var(--default)); --field-border-hover: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); --field-border-focus: color-mix( in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22% ); --default-soft: color-mix(in oklab, var(--default) 50%, transparent); --default-soft-foreground: var(--default-foreground); --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent); --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%); --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent); --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%); --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent); --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%); --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent); --success-soft: color-mix(in oklab, var(--success) 12%, transparent); --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%); --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent); --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } /* Vibrant palette - more saturated soft foregrounds, less contrast */ [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } } } } @layer theme { @layer components {/* Default theme component customizations */ /* * This file can contain theme-specific overrides for component styles. * Since the default theme uses the base styles as-is, this file is empty. * Custom themes can override specific component styles here. */ } } @layer theme { /* Declares the theme variables - @see https://tailwindcss.com/docs/theme */ /* Default Theme */ /* Component customizations for default theme */ } /* === Focus Ring === */ @utility focus-ring { @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none; /* Overrides the ring offset from the theme variables */ --tw-ring-offset-width: var(--ring-offset-width); } @utility focus-field-ring { @apply ring-2 ring-focus ring-offset-0 outline-none; /* No separation - ring sits directly against the element */ --tw-ring-offset-width: 0px; } @utility invalid-field-ring { /* Unfocused: show 1px outline */ @apply outline-1 outline-danger outline-solid; --tw-ring-offset-width: 3px; /* Focused: show 2px ring in danger color, remove outline */ &:focus, &:focus-visible, &[data-focused="true"], &[data-focus-visible="true"], &:focus-within, &[data-focus-within="true"] { @apply ring-2 ring-danger ring-offset-0; --tw-ring-offset-width: 0px; } } @utility no-highlight { -webkit-tap-highlight-color: transparent; } /* === Statuses === */ @utility status-focused { @apply focus-ring; } @utility status-focused-field { @apply focus-field-ring; } @utility status-invalid-field { @apply invalid-field-ring; } @utility status-disabled { opacity: var(--disabled-opacity); cursor: var(--cursor-disabled); pointer-events: none; } @utility status-pending { @apply pointer-events-none; } /* === Scrollbars (standards-only; apply per scroll slot in component CSS) === */ @utility scrollbar { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color); scrollbar-gutter: var(--scrollbar-gutter); } @utility scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-gutter: auto; } @utility scrollbar-default { scrollbar-width: auto; scrollbar-color: auto; scrollbar-gutter: auto; } /* Direct properties only — does not inherit none to nested scroll slots */ @utility scrollbar-none { scrollbar-width: none; scrollbar-color: auto; scrollbar-gutter: auto; -ms-overflow-style: none; } /** * ================================================================================================ * HeroUI Custom Tailwind CSS Variants * ================================================================================================ * * Custom variants with intelligent fallback: explicit controls override system preferences. * * Usage: * motion-reduce:opacity-0 - Reduced motion accessibility * motion-safe:animate-spin - Full motion effects * dark:bg-gray-900 - Dark mode styles * * Priority: Explicit data attributes/classes → System preferences (fallback) * ================================================================================================ */ /* ------------------------------------------------------------------------------------------------- * motion-reduce — Minimize animations for accessibility * Priority: data-reduce-motion="true" → prefers-reduced-motion: reduce * ------------------------------------------------------------------------------------------------- */ @custom-variant motion-reduce { /* Explicit: data-reduce-motion="true" on element or ancestor */ &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) { @slot; &::before, &::after { @slot; } } /* Fallback: system prefers-reduced-motion setting */ @media (prefers-reduced-motion: reduce) { &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { @slot; &::before, &::after { @slot; } } } } /* ------------------------------------------------------------------------------------------------- * motion-safe — Enable full animations and transitions * Priority: data-reduce-motion="false" → prefers-reduced-motion: no-preference * ------------------------------------------------------------------------------------------------- */ @custom-variant motion-safe { /* Explicit: data-reduce-motion="false" on element or ancestor */ &:is([data-reduce-motion="false"], [data-reduce-motion="false"] *) { @slot; &::before, &::after { @slot; } } /* Fallback: system has no motion preference set */ @media (prefers-reduced-motion: no-preference) { &:not( :is( [data-reduce-motion="true"], [data-reduce-motion="true"] *, [data-reduce-motion="false"], [data-reduce-motion="false"] * ) ) { @slot; &::before, &::after { @slot; } } } } /* ------------------------------------------------------------------------------------------------- * dark — Dark mode styles * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark * ------------------------------------------------------------------------------------------------- */ @custom-variant dark { /* Explicit: .dark class or data-theme="dark" on element or ancestor */ &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) { @slot; &::before, &::after { @slot; } } /* Fallback: system prefers dark color scheme */ @media (prefers-color-scheme: dark) { &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & { @slot; &::before, &::after { @slot; } } } } @layer theme, base, components, utilities; /* HeroUI v3 Styles - Layered Theme Architecture */ /* Base layer - Tailwind CSS v4 */ /* Base styles */ /* Base component structures (unstyled) */ /* Default theme (variables + component customizations) */ /* Utilities */ /* Variants */ /*! tailwindcss v4.2.2 | 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-border-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-leading:initial;--tw-tracking:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-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-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-outline-style:solid;--tw-content:""}}}@layer theme{:root{--chart-1:oklch(from var(--accent) calc(l - .24) c h);--chart-2:oklch(from var(--accent) calc(l - .12) c h);--chart-3:var(--accent);--chart-4:oklch(from var(--accent) calc(l + .12) c h);--chart-5:oklch(from var(--accent) calc(l + .24) c h)}}@layer components{.app-layout__body{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;flex:1;display:flex}.app-layout__header{top:calc(var(--spacing,.25rem) * 0);z-index:40;flex-shrink:0;position:sticky}.app-layout__toolbar{--navbar-height:56px;top:var(--navbar-height);z-index:39;flex-shrink:0;position:sticky}.app-layout__footer{flex-shrink:0}.app-layout__menu-toggle{margin-inline-start:-.5rem;display:none}@media (max-width:768px){.app-layout__menu-toggle{display:inline-flex}}[data-app-layout] [data-slot=sidebar-trigger]{margin-inline-start:-.5rem}.app-layout__main{min-width:calc(var(--spacing,.25rem) * 0);flex:1}[data-app-layout][data-scroll-mode=content]{height:100dvh;min-height:0;overflow:hidden}[data-app-layout][data-scroll-mode=content] .app-layout__main{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);overscroll-behavior-y:contain;min-height:0;overflow-y:auto}[data-app-layout][data-scroll-mode=content] .app-layout__main:focus-visible{outline:none}.app-layout__aside{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--border);background-color:var(--background);--app-layout-aside-width:320px;--app-layout-aside-duration:.2s;height:100dvh;width:var(--app-layout-aside-width);transition:width var(--app-layout-aside-duration) ease, border-color var(--app-layout-aside-duration) ease;flex-shrink:0;position:sticky;top:0;overflow:hidden}.app-layout__aside>*{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);width:var(--app-layout-aside-width);height:100%;transition:translate var(--app-layout-aside-duration) ease;overflow-y:auto}.app-layout__aside[data-state=closed]{border-inline-start-color:#0000;width:0}.app-layout__aside[data-state=closed]>*{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.app-layout__aside[data-state=closed]>:dir(rtl){--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}@media (prefers-reduced-motion:reduce){.app-layout__aside,.app-layout__aside>*{transition:none}}@media (max-width:1024px){.app-layout__aside{display:none}}.app-layout__aside-trigger{margin-inline-end:-.5rem}@media (max-width:1024px){.app-layout__aside-trigger{display:none}}@media (max-width:768px){[data-app-layout]>[data-slot=sidebar],[data-app-layout] [data-slot=sidebar-trigger]{display:none}}.navbar[data-in-app-layout=true]{z-index:auto;width:100%;height:100%;position:static}.navbar[data-in-app-layout=true].navbar--sticky,.navbar[data-in-app-layout=true].navbar--static,.navbar[data-in-app-layout=true].navbar--floating{box-shadow:none;border:none;border-radius:0;margin:0;position:static}[data-app-layout][data-resizable]{min-height:calc(var(--spacing,.25rem) * 0);flex-direction:row;height:100dvh;display:flex}.app-layout__resizable{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);flex:1;height:100%;display:flex}.app-layout__sidebar-panel{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);position:relative;overflow:hidden}.app-layout__aside-panel{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);border-style:var(--tw-border-style);border-width:0;position:relative;overflow:hidden}.app-layout__main-panel{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;display:flex;position:relative;overflow:hidden}[data-app-layout][data-resizable] [data-slot=sidebar],[data-app-layout][data-resizable] .sidebar__offcanvas-wrapper{width:100%;transition:none}[data-app-layout][data-resizable] .sidebar--default,[data-app-layout][data-resizable] .sidebar--default.sidebar--right{box-shadow:none}[data-app-layout][data-resizable] .app-layout__aside,[data-app-layout][data-resizable] .app-layout__aside-panel{border-left-color:#0000;border-right-color:#0000}[data-app-layout][data-resizable] .app-layout__aside-panel>aside,[data-app-layout][data-resizable] .app-layout__aside-panel>[data-slot=aside],[data-app-layout][data-resizable] .app-layout__aside-panel>div{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);width:100%;height:100%;overflow-y:auto}.app-layout__mobile-aside-sheet{width:100%;max-width:min(360px,88vw)}.app-layout__mobile-aside-dialog{height:100dvh;padding:0}.app-layout__mobile-aside{flex-direction:column;height:100%;min-height:0;display:flex}.action-bar{pointer-events:none;inset-inline:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 6);z-index:50;justify-content:center;display:flex;position:fixed}.action-bar [data-slot=toolbar]{border-radius:calc(var(--radius) * 3)}.action-bar__wrapper{pointer-events:auto;--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);padding:6px 12px}.action-bar__prefix{align-items:center;gap:calc(var(--spacing,.25rem) * 2.5);display:flex}.action-bar__content{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:flex}.action-bar__suffix{align-items:center;display:flex}.action-bar__label{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media (max-width:639px){.action-bar__wrapper{padding:4px 8px}.action-bar__prefix{gap:calc(var(--spacing,.25rem) * 1.5)}.action-bar__label{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}.agenda{--agenda-slot-height:60px;--agenda-time-column-width:58px;--agenda-current-time-color:var(--color-danger);--agenda-day-header-height:calc(var(--spacing) * 10);--agenda-all-day-min-height:calc(var(--spacing) * 8);--agenda-event-radius:var(--radius-md);--agenda-month-event-height:20px;--agenda-month-event-gap:2px;--agenda-month-date-offset:20px;-webkit-user-select:none;user-select:none;flex-direction:column;height:100%;display:flex;overflow:hidden}.agenda__header{align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-top:calc(var(--spacing,.25rem) * 4);padding-bottom:calc(var(--spacing,.25rem) * 1);display:flex}.agenda__heading{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);--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,);flex:1}.agenda__navigation{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:flex}.agenda__nav-button:dir(rtl) svg{--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.agenda__today-button{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.agenda__view-selector{width:fit-content}.agenda__body{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.agenda__body--month{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);overflow:auto}.agenda__week-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator);padding-inline-start:var(--agenda-time-column-width);display:flex}.agenda__day-header{min-width:calc(var(--spacing,.25rem) * 0);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * 1.5);height:var(--agenda-day-header-height);flex-direction:row;flex:1;display:flex}.agenda__day-header-name{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);line-height:1;font-weight:var(--font-weight-medium,500);color:var(--muted);text-transform:capitalize}.agenda__day-header-name[data-today=true]{color:var(--foreground)}.agenda__day-header-date{border-radius:calc(var(--radius) * 2);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);line-height:1;font-weight:var(--font-weight-medium,500);color:var(--muted);justify-content:center;align-items:center;display:flex}.agenda__day-header-date[data-today=true]{background-color:var(--danger);color:var(--color-white,#fff)}.agenda__all-day-section{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator);min-height:var(--agenda-all-day-min-height);padding-inline-start:var(--agenda-time-column-width);grid-auto-rows:min-content;align-items:start;gap:2px 0;padding-top:4px;padding-bottom:4px;display:grid;position:relative}.agenda__all-day-toggle{z-index:10;width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);border-radius:calc(var(--radius) * .5);color:var(--muted);--tw-outline-style:none;inset-inline-start:calc(var(--agenda-time-column-width) - var(--spacing) * 6);top:calc(var(--spacing) * 3);cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.agenda__all-day-toggle svg{transition:rotate .15s}.agenda__all-day-toggle[data-expanded] svg{rotate:0deg}.agenda__all-day-toggle:not([data-expanded]) svg{rotate:-90deg}.agenda__all-day-toggle:not([data-expanded]):dir(rtl) svg{rotate:90deg}@media (hover:hover){.agenda__all-day-toggle:hover{background-color:var(--default)}}.agenda__all-day-toggle:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__all-day-label{color:var(--muted);width:var(--agenda-time-column-width);text-align:end;top:50%;padding-inline-end:8px;font-size:11px;position:absolute;inset-inline-start:0;transform:translateY(-50%)}.agenda__all-day-summary{color:var(--muted);justify-content:center;align-items:center;min-height:22px;font-size:11px;display:flex}.agenda__all-day-event{text-overflow:ellipsis;white-space:nowrap;border-radius:calc(var(--radius) * .75);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);background-color:var(--agenda-event-accent,var(--color-accent));color:#fff;z-index:1;min-height:22px;cursor:var(--cursor-interactive);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;outline-style:none;margin:0 2px;line-height:22px;display:block;overflow:hidden}@media (hover:hover){.agenda__all-day-event:hover,.agenda__all-day-event[data-hovered=true]{opacity:.8}}.agenda__all-day-event:focus-visible:not(:focus),.agenda__all-day-event[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__all-day-event[data-status=unconfirmed]{border:1px dashed var(--agenda-event-accent,var(--color-accent));color:var(--agenda-event-accent,var(--color-accent));background-color:#0000}.agenda__all-day-dividers{pointer-events:none;inset:calc(var(--spacing,.25rem) * 0);display:flex;position:absolute;inset-inline-start:var(--agenda-time-column-width)}.agenda__all-day-divider{min-width:calc(var(--spacing,.25rem) * 0);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--separator);flex:1}.agenda__all-day-divider[data-weekend]{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.agenda__all-day-divider[data-weekend]{background-color:color-mix(in oklab, var(--default) 40%, transparent)}}.agenda__time-grid{scrollbar-width:none;scrollbar-color:auto;scrollbar-gutter:auto;-ms-overflow-style:none;flex:1;align-items:flex-start;display:flex;position:relative;overflow-y:auto}.agenda__time-grid--day .agenda__day-column,.agenda__time-grid--week .agenda__day-column{min-width:calc(var(--spacing,.25rem) * 0);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--separator);flex:1}.agenda__time-grid--week .agenda__day-column:first-child{border-inline-start:none}.agenda__time-labels{z-index:10;width:var(--agenda-time-column-width);height:fit-content;flex-direction:column;flex-shrink:0;display:flex;position:sticky;inset-inline-start:calc(var(--spacing,.25rem) * 0)}.agenda__time-label{text-align:end;--tw-leading:1;color:var(--muted);height:var(--agenda-slot-height);padding-inline-end:calc(var(--spacing,.25rem) * 2);font-size:11px;line-height:1;position:relative}.agenda__time-label span{inset-inline-end:calc(var(--spacing,.25rem) * 2);top:calc(var(--spacing,.25rem) * 0);position:absolute;transform:translateY(-50%)}.agenda__day-column{position:relative}.agenda__day-column[data-weekend]{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.agenda__day-column[data-weekend]{background-color:color-mix(in oklab, var(--default) 40%, transparent)}}.agenda__time-slot{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator);height:var(--agenda-slot-height);cursor:var(--cursor-interactive)}.agenda__time-slot[data-last]{border-bottom:none}.agenda__event{right:calc(var(--spacing,.25rem) * .5);left:calc(var(--spacing,.25rem) * .5);z-index:20;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);border-radius:var(--agenda-event-radius);cursor:var(--cursor-interactive);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--agenda-event-color,var(--color-accent-soft));border-inline-start:3px solid var(--agenda-event-accent,var(--color-accent));outline-style:none;min-height:20px;transition:opacity .15s;position:absolute;overflow:hidden}.agenda__event:is([data-reduce-motion=true],[data-reduce-motion=true] *),.agenda__event:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.agenda__event:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.agenda__event:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.agenda__event:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.agenda__event:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}@media (hover:hover){.agenda__event:hover,.agenda__event[data-hovered=true]{opacity:.8}}.agenda__event[data-selected=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--agenda-event-accent,var(--color-accent))}.agenda__event:focus-visible:not(:focus),.agenda__event[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__event[data-dragging=true]{--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);opacity:.9;cursor:grabbing}.agenda__event[data-resizing=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--agenda-event-accent,var(--color-accent))}.agenda__event[data-status=unconfirmed]{border-inline-start:none;border:1px dashed var(--agenda-event-accent,var(--color-accent));color:var(--agenda-event-accent,var(--color-accent));background-color:#0000}.agenda__event-title{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);display:block;overflow:hidden}.agenda__event-time{text-overflow:ellipsis;white-space:nowrap;--tw-leading:var(--leading-tight,1.25);font-size:10px;line-height:var(--leading-tight,1.25);color:var(--muted);display:block;overflow:hidden}.agenda__resize-handle{right:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:row-resize;height:8px;position:absolute}.agenda__resize-handle:after{content:"";bottom:calc(var(--spacing,.25rem) * .5);height:calc(var(--spacing,.25rem) * .5);background-color:var(--agenda-event-accent,var(--color-accent));opacity:0;border-radius:3.40282e38px;width:24px;transition:opacity .15s;display:block;position:absolute;left:50%;transform:translate(-50%)}.agenda__resize-handle:hover:after,.agenda__resize-handle:active:after{opacity:.6}.agenda__create-preview{pointer-events:none;right:calc(var(--spacing,.25rem) * .5);left:calc(var(--spacing,.25rem) * .5);z-index:10;border-radius:var(--agenda-event-radius);background-color:var(--color-accent-soft);border:1px dashed var(--color-accent);opacity:.6;position:absolute}.agenda__drop-preview{pointer-events:none;right:calc(var(--spacing,.25rem) * .5);left:calc(var(--spacing,.25rem) * .5);z-index:10;border-radius:var(--agenda-event-radius);opacity:.5;border:2px solid;position:absolute}.agenda__current-time-indicator{pointer-events:none;right:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:30;align-items:center;height:0;display:flex;position:absolute}.agenda__current-time-label{padding-inline:calc(var(--spacing,.25rem) * .5);padding-block:calc(var(--spacing,.25rem) * .5);--tw-leading:1;white-space:nowrap;background-color:var(--agenda-current-time-color);color:#fff;border-radius:var(--radius-md);font-size:10px;line-height:1}.agenda__current-time-label-wrap{width:var(--agenda-time-column-width);flex-shrink:0;justify-content:flex-end;align-items:center;padding-inline-end:1px;display:flex}.agenda__current-time-track{flex:1;height:2px;position:relative}.agenda__current-time-line--faded{inset:calc(var(--spacing,.25rem) * 0);background-color:var(--agenda-current-time-color);opacity:.2;position:absolute}.agenda__current-time-line--active{top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);background-color:var(--agenda-current-time-color);position:absolute}.agenda__current-time-line--active:before{content:"";background-color:var(--agenda-current-time-color);inset-inline-start:0;border-radius:2px;width:2px;height:8px;display:block;position:absolute;top:50%;transform:translateY(-50%)}.agenda__month-grid{flex-direction:column;flex:1;display:flex}.agenda__month-weekday-header{top:calc(var(--spacing,.25rem) * 0);z-index:20;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator);background-color:var(--background);display:flex;position:sticky}.agenda__month-weekday{padding-block:calc(var(--spacing,.25rem) * 1.5);--tw-font-weight:var(--font-weight-medium,500);font-size:11px;font-weight:var(--font-weight-medium,500);color:var(--muted);flex:1;justify-content:center;align-items:center;display:flex}.agenda__month-weekday[data-today=true]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.agenda__month-row{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator);flex:1;min-height:100px;display:flex;position:relative}.agenda__month-row:has([data-dragging]){z-index:40;overflow:visible}.agenda__month-row:last-child{border-bottom:none}.agenda__month-cell{padding:calc(var(--spacing,.25rem) * 1);padding-top:calc(var(--agenda-month-spanning-zone,0px) + var(--agenda-month-date-offset) + 2px);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.agenda__month-cell:has([data-dragging]){z-index:40;overflow:visible}.agenda__month-cell+.agenda__month-cell{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--separator)}.agenda__month-cell[data-weekend]{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.agenda__month-cell[data-weekend]{background-color:color-mix(in oklab, var(--default) 40%, transparent)}}.agenda__month-cell[data-drop-target]{box-shadow:inset 0 0 0 2px var(--agenda-drop-color,var(--color-accent));border-radius:var(--radius-md)}.agenda__month-cell[data-outside-month=true]{opacity:.4}.agenda__month-spanning-event{text-overflow:ellipsis;white-space:nowrap;border-radius:calc(var(--radius) * .75);padding-inline:calc(var(--spacing,.25rem) * 1.5);--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);font-size:10px;line-height:1;font-weight:var(--font-weight-medium,500);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--agenda-event-accent,var(--color-accent));color:#fff;cursor:var(--cursor-interactive);z-index:1;outline-style:none;align-items:center;display:flex;overflow:hidden}@media (hover:hover){.agenda__month-spanning-event:hover,.agenda__month-spanning-event[data-hovered=true]{opacity:.8}}.agenda__month-spanning-event:focus-visible:not(:focus),.agenda__month-spanning-event[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__month-spanning-event[data-status=unconfirmed]{border:1px dashed var(--agenda-event-accent,var(--color-accent));color:var(--agenda-event-accent,var(--color-accent));background-color:#0000}.agenda__month-cell-date{inset-inline-end:calc(var(--spacing,.25rem) * 1);top:calc(var(--spacing,.25rem) * 1);z-index:10;border-radius:calc(var(--radius) * 2);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);font-size:11px;line-height:1;font-weight:var(--font-weight-medium,500);color:var(--muted);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;display:flex;position:absolute}@media (hover:hover){.agenda__month-cell-date:hover{background-color:var(--default)}}.agenda__month-cell-date:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__month-cell-date[data-today=true]{background-color:var(--danger);color:var(--color-white,#fff)}@media (hover:hover){.agenda__month-cell-date[data-today=true]:hover{background-color:var(--danger)}@supports (color:color-mix(in lab, red, red)){.agenda__month-cell-date[data-today=true]:hover{background-color:color-mix(in oklab, var(--danger) 80%, transparent)}}}.agenda__month-cell-more{text-overflow:ellipsis;white-space:nowrap;border-radius:calc(var(--radius) * .5);width:100%;padding-inline:calc(var(--spacing,.25rem) * 1);text-align:start;--tw-leading:var(--leading-tight,1.25);font-size:10px;line-height:var(--leading-tight,1.25);color:var(--muted);--tw-outline-style:none;cursor:var(--cursor-interactive);-webkit-tap-highlight-color:transparent;outline-style:none;margin-top:1px;padding-block:1px;overflow:hidden}@media (hover:hover){.agenda__month-cell-more:hover{background-color:var(--default)}}.agenda__month-cell-more:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__month-event{text-overflow:ellipsis;white-space:nowrap;border-radius:calc(var(--radius) * .5);padding-inline:calc(var(--spacing,.25rem) * 1);--tw-leading:var(--leading-tight,1.25);font-size:10px;line-height:var(--leading-tight,1.25);cursor:var(--cursor-interactive);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--agenda-event-color,var(--color-accent-soft));color:var(--agenda-event-text,var(--color-accent-soft-foreground));outline-style:none;padding-block:1px;overflow:hidden}.agenda__month-event+.agenda__month-event{margin-top:1px}@media (hover:hover){.agenda__month-event:hover,.agenda__month-event[data-hovered=true]{opacity:.8}}.agenda__month-event:focus-visible:not(:focus),.agenda__month-event[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.agenda__month-event[data-dragging]{z-index:50;cursor:grabbing}.agenda__month-event[data-status=unconfirmed]{border:1px dashed var(--agenda-event-text,var(--color-accent));color:var(--agenda-event-text,var(--color-accent));background-color:#0000}.agenda--month .agenda__time-grid,.agenda--month .agenda__all-day-section,.agenda--month .agenda__week-header{display:none}@media (max-width:639px){.agenda{--agenda-slot-height:48px;--agenda-time-column-width:58px;--agenda-month-event-height:16px;--agenda-month-event-gap:1px;--agenda-month-date-offset:16px}.agenda__header{padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:8px;display:grid}.agenda__heading{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));grid-area:1/1}.agenda__navigation{grid-area:1/2}.agenda__view-selector{grid-area:2/1}.agenda__time-label{font-size:9px}.agenda__event{padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5)}.agenda__event-title{font-size:10px}.agenda__event-time,.agenda__resize-handle{display:none}.agenda__day-header-name{font-size:10px}.agenda__day-header-date{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.agenda__all-day-event{min-height:18px;font-size:10px;line-height:18px}.agenda__month-row{min-height:72px}.agenda__month-cell-date,.agenda__month-event,.agenda__month-spanning-event{font-size:9px}.agenda__current-time-label{padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);font-size:9px}.agenda__create-preview{display:none}}.area-chart{width:100%}.area-chart .recharts-cartesian-axis-tick-value{font-size:10px;fill:var(--muted)!important}.area-chart .recharts-cartesian-axis-line,.area-chart .recharts-cartesian-axis-tick-line{stroke:none!important}.area-chart .recharts-cartesian-grid line{stroke:var(--muted);stroke-opacity:.15}.area-chart .recharts-tooltip-cursor{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1px}.area-chart .recharts-tooltip-wrapper{z-index:10}.area-chart .recharts-active-dot circle{stroke:var(--surface);stroke-width:2px}.bar-chart{width:100%}.bar-chart .recharts-cartesian-axis-tick-value{font-size:10px;fill:var(--muted)!important}.bar-chart .recharts-cartesian-axis-line,.bar-chart .recharts-cartesian-axis-tick-line{stroke:none!important}.bar-chart .recharts-cartesian-grid line{stroke:var(--muted);stroke-opacity:.15}.bar-chart .recharts-tooltip-cursor{fill:currentColor;opacity:.05}.carousel{--tw-outline-style:none;--carousel-gap:calc(var(--spacing) * 4);outline-style:none}.carousel:focus-visible:not(:focus),.carousel[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.carousel__viewport-wrapper{position:relative}.carousel__viewport{overflow:hidden}.carousel__content{display:flex}.carousel__content--horizontal{flex-direction:row;margin-inline-start:calc(var(--carousel-gap) * -1)}.carousel__item{min-width:calc(var(--spacing,.25rem) * 0);flex:0 0 100%;position:relative}.carousel__item--horizontal{padding-inline-start:var(--carousel-gap)}.carousel__previous,.carousel__next{z-index:10;position:absolute}:is(.carousel__previous:dir(rtl) svg,.carousel__next:dir(rtl) svg){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.carousel__previous--in-place,.carousel__next--in-place{top:50%;translate:0 -50%}.carousel__previous--in-place{inset-inline-start:calc(var(--spacing) * 5)}.carousel__next--in-place{inset-inline-end:calc(var(--spacing) * 5)}.carousel__previous--modal,.carousel__next--modal{top:50%;translate:0 -50%}.carousel__previous--modal{inset-inline-start:calc(var(--spacing) * -15)}.carousel__next--modal{inset-inline-end:calc(var(--spacing) * -15)}.carousel__previous--miniatures,.carousel__next--miniatures{top:auto;flex-shrink:0;position:relative;inset-inline:auto;transform:none}.carousel__dots{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);margin-top:calc(var(--spacing,.25rem) * 4);display:flex}.carousel__dot{width:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 2);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--default);border-radius:calc(var(--radius) * 9999);cursor:var(--cursor-interactive);outline-style:none;transition:background-color .2s}@media (hover:hover){.carousel__dot:hover,.carousel__dot[data-hovered=true]{background-color:var(--default-hover)}}.carousel__dot:focus-visible:not(:focus),.carousel__dot[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.carousel__dot[data-selected=true]{background-color:var(--accent)}.carousel__thumbnails{align-items:center;gap:calc(var(--spacing,.25rem) * 3);margin-inline:calc(var(--spacing,.25rem) * -1);margin-top:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 1);cursor:var(--cursor-interactive);display:flex}.carousel__thumbnails--miniatures{margin-top:calc(var(--spacing,.25rem) * 0);justify-content:center}.carousel__thumbnail{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16);border-radius:calc(var(--radius) * 2);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;flex-shrink:0;transition:box-shadow .15s,opacity .15s,transform .15s;position:relative}.carousel__thumbnail img{pointer-events:none;inset:calc(var(--spacing,.25rem) * 0);border-radius:calc(var(--radius) * 2);object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute}@media (hover:hover){.carousel__thumbnail:hover,.carousel__thumbnail[data-hovered=true]{opacity:.85}}.carousel__thumbnail:active,.carousel__thumbnail[data-pressed=true]{transform:scale(.95)}.carousel__thumbnail:focus-visible:not(:focus),.carousel__thumbnail[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.carousel__thumbnail[data-selected=true]{box-shadow:0 0 0 2px var(--color-accent)}@media (prefers-reduced-motion:reduce){.carousel__thumbnail{transition:none}}.carousel--modal{align-items:center;gap:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}.carousel--miniatures{flex-direction:column;align-items:center;display:flex}.chain-of-thought{width:100%;max-width:none;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.chain-of-thought__trigger{width:fit-content;cursor:var(--cursor-interactive);justify-content:flex-start;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 0);--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--muted);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#0000;transform:none}@media (hover:hover){.chain-of-thought__trigger:hover,.chain-of-thought__trigger[data-hovered=true]{color:var(--foreground);background-color:#0000}}.chain-of-thought__trigger:active,.chain-of-thought__trigger[data-pressed=true]{background-color:#0000;transform:none}.chain-of-thought--streaming .chain-of-thought__trigger{color:var(--foreground)}.chain-of-thought__steps{gap:calc(var(--spacing,.25rem) * 3);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--default);flex-direction:column;padding-inline-start:calc(var(--spacing,.25rem) * 3);display:flex}.chain-of-thought__step{gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex}.chain-of-thought__step-header{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.chain-of-thought__step-indicator{width:calc(var(--spacing,.25rem) * 1.5);height:calc(var(--spacing,.25rem) * 1.5);background-color:var(--muted);border-radius:3.40282e38px;flex-shrink:0}@supports (color:color-mix(in lab, red, red)){.chain-of-thought__step-indicator{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.chain-of-thought__step-label{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);color:var(--muted)}.chain-of-thought__step-content{--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625);color:var(--foreground)}.chat-attachment{border-radius:calc(var(--radius) * 1.5);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);background-color:#0000;flex-shrink:0;position:relative}.chat-attachment[data-variant=media]{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16);overflow:hidden}.chat-attachment[data-variant=file]{height:calc(var(--spacing,.25rem) * 16);max-width:calc(var(--spacing,.25rem) * 64);align-items:center;gap:calc(var(--spacing,.25rem) * 2.5);padding-inline:calc(var(--spacing,.25rem) * 3);display:flex}.chat-attachment__preview{justify-content:center;align-items:center;display:flex;overflow:hidden}.chat-attachment[data-variant=media] .chat-attachment__preview{width:100%;height:100%}.chat-attachment[data-variant=file] .chat-attachment__preview{width:auto;height:auto;color:var(--muted);flex-shrink:0}.chat-attachment__preview-image,.chat-attachment__preview-video{object-fit:cover;width:100%;height:100%}.chat-attachment__icon{justify-content:center;align-items:center;display:inline-flex}.chat-attachment__icon svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.chat-attachment[data-variant=file]>.chat-attachment__info,.chat-attachment[data-variant=file]>.chat-attachment__name{min-width:calc(var(--spacing,.25rem) * 0);flex:1}.chat-attachment[data-variant=file] .chat-attachment__info{justify-content:center;gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex}.chat-attachment[data-variant=media]>.chat-attachment__info,.chat-attachment[data-variant=media]>.chat-attachment__name{pointer-events:none;inset-inline:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:color-mix(in oklab, var(--color-black,#000) 75%, transparent);--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-top:calc(var(--spacing,.25rem) * 5);padding-bottom:calc(var(--spacing,.25rem) * 1);opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}.chat-attachment[data-variant=media]:hover>.chat-attachment__info,.chat-attachment[data-variant=media]:hover>.chat-attachment__name,.chat-attachment[data-variant=media]:focus-within>.chat-attachment__info,.chat-attachment[data-variant=media]:focus-within>.chat-attachment__name{opacity:1}.chat-attachment__name{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:block;overflow:hidden}.chat-attachment[data-variant=file] .chat-attachment__name{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground)}.chat-attachment[data-variant=media] .chat-attachment__name{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-white,#fff)}.chat-attachment__size{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);--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,);display:block}.chat-attachment[data-variant=media] .chat-attachment__size{display:none}.chat-attachment__remove{background-color:var(--default);color:var(--muted);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media (hover:hover){.chat-attachment__remove:hover{background-color:var(--default-hover);color:var(--foreground)}}.chat-attachment[data-variant=media] .chat-attachment__remove{inset-inline-end:calc(var(--spacing,.25rem) * 1.5);top:calc(var(--spacing,.25rem) * 1.5);opacity:.7;--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-sm,8px));-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-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}.chat-attachment[data-variant=file] .chat-attachment__remove{background-color:#0000;flex-shrink:0}.chat-attachment[data-variant=media] [data-slot=chat-attachment-remove]{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.chat-attachment[data-variant=media] [data-slot=chat-attachment-remove] svg{width:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 2)}.chat-attachment[data-variant=file] [data-slot=chat-attachment-remove]{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.chat-attachment[data-variant=file] [data-slot=chat-attachment-remove] svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}@media (hover:hover){.chat-attachment[data-variant=media] .chat-attachment__remove{opacity:0}.chat-attachment[data-variant=media]:hover .chat-attachment__remove,.chat-attachment[data-variant=media]:focus-within .chat-attachment__remove{opacity:1}}.chat-attachment-group{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}.chat-conversation{min-height:calc(var(--spacing,.25rem) * 0);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);--chat-conversation-shadow-size:32px;--chat-conversation-scrollbar-mask-size:10px;-webkit-mask-image:linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black);-webkit-mask-image:linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black);mask-image:linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black);-webkit-mask-position:0 0,100% 0;mask-position:0 0,100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%;-webkit-mask-size:calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%;mask-size:calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%;-webkit-mask-image:linear-gradient(to bottom, transparent, black var(--chat-conversation-shadow-size), black calc(100% - var(--chat-conversation-shadow-size)), transparent), linear-gradient(black, black);-webkit-mask-position:0 0,100% 0;-webkit-mask-repeat:no-repeat;-webkit-mask-size:calc(100% - var(--chat-conversation-scrollbar-mask-size)) 100%, var(--chat-conversation-scrollbar-mask-size) 100%;flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.chat-conversation__content{flex-direction:column;width:100%;margin-inline:auto;display:flex}.chat-conversation__scroll-anchor{width:100%;height:1px;scroll-margin-top:calc(var(--spacing,.25rem) * 4);flex-shrink:0}.chat-conversation__scroll-button-container{bottom:calc(var(--spacing,.25rem) * 4);z-index:10;width:max-content;margin-inline:auto;position:sticky}.chat-conversation__scroll-button-container[data-state=hidden]{pointer-events:none;visibility:hidden}.chat-conversation__scroll-button{border-style:var(--tw-border-style);background-color:var(--surface);color:var(--foreground);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-width:1px;border-color:#0000}.chat-conversation__scroll-button:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *),.chat-conversation__scroll-button:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):before,.chat-conversation__scroll-button:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):after{border-color:var(--border)}@media (prefers-color-scheme:dark){.chat-conversation__scroll-button:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .chat-conversation__scroll-button,.chat-conversation__scroll-button:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .chat-conversation__scroll-button:before,.chat-conversation__scroll-button:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .chat-conversation__scroll-button:after{border-color:var(--border)}}.chat-conversation__scroll-button{--button-bg:var(--surface);--button-bg-hover:var(--surface);--button-bg-pressed:var(--surface);--button-fg:var(--foreground)}.chat-list-view{width:100%}.chat-list-view__icon{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);flex-shrink:0}.chat-list-view__text{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;display:flex}.chat-list-view__title{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);overflow:hidden}.chat-list-view__preview{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);overflow:hidden}.chat-list-view__meta{color:var(--muted);flex-shrink:0;margin-inline-start:auto;font-size:11px}.chat-list-view--compact .chat-list-view__preview,.chat-list-view--compact .chat-list-view__meta{display:none}@keyframes chat-loader-bounce{0%,80%,to{opacity:.35;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}@keyframes chat-loader-pulse{0%,to{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}.chat-loader__dots{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:inline-flex}.chat-loader__dot{background-color:var(--muted);border-radius:3.40282e38px;width:.375rem;height:.375rem;animation:1.2s ease-in-out infinite both chat-loader-bounce}.chat-loader__dot:first-child{animation-delay:-.24s}.chat-loader__dot:nth-child(2){animation-delay:-.12s}.chat-loader__dots--sm .chat-loader__dot{width:.3125rem;height:.3125rem}.chat-loader__dots--lg .chat-loader__dot{width:.5rem;height:.5rem}.chat-loader__pulse{background-color:var(--accent);border-radius:3.40282e38px;width:.5rem;height:.5rem;animation:1.4s ease-in-out infinite chat-loader-pulse}.chat-loader__pulse--sm{width:.375rem;height:.375rem}.chat-loader__pulse--lg{width:.625rem;height:.625rem}.chat-loader__skeleton{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);width:100%;display:flex}.chat-loader__skeleton-avatar{background-color:var(--default);border-radius:3.40282e38px;flex-shrink:0;width:2rem;height:2rem}.chat-loader__skeleton-avatar--sm{width:1.5rem;height:1.5rem}.chat-loader__skeleton-avatar--lg{width:2.25rem;height:2.25rem}.chat-loader__skeleton-block{min-width:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;flex:1;display:flex}.chat-loader__skeleton-line{height:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * .75);background-color:var(--default);width:100%}.chat-loader__skeleton-line--sm{height:calc(var(--spacing,.25rem) * 2.5)}.chat-loader__skeleton-line--lg{height:calc(var(--spacing,.25rem) * 3.5)}.chat-loader__skeleton-line:nth-child(2){width:85%}.chat-loader__skeleton-line:nth-child(3){width:65%}.chat-loader__spinner{display:inline-flex}@media (prefers-reduced-motion:reduce){.chat-loader__dot,.chat-loader__pulse{opacity:.7;animation:none}}.chat-source{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:inline-flex}.chat-source__trigger{height:calc(var(--spacing,.25rem) * 5);align-items:center;max-width:100%;display:inline-flex}.chat-source .hover-card__trigger{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:inline-flex}.chat-source__trigger-link{height:calc(var(--spacing,.25rem) * 5);max-width:calc(var(--spacing,.25rem) * 32);align-items:center;gap:calc(var(--spacing,.25rem) * 1);background-color:var(--default);padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * 0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:1;color:var(--muted);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;border-radius:3.40282e38px;line-height:1;text-decoration-line:none;transition-duration:.15s;display:inline-flex;overflow:hidden}@media (hover:hover){.chat-source__trigger-link:hover{background-color:var(--default-hover);color:var(--foreground)}}.chat-source__icon,.chat-source__document-icon{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5);object-fit:cover;border-radius:3.40282e38px;flex-shrink:0}.chat-source__icon-fallback{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5);background-color:var(--muted);--tw-font-weight:var(--font-weight-medium,500);font-size:10px;font-weight:var(--font-weight-medium,500);color:var(--muted);border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.chat-source__title{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;text-align:start;--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);overflow:hidden}.chat-source__preview{width:calc(var(--spacing,.25rem) * 80);padding:calc(var(--spacing,.25rem) * 0)}.chat-source__preview-link{gap:calc(var(--spacing,.25rem) * 1.5);padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;text-decoration-line:none;display:flex}.chat-source__preview-header{align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);display:flex}.chat-source__preview-title{-webkit-line-clamp:2;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-source__preview-description{-webkit-line-clamp:2;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-sources,.chat-sources [data-slot=disclosure-heading]{width:100%}.chat-sources__trigger{height:auto;min-height:calc(var(--spacing,.25rem) * 8);cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:fit-content;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 1);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted);display:inline-flex}@media (hover:hover){.chat-sources__trigger:hover{color:var(--foreground)}}.chat-sources__trigger{-webkit-tap-highlight-color:transparent;transition:color .1s var(--ease-out)}.chat-sources .chat-sources__content{transition:height .15s var(--ease-out-quad), opacity .15s var(--ease-out)}.chat-sources [data-slot=disclosure-indicator]{transition-duration:.15s}@media (prefers-reduced-motion:reduce){.chat-sources .chat-sources__content,.chat-sources [data-slot=disclosure-indicator]{transition:none}}.chat-sources__content{border-top-style:var(--tw-border-style);border-top-width:0;border-color:var(--default)}.chat-sources__content[data-expanded=true]{border-top-style:var(--tw-border-style);border-top-width:1px}.chat-sources__content-body{padding-top:calc(var(--spacing,.25rem) * 2)}.chat-sources__list{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}.chat-sources__trigger-label{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:inline-flex}.chat-tool{border-radius:calc(var(--radius) * 1.5);border-style:var(--tw-border-style);border-width:1px;border-color:var(--default);width:100%;overflow:hidden}.chat-tool [data-slot=disclosure-heading],.chat-tool-group [data-slot=disclosure-heading]{width:100%}.chat-tool__trigger,.chat-tool-group__trigger{height:auto;min-height:calc(var(--spacing,.25rem) * 9);cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);text-align:start;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--foreground);-webkit-tap-highlight-color:transparent;border-radius:0;display:inline-flex}@media (hover:hover){.chat-tool__trigger:hover,.chat-tool__trigger[data-hovered=true],.chat-tool-group__trigger:hover,.chat-tool-group__trigger[data-hovered=true]{background-color:var(--default)}}.chat-tool__trigger:active,.chat-tool__trigger[data-pressed=true],.chat-tool-group__trigger:active,.chat-tool-group__trigger[data-pressed=true]{background-color:var(--default)}.chat-tool__trigger[data-expandable=false],.chat-tool__trigger[data-expandable=false]:hover,.chat-tool__trigger[data-expandable=false][data-hovered=true],.chat-tool__trigger[data-expandable=false]:active,.chat-tool__trigger[data-expandable=false][data-pressed=true]{cursor:default;background-color:#0000}.chat-tool--streaming .chat-tool__trigger,.chat-tool--running .chat-tool__trigger{color:var(--foreground)}.chat-tool--error{border-color:var(--danger)}@supports (color:color-mix(in lab, red, red)){.chat-tool--error{border-color:color-mix(in oklab, var(--danger) 30%, transparent)}}.chat-tool--requires-action{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.chat-tool--requires-action{border-color:color-mix(in oklab, var(--warning) 40%, transparent)}}.chat-tool__trigger-label{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);display:flex}.chat-tool__trigger-label>.text-shimmer{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:inline-flex}.chat-tool__content{border-top-style:var(--tw-border-style);border-top-width:0;border-color:var(--default)}.chat-tool__content:not([data-expanded=true]),.chat-tool-group__content:not([data-expanded=true]){opacity:0;height:0!important}.chat-tool__content-body{gap:calc(var(--spacing,.25rem) * 1);padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex}.chat-tool__args-label,.chat-tool__result-label,.chat-tool__error-label{margin-bottom:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-medium,500);font-size:10px;font-weight:var(--font-weight-medium,500);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);color:var(--muted);text-transform:uppercase}.chat-tool__args,.chat-tool__result,.chat-tool__error{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.chat-tool__args .code-block,.chat-tool__result .code-block{margin-block:calc(var(--spacing,.25rem) * 1);border-radius:calc(var(--radius) * 1.5)}.chat-tool__args .code-block__code,.chat-tool__result .code-block__code{--tw-leading:calc(var(--spacing,.25rem) * 5);font-size:11px;line-height:calc(var(--spacing,.25rem) * 5)}.chat-tool__args .code-block__code pre,.chat-tool__result .code-block__code pre{padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * 1.5)}.chat-tool__error{color:var(--danger)}.chat-tool__approval{gap:calc(var(--spacing,.25rem) * 2);padding-top:calc(var(--spacing,.25rem) * 3);flex-direction:column;display:flex}.chat-tool__approval-actions{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.chat-tool__meta{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--default);padding-top:calc(var(--spacing,.25rem) * 2);font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.chat-tool__status{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5);color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.chat-tool-group{border-radius:calc(var(--radius) * 1.5);border-style:var(--tw-border-style);border-width:1px;border-color:var(--default);width:100%;overflow:hidden}.chat-tool-group__content{border-top-style:var(--tw-border-style);border-top-width:0;border-color:var(--default)}.chat-tool-group__content-body{gap:calc(var(--spacing,.25rem) * 1.5);padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex}.chat-tool-group__trigger-label{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);display:flex}.chat-message-actions{align-items:flex-start;display:flex}.chat-message--user{flex-direction:column;align-items:flex-end;width:100%;display:flex}.chat-message--assistant{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);width:100%;padding-block:calc(var(--spacing,.25rem) * 2);flex-direction:row;display:flex}.chat-message__body{min-width:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;flex:1;padding-inline-end:calc(var(--spacing,.25rem) * 12);display:flex}.chat-message__bubble{border-radius:calc(var(--radius) * 2);background-color:var(--default);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);color:var(--foreground)}.chat-message__content{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625);color:var(--foreground)}.chat-message--assistant .chat-message__content{width:100%;max-width:none}.chat-message__media{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.chat-message__actions{opacity:.5;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));align-items:flex-start;display:flex}@media (hover:hover){.chat-message--assistant:hover .chat-message__actions,.chat-message--user:hover .chat-message__actions{opacity:1}}.chat-message__action{color:var(--muted)}.chat-message__avatar{flex-shrink:0;align-self:flex-start}.chat-message__avatar-spacer{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);flex-shrink:0;align-self:flex-start}.cell-color-picker{--cell-color-picker-swatch-size:1.25rem;display:flex}.cell-color-picker .cell-color-picker__trigger{height:calc(var(--spacing,.25rem) * 9);align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-style:var(--tw-border-style);background-color:var(--field-background,var(--default));width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);color:var(--field-foreground,var(--foreground));--tw-shadow:var(--field-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);border-width:1px;outline-style:none;display:flex}.cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.cell-color-picker .cell-color-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.cell-color-picker .cell-color-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.cell-color-picker .cell-color-picker__trigger{border-width:var(--border-width-field);border-color:var(--color-field-border);padding-inline-end:.75rem}@media (hover:hover){.cell-color-picker .cell-color-picker__trigger:hover,.cell-color-picker .cell-color-picker__trigger[data-hovered=true]{background-color:var(--field-hover);border-color:var(--color-field-border-hover)}}.cell-color-picker .cell-color-picker__trigger:focus-visible:not(:focus),.cell-color-picker .cell-color-picker__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;border-color:var(--color-field-border-focus);background-color:var(--color-field-focus);outline-style:none}.cell-color-picker .cell-color-picker__trigger:disabled,.cell-color-picker .cell-color-picker__trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.cell-color-picker .cell-color-picker__trigger--secondary{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--color-default)}@media (hover:hover){.cell-color-picker .cell-color-picker__trigger--secondary:hover,.cell-color-picker .cell-color-picker__trigger--secondary[data-hovered=true]{background-color:var(--color-default-hover)}}.cell-color-picker .cell-color-picker__trigger--secondary:focus-visible:not(:focus),.cell-color-picker .cell-color-picker__trigger--secondary[data-focus-visible=true]{background-color:var(--color-default)}.cell-color-picker .cell-color-picker__label{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);flex:1;overflow:hidden}.cell-color-picker .cell-color-picker__value-display{text-overflow:ellipsis;white-space:nowrap;text-align:end;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);flex-shrink:0;margin-inline-start:auto;overflow:hidden}.cell-color-picker .cell-color-picker__swatch{width:var(--cell-color-picker-swatch-size);height:var(--cell-color-picker-swatch-size);border-radius:3.40282e38px;flex-shrink:0}.cell-color-picker .cell-color-picker__popover{min-width:var(--trigger-width)}.cell-select{--cell-select-indicator-size:.75rem}.cell-select .cell-select__trigger{height:calc(var(--spacing,.25rem) * 9);align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-style:var(--tw-border-style);background-color:var(--field-background,var(--default));padding-inline:calc(var(--spacing,.25rem) * 3);color:var(--field-foreground,var(--foreground));--tw-shadow:var(--field-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);border-width:1px;outline-style:none;display:flex}.cell-select .cell-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.cell-select .cell-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.cell-select .cell-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.cell-select .cell-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.cell-select .cell-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.cell-select .cell-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.cell-select .cell-select__trigger{border-width:var(--border-width-field);border-color:var(--color-field-border);padding-inline-end:.75rem}@media (hover:hover){.cell-select .cell-select__trigger:hover,.cell-select .cell-select__trigger[data-hovered=true]{background-color:var(--field-hover);border-color:var(--color-field-border-hover)}}.cell-select .cell-select__trigger:focus-visible:not(:focus),.cell-select .cell-select__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;border-color:var(--color-field-border-focus);background-color:var(--color-field-focus);outline-style:none}.cell-select .cell-select__trigger:disabled,.cell-select .cell-select__trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.cell-select .cell-select__trigger--secondary{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--color-default)}@media (hover:hover){.cell-select .cell-select__trigger--secondary:hover,.cell-select .cell-select__trigger--secondary[data-hovered=true]{background-color:var(--color-default-hover)}}.cell-select .cell-select__trigger--secondary:focus-visible:not(:focus),.cell-select .cell-select__trigger--secondary[data-focus-visible=true]{background-color:var(--color-default)}.cell-select .cell-select__label{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);flex:1;overflow:hidden}.cell-select .cell-select__value{text-overflow:ellipsis;white-space:nowrap;text-align:end;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);flex-shrink:0;margin-inline-start:auto;overflow:hidden}.cell-select .cell-select__indicator{margin-block:calc(var(--spacing,.25rem) * 0);color:var(--muted);width:var(--cell-select-indicator-size);height:var(--cell-select-indicator-size);flex-shrink:0;position:static}.cell-select .cell-select__indicator[data-open=true]{rotate:0deg}.cell-select .cell-select__popover{min-width:var(--trigger-width)}.cell-switch{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;outline-style:none;gap:0}.cell-switch .cell-switch__trigger{height:calc(var(--spacing,.25rem) * 9);align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-style:var(--tw-border-style);background-color:var(--field-background,var(--default));width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);color:var(--field-foreground,var(--foreground));--tw-shadow:var(--field-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);border-width:1px;display:flex}.cell-switch .cell-switch__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.cell-switch .cell-switch__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.cell-switch .cell-switch__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.cell-switch .cell-switch__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.cell-switch .cell-switch__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.cell-switch .cell-switch__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.cell-switch .cell-switch__trigger{border-width:var(--border-width-field);border-color:var(--color-field-border);padding-inline-end:.75rem}.cell-switch .cell-switch__trigger--secondary{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--color-default)}.cell-switch .cell-switch__control--secondary{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.cell-switch .cell-switch__control--secondary{background-color:color-mix(in oklab, var(--muted) 20%, transparent)}}.cell-switch .cell-switch__label{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);flex:1;overflow:hidden}.cell-switch .cell-switch__control{flex-shrink:0}@media (hover:hover){.cell-switch .cell-switch__trigger[data-hovered=true]{background-color:var(--field-hover);border-color:var(--color-field-border-hover)}.cell-switch .cell-switch__trigger--secondary[data-hovered=true]{background-color:var(--color-default-hover)}.cell-switch .cell-switch__trigger[data-hovered=true] .cell-switch__control--secondary{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.cell-switch .cell-switch__trigger[data-hovered=true] .cell-switch__control--secondary{background-color:color-mix(in oklab, var(--muted) 20%, transparent)}}}.cell-switch .cell-switch__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;border-color:var(--color-field-border-focus);background-color:var(--color-field-focus);outline-style:none}.cell-switch .cell-switch__trigger--secondary[data-focus-visible=true]{background-color:var(--color-default)}.cell-switch[data-disabled=true] .cell-switch__trigger,.cell-switch .cell-switch__trigger[data-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.cell-switch .cell-switch__trigger[data-pressed=true] .cell-switch__control--secondary{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.cell-switch .cell-switch__trigger[data-pressed=true] .cell-switch__control--secondary{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.cell-slider{--cell-slider-thumb-width:2px;--cell-slider-thumb-height:16px;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;outline-style:none;grid-template:none;gap:0;display:block}.cell-slider .cell-slider__track{height:calc(var(--spacing,.25rem) * 9);border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-style:var(--tw-border-style);background-color:var(--field-background,var(--default));width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);color:var(--field-foreground,var(--foreground));--tw-shadow:var(--field-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);border-width:1px;outline-style:none;align-items:center;display:flex;position:relative;overflow:hidden}.cell-slider .cell-slider__track:is([data-reduce-motion=true],[data-reduce-motion=true] *),.cell-slider .cell-slider__track:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.cell-slider .cell-slider__track:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.cell-slider .cell-slider__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.cell-slider .cell-slider__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.cell-slider .cell-slider__track:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.cell-slider .cell-slider__track{border-width:var(--border-width-field);border-color:var(--color-field-border);padding-right:.75rem}@media (hover:hover){.cell-slider .cell-slider__track:hover,.cell-slider .cell-slider__track[data-hovered=true]{background-color:var(--field-hover);border-color:var(--color-field-border-hover)}}.cell-slider .cell-slider__track[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;border-color:var(--color-field-border-focus);background-color:var(--color-field-focus);outline-style:none}.cell-slider .cell-slider__track--secondary{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--color-default)}@media (hover:hover){.cell-slider .cell-slider__track--secondary:hover,.cell-slider .cell-slider__track--secondary[data-hovered=true]{background-color:var(--color-surface-tertiary)}}.cell-slider .cell-slider__track--secondary[data-focus-visible=true]{background-color:var(--color-default)}.cell-slider .cell-slider__track--secondary .cell-slider__fill{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.cell-slider .cell-slider__track--secondary .cell-slider__fill{background-color:color-mix(in oklab, var(--muted) 20%, transparent)}}.cell-slider .cell-slider__fill{pointer-events:none;inset-block:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);background-color:var(--color-default);border-radius:0;position:absolute}.cell-slider .cell-slider__thumb{top:calc(var(--spacing,.25rem) * 0);--tw-translate-y:calc(1 / 2 * 100%);height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);--tw-outline-style:none;z-index:2;width:calc(var(--cell-slider-thumb-width) * 2);box-shadow:none;cursor:var(--cursor-interactive);background:0 0;border:none;border-radius:0;outline-style:none;justify-content:center;align-items:center;display:flex;position:absolute}.cell-slider .cell-slider__thumb:after{content:"";width:var(--cell-slider-thumb-width);height:var(--cell-slider-thumb-height);border-radius:var(--radius-md);background-color:var(--color-foreground);opacity:0;box-shadow:none;transition:opacity .15s var(--ease-smooth), transform .12s var(--ease-smooth);display:block}.cell-slider .cell-slider__thumb:after:is(){transition-property:none}@media (prefers-reduced-motion:reduce){.cell-slider .cell-slider__thumb:after:not(:is()){transition-property:none}}.cell-slider .cell-slider__thumb[data-focus-visible=true]{box-shadow:none;outline:none}.cell-slider .cell-slider__thumb[data-focus-visible=true]:after{opacity:.7;--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none;transform:scaleY(1.2)}.cell-slider .cell-slider__thumb[data-dragging=true]{cursor:var(--cursor-interactive)}.cell-slider .cell-slider__thumb[data-dragging=true]:after{opacity:.7;transform:scaleY(1.5)}@media (hover:hover){.cell-slider .cell-slider__track:hover .cell-slider__thumb:not([data-dragging=true]):after,.cell-slider .cell-slider__track[data-hovered=true] .cell-slider__thumb:not([data-dragging=true]):after{opacity:.4}}.cell-slider .cell-slider__label{pointer-events:none;max-width:60%;min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);z-index:1;inset-inline-start:calc(var(--spacing,.25rem) * 3);position:absolute;top:50%;overflow:hidden;transform:translateY(-50%)}.cell-slider .cell-slider__output{pointer-events:none;text-align:end;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--muted);z-index:1;font-variant-numeric:tabular-nums;inset-inline-end:calc(var(--spacing,.25rem) * 3);position:absolute;top:50%;transform:translateY(-50%)}.cell-slider[data-disabled=true] .cell-slider__track,.cell-slider[aria-disabled=true] .cell-slider__track{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.cell-slider[data-orientation=horizontal]{flex-direction:row}.cell-slider[data-orientation=horizontal] .cell-slider__track{height:calc(var(--spacing,.25rem) * 9);border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-inline-width:0}.cell-slider[data-orientation=horizontal] .cell-slider__fill,.cell-slider[data-orientation=horizontal] .cell-slider__thumb{height:100%}.cell-slider[data-orientation=horizontal] .cell-slider__thumb{width:1.25rem;top:0}.cell-slider[data-orientation=horizontal] .cell-slider__thumb:after{width:var(--cell-slider-thumb-width);height:var(--cell-slider-thumb-height)}.chart-tooltip{gap:calc(var(--spacing,.25rem) * 1.5);border-radius:calc(var(--radius) * 1);border-style:var(--tw-border-style);background-color:var(--overlay);min-width:140px;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);border-width:1px;border-color:var(--separator);box-shadow:var(--overlay-shadow);font-variant-numeric:tabular-nums;flex-direction:column;display:flex}.chart-tooltip__header{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted)}.chart-tooltip__item{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.chart-tooltip__indicator{flex-shrink:0}.chart-tooltip__indicator--dot{width:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 2);border-radius:3.40282e38px}.chart-tooltip__indicator--line{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 1);border-radius:3.40282e38px}.chart-tooltip__label{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);flex:1}.chart-tooltip__value{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.checkbox-button-group{gap:calc(var(--spacing,.25rem) * 3);--checkbox-button-group-item-radius:var(--radius-2xl);display:flex}.checkbox-button-group--grid{display:grid}.checkbox-button-group>[data-slot=checkbox-button-group-item]{display:contents}.checkbox-button-group__item{align-items:stretch;gap:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 4);--tw-ring-color:transparent;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);background-color:var(--surface);border-radius:var(--checkbox-button-group-item-radius);cursor:var(--cursor-interactive);outline-style:none;flex-direction:column;display:flex;position:relative}.checkbox-button-group__item[data-selected=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--accent);border-color:#0000}.checkbox-button-group__item:focus-visible:not(:focus),.checkbox-button-group__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.checkbox-button-group__item[data-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.checkbox-button-group__indicator{inset-inline-end:calc(var(--spacing,.25rem) * 4);top:calc(var(--spacing,.25rem) * 3);position:absolute}.checkbox-button-group__indicator[data-custom=true]{color:var(--accent);opacity:0;transition:opacity .15s ease-out}.checkbox-button-group__indicator[data-custom=true] svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}[data-selected=true]>.checkbox-button-group__indicator[data-custom=true]{opacity:1}.checkbox-button-group__item-content{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;display:flex}.checkbox-button-group__item-icon{flex-shrink:0}.checkbox-button-group__item-icon svg{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.code-block{margin-block:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 2);background-color:var(--surface-secondary);width:100%;color:var(--surface-secondary-foreground);flex-direction:column;display:flex;overflow:clip}.code-block__header{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 2);display:flex}.code-block__code{--tw-leading:var(--leading-relaxed,1.625);width:100%;font-size:13px;line-height:var(--leading-relaxed,1.625);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);overflow-x:auto}.code-block__code pre{margin:calc(var(--spacing,.25rem) * 0);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);background:0 0!important}.code-block__code code{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}.code-block__code .line{padding-inline:0!important}.code-block__code .shiki,.code-block__code .shiki span{color:var(--shiki-light,var(--color-surface-secondary-foreground))}:is(.dark,.glass-dark,.mouve-dark,.brutalism-dark,[data-theme=dark],[data-theme$=-dark]) .code-block__code .shiki,:is(.dark,.glass-dark,.mouve-dark,.brutalism-dark,[data-theme=dark],[data-theme$=-dark]) .code-block__code .shiki span{color:var(--shiki-dark,var(--color-surface-secondary-foreground))}.code-block__copy-button{cursor:var(--cursor-interactive);color:var(--muted);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;outline-style:none;flex-shrink:0}.code-block__copy-button.button--icon-only.button--sm{width:24px;height:24px}.code-block__copy-button.button--icon-only.button--sm svg{width:12px;height:12px;margin:0}.code-block__copy-button:focus-visible:not(:focus),.code-block__copy-button[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.code-block__copy-button:disabled,.code-block__copy-button[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}@media (hover:hover){.code-block__copy-button:hover,.code-block__copy-button[data-hovered=true]{color:var(--foreground)}}.composed-chart{width:100%}.composed-chart .recharts-cartesian-axis-tick-value{font-size:10px;fill:var(--muted)!important}.composed-chart .recharts-cartesian-axis-line,.composed-chart .recharts-cartesian-axis-tick-line{stroke:none!important}.composed-chart .recharts-cartesian-grid line{stroke:var(--muted);stroke-opacity:.15}.composed-chart .recharts-tooltip-cursor{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1px}.composed-chart .recharts-active-dot circle{stroke:var(--surface);stroke-width:2px}.command__backdrop{inset:calc(var(--spacing,.25rem) * 0);z-index:50;height:var(--visual-viewport-height);justify-content:center;align-items:flex-start;width:100%;display:flex;position:fixed}.command__backdrop[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-enter-opacity:0}.command__backdrop[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.1s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-exit-opacity:0}.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]{will-change:opacity}:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.command__backdrop[data-exiting=true],.command__backdrop[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.command__backdrop--transparent{background-color:#0000}.command__backdrop--opaque{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.command__backdrop--opaque{background-color:color-mix(in oklab, var(--color-black,#000) 50%, transparent)}}.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):before,.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):after{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):before,.command__backdrop--opaque:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):after{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}@media (prefers-color-scheme:dark){.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque:before,.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque:after{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque:before,.command__backdrop--opaque:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--opaque:after{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}}.command__backdrop--blur{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.command__backdrop--blur{background-color:color-mix(in oklab, var(--color-black,#000) 50%, transparent)}}.command__backdrop--blur{--tw-backdrop-blur:blur(var(--blur-md,12px));-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,)}.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):before,.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):after{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):before,.command__backdrop--blur:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *):after{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}@media (prefers-color-scheme:dark){.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur:before,.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur:after{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur:before,.command__backdrop--blur:not(:is(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)) .command__backdrop--blur:after{background-color:color-mix(in oklab, var(--color-black,#000) 60%, transparent)}}}.command__container{height:var(--visual-viewport-height);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);pointer-events:none;justify-content:center;align-items:flex-start;padding-top:15vh;display:flex}.command__container[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.2s;--tw-ease:cubic-bezier(.25, .46, .45, .94);--tw-enter-opacity:0;--tw-enter-scale:.95;--tw-enter-translate-y:calc(2*var(--spacing)*-1);transition-duration:.2s;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}.command__container[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:cubic-bezier(.25, .46, .45, .94);--tw-exit-opacity:0;--tw-exit-scale:.95;transition-duration:.1s;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}.command__container[data-exiting=true],.command__container[data-entering=true]{will-change:opacity,transform}:is(.command__container[data-exiting=true],.command__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.command__container[data-exiting=true],.command__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.command__container[data-exiting=true],.command__container[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.command__container[data-exiting=true],.command__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.command__container[data-exiting=true],.command__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.command__container[data-exiting=true],.command__container[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.command__dialog{border-radius:calc(var(--radius) * 2);background-color:var(--overlay);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;pointer-events:auto;interpolate-size:allow-keywords;outline-style:none;flex-direction:column;transition:height .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.command__dialog:is([data-reduce-motion=true],[data-reduce-motion=true] *),.command__dialog:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.command__dialog:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.command__dialog:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.command__dialog:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.command__dialog:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.command__input-group{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border);width:100%;display:flex}@supports (color:color-mix(in lab, red, red)){.command__input-group{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.command__input-group [data-slot=command-input-group-input]{min-width:calc(var(--spacing,.25rem) * 0);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--foreground);--tw-outline-style:none;background-color:#0000;outline-style:none;flex:1}.command__input-group [data-slot=command-input-group-input]::placeholder{color:var(--muted)}.command__input-group [data-slot=command-input-group-input]::-webkit-search-cancel-button{appearance:none}.command__input-group [data-slot=command-input-group-input]::-webkit-search-decoration{appearance:none}.command__input-group:has([data-slot=command-input-group-prefix]) [data-slot=command-input-group-input]{padding-inline-start:calc(var(--spacing,.25rem) * 0)}.command__input-group:has([data-slot=command-input-group-suffix]) [data-slot=command-input-group-input]{padding-inline-end:calc(var(--spacing,.25rem) * 0)}.command__input-group[data-empty=true] [data-slot=command-input-group-clear-button]{pointer-events:none;opacity:0}.command__input-group-clear-button{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);flex-shrink:0;margin-inline-end:calc(var(--spacing,.25rem) * 3)}.command__input-group-clear-button [data-slot=close-button-icon]{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.command__input-group-prefix{color:var(--muted);flex-shrink:0;align-items:center;padding-inline-start:calc(var(--spacing,.25rem) * 4);display:flex}.command__input-group-prefix svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.command__input-group-suffix{color:var(--muted);flex-shrink:0;align-items:center;padding-inline-end:calc(var(--spacing,.25rem) * 4);display:flex}.command__input-group-suffix svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.command__list{overscroll-behavior:contain;padding:calc(var(--spacing,.25rem) * 1.5);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);--tw-outline-style:none;-webkit-overflow-scrolling:touch;outline-style:none;flex:1;overflow-y:auto}.command__item{align-items:center;gap:calc(var(--spacing,.25rem) * 2.5);border-radius:calc(var(--radius) * 1);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--foreground);--tw-outline-style:none;-webkit-user-select:none;user-select:none;cursor:var(--cursor-interactive);outline-style:none;display:flex;position:relative}@media (hover:hover){.command__item:hover,.command__item[data-hovered=true]{background-color:var(--default)}}.command__item[data-focused=true]{background-color:var(--default)}.command__item:active,.command__item[data-pressed=true]{background-color:var(--default-hover)}.command__item[data-disabled=true]{opacity:.5;cursor:default}.command__item svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);flex-shrink:0}.command__item kbd{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);margin-inline-start:auto}.command__group+.command__group{margin-top:calc(var(--spacing,.25rem) * 1)}.command__group-heading{padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted);-webkit-user-select:none;user-select:none}.command__separator{margin-inline:calc(var(--spacing,.25rem) * 3);margin-block:calc(var(--spacing,.25rem) * 1);background-color:var(--separator);height:1px}.command__header{align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding:calc(var(--spacing,.25rem) * 2);padding-bottom:calc(var(--spacing,.25rem) * 0);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}.command__footer{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border);width:100%;display:flex}@supports (color:color-mix(in lab, red, red)){.command__footer{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.command__footer{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.command__footer{background-color:color-mix(in oklab, var(--default) 50%, transparent)}}.command__footer{padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.command__empty{height:100%;padding-block:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);justify-content:center;align-items:center;display:flex}.command__dialog--sm{width:100%;max-width:var(--container-sm,24rem);max-height:min(80vh,300px)}.command__dialog--md{width:100%;max-width:var(--container-lg,32rem);max-height:min(80vh,356px)}.command__dialog--lg{width:100%;max-width:var(--container-xl,36rem);max-height:min(80vh,440px)}.context-menu__trigger{-webkit-touch-callout:none;display:inline-block;position:relative}.context-menu__popover{max-width:48svw;scroll-padding-block:calc(var(--spacing,.25rem) * 1);overscroll-behavior:contain;border-radius:calc(var(--radius) * 3);background-color:var(--overlay);padding:calc(var(--spacing,.25rem) * 0);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);--tw-outline-style:none;outline-style:none;overflow-y:auto}@media (min-width:48rem){.context-menu__popover{min-width:calc(var(--spacing,.25rem) * 55)}}.context-menu__popover{box-shadow:var(--shadow-overlay)}.context-menu__popover:focus-visible:not(:focus),.context-menu__popover[data-focus-visible=true]{--tw-outline-style:none;outline-style:none}.context-menu__popover[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.15s;--tw-ease:ease;--tw-enter-opacity:0;--tw-enter-scale:.9;transition-duration:.15s;transition-timing-function:ease}.context-menu__popover[data-entering=true][data-placement=top]{--tw-enter-translate-y:calc(1*var(--spacing))}.context-menu__popover[data-entering=true][data-placement=bottom]{--tw-enter-translate-y:calc(1*var(--spacing)*-1)}.context-menu__popover[data-entering=true][data-placement=left]{--tw-enter-translate-x:calc(1*var(--spacing))}.context-menu__popover[data-entering=true][data-placement=right]{--tw-enter-translate-x:calc(1*var(--spacing)*-1)}.context-menu__popover[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:ease;--tw-exit-scale:.95;--tw-exit-opacity:0;transition-duration:.1s;transition-timing-function:ease}.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]{will-change:opacity,transform}:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.context-menu__popover[data-exiting=true],.context-menu__popover[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.context-menu__popover [data-slot=context-menu-menu]{padding:calc(var(--spacing,.25rem) * 1.5);--tw-outline-style:none;outline-style:none}.context-menu__popover [data-slot=context-menu-separator]{width:94%;margin-left:3%}.context-menu__menu{gap:calc(var(--spacing,.25rem) * .5);width:100%;padding:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex;position:relative;overflow:clip}.context-menu__separator{margin-block:calc(var(--spacing,.25rem) * 1);background-color:var(--separator);width:100%;height:1px}.data-grid{--data-grid-selection-column-width:40px;--data-grid-drag-handle-column-width:32px;--data-grid-tree-toggle-size:24px;--data-grid-tree-gap:4px;width:100%;position:relative}.data-grid__selection-column{width:var(--data-grid-selection-column-width);padding-inline-end:calc(var(--spacing,.25rem) * 0)}.data-grid__selection-column:after{content:none}.data-grid__selection-cell{width:var(--data-grid-selection-column-width);padding-inline-end:calc(var(--spacing,.25rem) * 0)}.data-grid__drag-handle-column{width:var(--data-grid-drag-handle-column-width);padding-inline:calc(var(--spacing,.25rem) * 0)}.data-grid__drag-handle-column:after{content:none}.data-grid__drag-handle-cell{width:var(--data-grid-drag-handle-column-width);padding-inline:calc(var(--spacing,.25rem) * 0)}.data-grid__drag-handle{cursor:grab;width:100%;height:100%;padding:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;--tw-border-style:none;--tw-leading:1;color:var(--muted);background-color:#0000;border-style:none;outline-style:none;justify-content:center;align-items:center;line-height:1;display:flex}.data-grid__drag-handle svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.data-grid__drag-handle:focus-visible:not(:focus),.data-grid__drag-handle[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}@media (hover:hover){.data-grid__drag-handle:hover,.data-grid__drag-handle[data-hovered=true]{color:var(--foreground)}}.data-grid__drag-handle:active,.data-grid__drag-handle[data-pressed=true]{cursor:grabbing}.data-grid .react-aria-DropIndicator{--tw-outline-style:none;outline-style:none}.data-grid .react-aria-DropIndicator td{padding:calc(var(--spacing,.25rem) * 0);height:2px}.data-grid .react-aria-DropIndicator[data-drop-target] td{background-color:var(--accent)}[data-slot=data-grid] .table__row[data-dragging=true]{opacity:.5}.data-grid__sort-icon{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.1s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.1s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));flex-shrink:0;display:inline-flex}.data-grid__sort-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *),.data-grid__sort-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.data-grid__sort-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.data-grid__sort-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.data-grid__sort-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.data-grid__sort-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.data-grid__sort-icon[data-direction=descending]{rotate:180deg}.data-grid__empty-state{padding-block:calc(var(--spacing,.25rem) * 12);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);justify-content:center;align-items:center;display:flex}[data-slot=data-grid][data-vertical-align=top] .table__cell{vertical-align:top}[data-slot=data-grid][data-vertical-align=middle] .table__cell{vertical-align:middle}[data-slot=data-grid][data-vertical-align=bottom] .table__cell{vertical-align:bottom}[data-slot=data-grid][data-vertical-align=top] .table__body:not(tbody) [data-slot=table-cell]{align-items:flex-start;display:flex}[data-slot=data-grid][data-vertical-align=middle] .table__body:not(tbody) [data-slot=table-cell]{align-items:center;display:flex}[data-slot=data-grid][data-vertical-align=bottom] .table__body:not(tbody) [data-slot=table-cell]{align-items:flex-end;display:flex}[data-slot=data-grid] [data-align=end]{text-align:end}[data-slot=data-grid] [data-align=center]{text-align:center}[data-slot=data-grid] [data-pinned]{z-index:2;position:sticky}[data-slot=data-grid] .table__column[data-pinned],[data-slot=data-grid] .data-grid__selection-column[data-pinned],[data-slot=data-grid] .data-grid__drag-handle-column[data-pinned]{background-color:var(--surface-secondary)}[data-slot=data-grid] .table__cell[data-pinned],[data-slot=data-grid] .data-grid__selection-cell[data-pinned],[data-slot=data-grid] .data-grid__drag-handle-cell[data-pinned]{background-color:var(--surface)}[data-slot=data-grid] [data-pinned]:after{content:none}@media (hover:hover){[data-slot=data-grid] .table__row:hover [data-pinned].table__cell,[data-slot=data-grid] .table__row[data-hovered=true] [data-pinned].table__cell{background-color:var(--color-surface)}@supports (color:color-mix(in lab, red, red)){[data-slot=data-grid] .table__row:hover [data-pinned].table__cell,[data-slot=data-grid] .table__row[data-hovered=true] [data-pinned].table__cell{background-color:color-mix(in oklch, var(--color-surface) 40%, var(--color-surface-secondary))}}}[data-slot=data-grid] .table__row[data-selected=true] [data-pinned].table__cell{background-color:var(--color-surface)}@supports (color:color-mix(in lab, red, red)){[data-slot=data-grid] .table__row[data-selected=true] [data-pinned].table__cell{background-color:color-mix(in oklch, var(--color-surface) 10%, var(--color-surface-secondary))}}[data-slot=data-grid][data-pinned-start-detached] [data-pinned=start][data-pinned-edge]:after{content:"";pointer-events:none;inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);--tw-translate-y:calc(var(--spacing,.25rem) * 0);width:1px;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);background:var(--color-separator);position:absolute}[data-slot=data-grid][data-pinned-end-detached] [data-pinned=end][data-pinned-edge]:after{content:"";pointer-events:none;inset-inline-start:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);--tw-translate-y:calc(var(--spacing,.25rem) * 0);width:1px;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);background:var(--color-separator);position:absolute}[data-slot=data-grid][data-pinned-start-detached] .table__body tr:first-child td:first-child[data-pinned=start][data-pinned-edge],[data-slot=data-grid][data-pinned-start-detached] .table__body tr:last-child td:first-child[data-pinned=start][data-pinned-edge],[data-slot=data-grid][data-pinned-end-detached] .table__body tr:first-child td:last-child[data-pinned=end][data-pinned-edge],[data-slot=data-grid][data-pinned-end-detached] .table__body tr:last-child td:last-child[data-pinned=end][data-pinned-edge]{border-radius:0}.table-root--secondary [data-pinned].table__cell{background-color:var(--background)}.table-root--secondary .table__column[data-pinned]{background-color:var(--surface-secondary)}.data-grid__tree-cell{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:var(--data-grid-tree-gap);display:flex}.data-grid__tree-toggle{width:var(--data-grid-tree-toggle-size);height:var(--data-grid-tree-toggle-size);flex-shrink:0}.data-grid__tree-toggle-icon{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1))}.data-grid__tree-toggle-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *),.data-grid__tree-toggle-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.data-grid__tree-toggle-icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.data-grid__tree-toggle-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.data-grid__tree-toggle-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.data-grid__tree-toggle-icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.data-grid__tree-toggle-icon[data-expanded]{rotate:90deg}.data-grid__tree-toggle-icon:dir(rtl):not([data-expanded]){rotate:180deg}.data-grid__tree-toggle-spacer{width:var(--data-grid-tree-toggle-size);height:var(--data-grid-tree-toggle-size);flex-shrink:0;display:inline-block}.table__row:last-child .table__cell{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.drop-zone{gap:calc(var(--spacing,.25rem) * 3);--drop-zone-border-style:dashed;flex-direction:column;display:flex}.drop-zone__area{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 8);text-align:center;--tw-outline-style:none;border-width:1px;border-style:var(--drop-zone-border-style);border-color:var(--color-border-secondary);forced-color-adjust:none;outline-style:none;flex-direction:column;transition:background-color .15s,border-color .15s;display:flex}.drop-zone__area:is([data-reduce-motion=true],[data-reduce-motion=true] *),.drop-zone__area:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.drop-zone__area:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.drop-zone__area:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.drop-zone__area:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.drop-zone__area:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.drop-zone__area[data-drop-target]{background-color:var(--accent-soft);border-color:var(--color-accent)}.drop-zone__area[data-focus-visible]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.drop-zone__area[data-disabled]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.drop-zone__icon{color:var(--muted);justify-content:center;align-items:center;display:flex}.drop-zone__icon svg{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.drop-zone__label{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground)}.drop-zone__description{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.drop-zone__trigger{isolation:isolate;margin-top:calc(var(--spacing,.25rem) * 1);height:calc(var(--spacing,.25rem) * 10);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 3);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;--tw-outline-style:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-width:1px;outline-style:none;display:inline-flex;position:relative}@media (min-width:48rem){.drop-zone__trigger{height:calc(var(--spacing,.25rem) * 9)}}.drop-zone__trigger{border-color:var(--border);cursor:var(--cursor-interactive);--button-bg:transparent;--button-bg-hover:var(--color-default)}@supports (color:color-mix(in lab, red, red)){.drop-zone__trigger{--button-bg-hover:color-mix(in srgb, var(--color-default) 60%, transparent)}}.drop-zone__trigger{--button-bg-pressed:var(--color-default);--button-fg:var(--color-default-foreground);background-color:var(--button-bg);color:var(--button-fg);transition:transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.drop-zone__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.drop-zone__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.drop-zone__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.drop-zone__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.drop-zone__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.drop-zone__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}@media (hover:hover){.drop-zone__trigger:hover,.drop-zone__trigger[data-hovered=true]{background-color:var(--button-bg-hover)}}.drop-zone__trigger:active,.drop-zone__trigger[data-pressed=true]{background-color:var(--button-bg-pressed);transform:scale(.97)}.drop-zone__trigger:focus-visible:not(:focus),.drop-zone__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.drop-zone__trigger:disabled,.drop-zone__trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.drop-zone__trigger[data-pending=true]{pointer-events:none}.drop-zone__trigger svg:not([data-slot=spinner] svg){pointer-events:none;margin-inline:calc(var(--spacing,.25rem) * -.5);margin-block:calc(var(--spacing,.25rem) * .5);width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);flex-shrink:0;align-self:center}@media (min-width:40rem){.drop-zone__trigger svg:not([data-slot=spinner] svg){margin-block:calc(var(--spacing,.25rem) * 1);width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}}.drop-zone__input{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.drop-zone__file-list{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.drop-zone__file-item{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 3);border-width:1px;border-color:var(--color-border);transition:border-color .15s;display:flex;position:relative}.drop-zone__file-item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.drop-zone__file-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.drop-zone__file-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.drop-zone__file-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.drop-zone__file-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.drop-zone__file-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.drop-zone__file-item[data-status=failed]{border-color:var(--danger)}@supports (color:color-mix(in lab, red, red)){.drop-zone__file-item[data-status=failed]{border-color:color-mix(in oklab, var(--danger) 30%, transparent)}}.drop-zone__file-format-icon{flex-shrink:0;width:32px;height:40px;position:relative}.drop-zone__file-format-icon-badge{bottom:calc(var(--spacing,.25rem) * 1);left:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 3.5);padding-inline:3px;padding-block:calc(var(--spacing,.25rem) * .5);--tw-leading:1;--tw-font-weight:var(--font-weight-bold,700);font-size:8px;line-height:1;font-weight:var(--font-weight-bold,700);text-transform:uppercase;color:#fff;white-space:nowrap;border-radius:.25rem;align-items:center;max-width:32px;display:flex;position:absolute;overflow:hidden}.drop-zone__file-format-icon-badge[data-color=red]{background-color:var(--color-red-500,oklch(63.7% .237 25.331))}.drop-zone__file-format-icon-badge[data-color=green]{background-color:var(--color-green-500,oklch(72.3% .219 149.579))}.drop-zone__file-format-icon-badge[data-color=blue]{background-color:var(--color-blue-500,oklch(62.3% .214 259.815))}.drop-zone__file-format-icon-badge[data-color=orange]{background-color:var(--color-orange-500,oklch(70.5% .213 47.604))}.drop-zone__file-format-icon-badge[data-color=purple]{background-color:var(--color-purple-500,oklch(62.7% .265 303.9))}.drop-zone__file-format-icon-badge[data-color=gray]{background-color:var(--color-gray-500,oklch(55.1% .027 264.364))}.drop-zone__file-info{min-width:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;flex:1;display:flex}.drop-zone__file-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);overflow:hidden}.drop-zone__file-meta{align-items:center;gap:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);display:flex}.drop-zone__file-progress{margin-top:calc(var(--spacing,.25rem) * 1);width:100%}.drop-zone__file-item[data-status=complete] .drop-zone__file-progress .progress-bar__fill{--progress-bar-fill:var(--success)}.drop-zone__file-item[data-status=failed] .drop-zone__file-progress .progress-bar__fill{--progress-bar-fill:var(--danger)}.drop-zone__file-retry-trigger{margin-top:calc(var(--spacing,.25rem) * .5);cursor:pointer;padding:calc(var(--spacing,.25rem) * 0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--danger);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);background-color:#0000;outline-style:none}@media (hover:hover){.drop-zone__file-retry-trigger:hover,.drop-zone__file-retry-trigger[data-hovered=true]{text-decoration:underline}}.drop-zone__file-retry-trigger:focus-visible:not(:focus),.drop-zone__file-retry-trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.drop-zone__file-remove-trigger{border-radius:calc(var(--radius) * .75);padding:calc(var(--spacing,.25rem) * 1);color:var(--muted);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s;display:flex}.drop-zone__file-remove-trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.drop-zone__file-remove-trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.drop-zone__file-remove-trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.drop-zone__file-remove-trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.drop-zone__file-remove-trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.drop-zone__file-remove-trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.drop-zone__file-remove-trigger svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}@media (hover:hover){.drop-zone__file-remove-trigger:hover,.drop-zone__file-remove-trigger[data-hovered=true]{color:var(--foreground)}}.drop-zone__file-remove-trigger:active,.drop-zone__file-remove-trigger[data-pressed=true]{color:var(--foreground)}.drop-zone__file-remove-trigger:focus-visible:not(:focus),.drop-zone__file-remove-trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.drop-zone__file-remove-trigger:disabled,.drop-zone__file-remove-trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.emoji-picker__trigger{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);outline-style:none}.emoji-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.emoji-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.emoji-picker__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.emoji-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.emoji-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.emoji-picker__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.emoji-picker__trigger{cursor:var(--cursor-interactive)}.emoji-picker__trigger:focus-visible:not(:focus),.emoji-picker__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.emoji-picker__trigger:disabled,.emoji-picker__trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.emoji-picker__trigger:active,.emoji-picker__trigger[data-pressed=true]{transform:scale(.97)}.emoji-picker__value{--tw-leading:1;line-height:1}.emoji-picker__popover{border-radius:calc(var(--radius) * 2);background-color:var(--overlay);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;box-sizing:border-box;outline-style:none;flex-direction:column;display:flex;overflow:hidden}.emoji-picker__popover[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-enter-opacity:0;--tw-enter-scale:.95}.emoji-picker__popover[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.1s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-exit-opacity:0;--tw-exit-scale:.95}.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]{will-change:opacity,transform}:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.emoji-picker__popover[data-entering=true],.emoji-picker__popover[data-exiting=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.emoji-picker__popover--sm{width:240px;height:280px}.emoji-picker__popover--md{width:280px;height:350px}.emoji-picker__popover--lg{width:320px;height:420px}.emoji-picker__content{gap:calc(var(--spacing,.25rem) * 1.5);padding:calc(var(--spacing,.25rem) * 2);flex-direction:column;flex:1;display:flex;overflow:hidden}.emoji-picker__grid{padding-top:calc(var(--spacing,.25rem) * 1);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);--tw-outline-style:none;-webkit-overflow-scrolling:touch;outline-style:none;flex:1;scroll-padding:4px;overflow:auto}.emoji-picker__grid:has(~[data-slot=emoji-picker-footer]){padding-bottom:calc(var(--spacing,.25rem) * 10)}.emoji-picker__item{border-radius:calc(var(--radius) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;display:flex}@media (hover:hover){.emoji-picker__item:hover,.emoji-picker__item[data-hovered=true]{background-color:var(--default)}}.emoji-picker__item[data-focused=true]{background-color:var(--default)}.emoji-picker__item[data-pressed=true]{background-color:var(--default-hover)}.emoji-picker__item:focus-visible:not(:focus),.emoji-picker__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.emoji-picker__item[data-selected=true]{background-color:var(--default-hover)}.emoji-picker__item:disabled,.emoji-picker__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.emoji-picker__item--sm{font-size:20px}.emoji-picker__item--md{font-size:24px}.emoji-picker__item--lg{font-size:28px}.emoji-picker__footer{inset-inline:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border);width:100%;display:flex;position:absolute}@supports (color:color-mix(in lab, red, red)){.emoji-picker__footer{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.emoji-picker__footer{background-color:var(--surface);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.emoji-picker__empty{height:100%;padding-block:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);flex:1;justify-content:center;align-items:center;display:flex}.emoji-picker__skin-tone-options{align-items:center;gap:calc(var(--spacing,.25rem) * .5);padding:calc(var(--spacing,.25rem) * 1);display:flex}.emoji-picker__skin-tone-picker{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);border-radius:calc(var(--radius) * .75);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));--tw-leading:1;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:flex}@media (hover:hover){.emoji-picker__skin-tone-picker:hover,.emoji-picker__skin-tone-picker[data-hovered=true]{background-color:var(--default)}}.emoji-picker__skin-tone-picker:focus-visible:not(:focus),.emoji-picker__skin-tone-picker[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.emoji-picker__skin-tone-picker:disabled,.emoji-picker__skin-tone-picker[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.emoji-picker__skin-tone-option{border-radius:calc(var(--radius) * 2);padding:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-leading:1;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;line-height:1;display:flex}@media (hover:hover){.emoji-picker__skin-tone-option:hover,.emoji-picker__skin-tone-option[data-hovered=true]{background-color:var(--default)}}.emoji-picker__skin-tone-option:focus-visible:not(:focus),.emoji-picker__skin-tone-option[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.emoji-picker__skin-tone-option[data-selected=true]{background-color:var(--default-hover)}.emoji-picker__skin-tone-option:disabled,.emoji-picker__skin-tone-option[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.empty-state{text-align:center;flex-direction:column;align-items:center;display:flex}.empty-state--sm{gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 6)}.empty-state--md{gap:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 8)}.empty-state--lg{gap:calc(var(--spacing,.25rem) * 5);padding-inline:calc(var(--spacing,.25rem) * 8);padding-block:calc(var(--spacing,.25rem) * 12)}.empty-state__header{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.empty-state__media{color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.empty-state__media[data-variant=icon]{background-color:var(--default);color:var(--foreground);border-radius:3.40282e38px}.empty-state--sm .empty-state__media[data-variant=icon]{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.empty-state--sm .empty-state__media[data-variant=icon] svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.empty-state--md .empty-state__media[data-variant=icon]{width:calc(var(--spacing,.25rem) * 12);height:calc(var(--spacing,.25rem) * 12)}.empty-state--md .empty-state__media[data-variant=icon] svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.empty-state--lg .empty-state__media[data-variant=icon]{width:calc(var(--spacing,.25rem) * 14);height:calc(var(--spacing,.25rem) * 14)}.empty-state--lg .empty-state__media[data-variant=icon] svg{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.empty-state__title{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.empty-state--sm .empty-state__title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.empty-state--md .empty-state__title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.empty-state--lg .empty-state__title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}.empty-state__description{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted)}.empty-state--sm .empty-state__description{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.empty-state__content{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.emoji-reaction-button{align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);border-style:var(--tw-border-style);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--default);-webkit-user-select:none;user-select:none;transition:transform .2s var(--ease-smooth), background-color .1s var(--ease-out), border-color .1s var(--ease-out), box-shadow .1s var(--ease-out);transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);border-width:1px;border-color:#0000;border-radius:3.40282e38px;outline-style:none;display:inline-flex}.emoji-reaction-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.emoji-reaction-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.emoji-reaction-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.emoji-reaction-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.emoji-reaction-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.emoji-reaction-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.emoji-reaction-button{cursor:var(--cursor-interactive)}.emoji-reaction-button[data-selected=true]{border-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.emoji-reaction-button[data-selected=true]{border-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.emoji-reaction-button[data-selected=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.emoji-reaction-button[data-selected=true]{background-color:color-mix(in oklab, var(--accent) 10%, transparent)}}@media (hover:hover){.emoji-reaction-button:hover,.emoji-reaction-button[data-hovered=true]{background-color:var(--default)}.emoji-reaction-button[data-selected=true]:hover,.emoji-reaction-button[data-selected=true][data-hovered=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.emoji-reaction-button[data-selected=true]:hover,.emoji-reaction-button[data-selected=true][data-hovered=true]{background-color:color-mix(in oklab, var(--accent) 15%, transparent)}}}.emoji-reaction-button:focus-visible:not(:focus),.emoji-reaction-button[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.emoji-reaction-button:active,.emoji-reaction-button[data-pressed=true]{transform:scale(.95)}.emoji-reaction-button[data-readonly=true]{pointer-events:none;cursor:default}.emoji-reaction-button:active[data-readonly=true],.emoji-reaction-button[data-pressed=true][data-readonly=true]{transform:none}.emoji-reaction-button:disabled,.emoji-reaction-button[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.emoji-reaction-button--sm{padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.emoji-reaction-button--md{padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.emoji-reaction-button--lg{padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.emoji-reaction-button__emoji{--tw-leading:1;line-height:1}.emoji-reaction-button__count{--tw-leading:1;--tw-font-weight:var(--font-weight-medium,500);line-height:1;font-weight:var(--font-weight-medium,500);color:var(--muted);--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,)}[data-selected=true]>.emoji-reaction-button__count{color:var(--accent)}.file-tree{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);padding:calc(var(--spacing,.25rem) * 1);--tw-outline-style:none;forced-color-adjust:none;--file-tree-indent:calc(var(--spacing) * 4);--file-tree-item-px:8px;--file-tree-guide-color:currentColor;outline-style:none;flex-direction:column;display:flex;overflow:auto}@supports (color:color-mix(in lab, red, red)){.file-tree{--file-tree-guide-color:color-mix(in srgb, currentColor 10%, transparent)}}.file-tree{--file-tree-chevron-offset:0px}.file-tree:has(.file-tree__drag-handle):not(:has(.file-tree__checkbox)){--file-tree-chevron-offset:22px}.file-tree[data-focus-visible]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.file-tree[data-empty]{padding-block:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);justify-content:center;align-items:center;min-height:100px;font-style:italic;display:flex}.file-tree__item{color:var(--foreground);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-radius:calc(var(--radius) * 1);cursor:var(--cursor-interactive);outline-style:none;align-items:center;display:flex;position:relative}@media (hover:hover){.file-tree__item:hover:not(:has(.file-tree__chevron:hover)),.file-tree__item[data-hovered=true]:not(:has(.file-tree__chevron:hover)){background-color:var(--default)}}.file-tree__item:active,.file-tree__item[data-pressed=true]{background-color:var(--default-hover)}.file-tree__item:focus-visible:not(:focus),.file-tree__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.file-tree__item:disabled,.file-tree__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.file-tree__item[data-selected=true]{background-color:var(--default)}.file-tree__item[data-selected=true]:has(+[data-selected=true]){border-bottom-right-radius:0;border-bottom-left-radius:0}.file-tree__item[data-selected=true]+[data-selected=true]{border-top-left-radius:0;border-top-right-radius:0}.file-tree__guide-line{pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--file-tree-guide-color);width:1px;position:absolute;inset-block:0}.file-tree__guide-line--hover{opacity:0;transition:opacity .15s}.file-tree:hover .file-tree__guide-line--hover{opacity:1}.file-tree__guide-line--none{display:none}.file-tree__item-content{align-items:center;gap:calc(var(--spacing,.25rem) * .5);width:100%;padding-inline-start:calc((var(--tree-item-level) - 1) * var(--file-tree-indent));display:flex}.file-tree__checkbox{flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-tree__chevron{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);border-radius:calc(var(--radius) * .75);visibility:hidden;outline-style:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-tree__item[data-has-child-items] .file-tree__chevron{visibility:visible;cursor:var(--cursor-interactive)}@media (hover:hover){.file-tree__item[data-has-child-items] .file-tree__chevron:hover{background-color:var(--default-hover)}}.file-tree__indicator{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5);color:var(--muted);transition:rotate .15s;rotate:0deg}.file-tree__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.file-tree__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.file-tree__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){.file-tree__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.file-tree__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.file-tree__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.file-tree__indicator:dir(rtl){rotate:180deg}.file-tree__item[data-expanded] .file-tree__indicator{rotate:90deg}.file-tree__icon{color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-tree__icon svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.file-tree__label{text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing,.25rem) * .5);color:var(--foreground);-webkit-user-select:none;user-select:none;flex:1;overflow:hidden}.file-tree__section:not(:first-child){margin-top:calc(var(--spacing,.25rem) * 3)}.file-tree__section-header{padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted);-webkit-user-select:none;user-select:none}.file-tree__drag-handle{color:var(--muted);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);opacity:0;cursor:grab;outline-style:none;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.file-tree__drag-handle svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.file-tree__drag-handle:active{cursor:grabbing}@media (hover:hover){.file-tree__item:hover .file-tree__drag-handle{opacity:.4}.file-tree__item .file-tree__drag-handle:hover{opacity:.7}}.file-tree__item[data-dragging]{opacity:.4}.file-tree__item[data-drop-target]{background-color:var(--accent-soft);outline:2px solid var(--color-accent);outline-offset:-2px}.file-tree .react-aria-DropIndicator{--tw-outline-style:none;outline-style:none}.file-tree .react-aria-DropIndicator[data-drop-target]{outline:1px solid var(--color-accent)}.file-tree--sm{--file-tree-indent:calc(var(--spacing) * 2.5);--file-tree-item-px:10px}.file-tree__item--sm{padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.file-tree__item--sm .file-tree__icon svg{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.file-tree--md{--file-tree-indent:calc(var(--spacing) * 3);--file-tree-item-px:12px}.file-tree__item--md{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.file-tree__item--md .file-tree__icon svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.file-tree--lg{--file-tree-indent:calc(var(--spacing) * 6);--file-tree-item-px:8px}.file-tree__item--lg{padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.file-tree__item--lg .file-tree__icon svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.floating-toc__trigger{padding:calc(var(--spacing,.25rem) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);--floating-toc-bar-width:16px;--floating-toc-bar-active-width:24px;--floating-toc-bar-height:2px;--floating-toc-bar-active-height:2px;--floating-toc-bar-level-step:3px;--floating-toc-bar-gap:12px;align-items:flex-end;gap:var(--floating-toc-bar-gap);outline-style:none;flex-direction:column;display:inline-flex}.floating-toc__trigger[data-placement=left]{align-items:flex-start}.floating-toc__trigger:focus-visible:not(:focus),.floating-toc__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.floating-toc__bar{width:var(--floating-toc-bar-active-width);height:var(--floating-toc-bar-active-height);justify-content:flex-end;align-items:center;display:flex}[data-placement=left]>.floating-toc__bar{justify-content:flex-start}.floating-toc__bar:after{content:"";border-radius:calc(var(--radius) * .5);background-color:var(--border);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;width:calc(var(--floating-toc-bar-width) - (var(--floating-toc-level,1) - 1) * var(--floating-toc-bar-level-step));height:var(--floating-toc-bar-height);transition-duration:.15s;display:block}.floating-toc__bar[data-active=true]:after{background-color:var(--accent);width:calc(var(--floating-toc-bar-active-width) - (var(--floating-toc-level,1) - 1) * var(--floating-toc-bar-level-step));height:var(--floating-toc-bar-active-height)}.floating-toc__content{border-radius:calc(var(--radius) * 2);background-color:var(--overlay);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;padding:calc(var(--spacing,.25rem) * 1.5);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);overscroll-behavior:contain;--floating-toc-item-indent:.75rem;outline-style:none;max-height:min(60vh,400px);overflow-y:auto}.floating-toc__content[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-enter-opacity:0;--tw-enter-scale:.97}.floating-toc__content[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.1s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-exit-opacity:0;--tw-exit-scale:.97}.floating-toc__content[data-placement=bottom][data-entering=true]{--tw-enter-translate-y:calc(1*var(--spacing)*-1)}.floating-toc__content[data-placement=top][data-entering=true]{--tw-enter-translate-y:calc(1*var(--spacing))}.floating-toc__content[data-placement=left][data-entering=true]{--tw-enter-translate-x:calc(1*var(--spacing))}.floating-toc__content[data-placement=right][data-entering=true]{--tw-enter-translate-x:calc(1*var(--spacing)*-1)}.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]{will-change:opacity,transform}:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.floating-toc__content[data-exiting=true],.floating-toc__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.floating-toc__item{border-radius:calc(var(--radius) * 1);width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1.5);text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));white-space:nowrap;color:var(--muted);--tw-outline-style:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;align-items:center;padding-inline-start:calc(.75rem + (var(--floating-toc-level,1) - 1) * var(--floating-toc-item-indent));display:flex;position:relative}@media (hover:hover){.floating-toc__item:hover,.floating-toc__item[data-hovered=true]{background-color:var(--default)}}.floating-toc__item[data-focused=true]{background-color:var(--default)}.floating-toc__item:active,.floating-toc__item[data-pressed=true]{background-color:var(--default-hover)}.floating-toc__item:focus-visible:not(:focus),.floating-toc__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.floating-toc__item:disabled,.floating-toc__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.floating-toc__item[data-active=true]{color:var(--accent)}.hover-card__trigger{display:inline-flex}.hover-card__content{border-radius:calc(var(--radius) * 2);background-color:var(--overlay);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;max-width:var(--container-sm,24rem);padding:calc(var(--spacing,.25rem) * 4);outline-style:none}.hover-card__content[data-entering=true]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-enter-opacity:0;--tw-enter-scale:.97}.hover-card__content[data-exiting=true]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);--tw-duration:.1s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.1s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));--tw-exit-opacity:0;--tw-exit-scale:.97}.hover-card__content[data-placement=bottom][data-entering=true]{--tw-enter-translate-y:calc(1*var(--spacing)*-1)}.hover-card__content[data-placement=top][data-entering=true]{--tw-enter-translate-y:calc(1*var(--spacing))}.hover-card__content[data-placement=left][data-entering=true]{--tw-enter-translate-x:calc(1*var(--spacing))}.hover-card__content[data-placement=right][data-entering=true]{--tw-enter-translate-x:calc(1*var(--spacing)*-1)}.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]{will-change:opacity,transform}:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.hover-card__content[data-exiting=true],.hover-card__content[data-entering=true]):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.hover-card__arrow{display:block}.hover-card__arrow svg{fill:var(--overlay)}.hover-card__arrow[data-placement=bottom] svg{rotate:180deg}.hover-card__arrow[data-placement=left] svg{rotate:-90deg}.hover-card__arrow[data-placement=right] svg{rotate:90deg}.inline-select{--inline-select-value-max-width:12rem;--inline-select-indicator-size:.75rem;flex-shrink:0}.inline-select .inline-select__trigger{min-height:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * .75);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * .5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.1s;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:#0000;border-width:0;outline-style:none;transition-duration:.1s}.inline-select .inline-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *),.inline-select .inline-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.inline-select .inline-select__trigger:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.inline-select .inline-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.inline-select .inline-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.inline-select .inline-select__trigger:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.inline-select .inline-select__trigger{cursor:var(--cursor-interactive);border-width:0;padding-inline-end:.25rem}@media (hover:hover){.inline-select .inline-select__trigger:hover,.inline-select .inline-select__trigger[data-hovered=true]{color:var(--foreground);background-color:#0000;border-color:#0000}}.inline-select .inline-select__trigger:focus-visible:not(:focus),.inline-select .inline-select__trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;background-color:#0000;border-color:#0000;outline-style:none}.inline-select .inline-select__trigger:disabled,.inline-select .inline-select__trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.inline-select .inline-select__value{text-overflow:ellipsis;white-space:nowrap;max-width:var(--inline-select-value-max-width);overflow:hidden}.inline-select .inline-select__indicator{margin-block:calc(var(--spacing,.25rem) * 0);color:var(--muted);width:var(--inline-select-indicator-size);height:var(--inline-select-indicator-size);position:static}.inline-select .inline-select__indicator[data-open=true]{rotate:0deg}.inline-select .inline-select__popover{min-width:calc(var(--spacing,.25rem) * 48)}.kanban{--ring-offset-width:0px;grid-auto-flow:column;grid-auto-columns:minmax(var(--kanban-column-min-width), 1fr);gap:var(--kanban-column-gap);--kanban-column-min-width:280px;--kanban-column-gap:16px;--kanban-column-height:480px;scroll-snap-type:x var(--tw-scroll-snap-strictness);--tw-scroll-snap-strictness:mandatory;display:grid;overflow-x:auto}.kanban__column{scroll-snap-align:center;gap:calc(var(--spacing,.25rem) * 2);min-width:var(--kanban-column-min-width);flex-direction:column;display:flex}.kanban__column-body{background-color:var(--default);flex-direction:column;flex:1;display:flex}@supports (color:color-mix(in lab, red, red)){.kanban__column-body{background-color:color-mix(in oklab, var(--default) 40%, transparent)}}.kanban__column-body{border-radius:calc(var(--radius-2xl) + var(--radius-sm));min-height:100px}.kanban__column-header{align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 1.5);display:flex}.kanban__column-actions{align-items:center;gap:calc(var(--spacing,.25rem) * .5);opacity:0;flex-shrink:0;margin-inline-start:auto;transition:opacity .15s;display:flex}.kanban__column-actions:is([data-reduce-motion=true],[data-reduce-motion=true] *),.kanban__column-actions:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.kanban__column-actions:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.kanban__column-actions:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.kanban__column-actions:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.kanban__column-actions:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}@media (hover:hover){.kanban__column-header:hover .kanban__column-actions{opacity:1}}.kanban__column-actions:focus-within,.kanban__column-actions:has([aria-expanded=true]),.kanban__column-actions:has([data-open]){opacity:1}.kanban__column-indicator{flex-shrink:0}.kanban__column-indicator:empty{width:calc(var(--spacing,.25rem) * 2.5);height:calc(var(--spacing,.25rem) * 2.5);background-color:var(--default);border-radius:3.40282e38px}.kanban__column-indicator:not(:empty){color:var(--muted);justify-content:center;align-items:center;display:flex}.kanban__column-indicator:not(:empty) svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.kanban__column-title{margin:calc(var(--spacing,.25rem) * 0);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.kanban__column-count{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted)}.kanban__card-list{gap:calc(var(--spacing,.25rem) * 2);min-height:100%;padding:calc(var(--spacing,.25rem) * 2);padding-bottom:calc(var(--spacing,.25rem) * 4);--tw-outline-style:none;outline-style:none;flex-direction:column;flex:1;display:flex}.kanban__card-list[data-focus-visible]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.kanban__card-list[data-empty]{justify-content:center;align-items:center}.kanban__card{border-radius:calc(var(--radius) * 1.5);--tw-outline-style:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;transition:opacity .2s;position:relative}.kanban__card:is([data-reduce-motion=true],[data-reduce-motion=true] *),.kanban__card:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.kanban__card:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.kanban__card:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.kanban__card:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.kanban__card:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.kanban__card[data-focused=true]:not([data-focus-visible=true]){--tw-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000}.kanban__card:focus-visible:not(:focus),.kanban__card[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;--tw-ring-color:var(--color-separator);outline-style:none}.kanban__card:disabled,.kanban__card[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.kanban__card[data-dragging]{opacity:.5}.kanban__card-content{border-radius:calc(var(--radius) * 1.5);background-color:var(--overlay);flex-direction:column;transition:box-shadow .15s;display:flex;overflow:hidden}.kanban__card-content:is([data-reduce-motion=true],[data-reduce-motion=true] *),.kanban__card-content:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.kanban__card-content:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.kanban__card-content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.kanban__card-content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.kanban__card-content:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}@media (hover:hover){.kanban__card:hover>.kanban__card-content,.kanban__card[data-hovered=true]>.kanban__card-content{--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)}}.kanban__card[data-selected=true]>.kanban__card-content{background-color:var(--accent-soft)}.kanban__scroll-shadow{margin-bottom:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 1.5);flex-direction:column;flex:1;display:flex}.kanban__card-list .react-aria-DropIndicator{--tw-outline-style:none;outline-style:none}.kanban__card-list .react-aria-DropIndicator[data-drop-target]{outline:1px solid var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.kanban__card-list .react-aria-DropIndicator[data-drop-target]{outline:1px solid color-mix(in srgb, var(--color-accent) 40%, transparent)}}.kanban__card-list .react-aria-DropIndicator[data-drop-target]{border-radius:1px}.kanban__drop-indicator{--tw-outline-style:none;outline-style:none}.kanban__drop-indicator[data-drop-target]{border-radius:calc(var(--radius) * 1.5);border-style:var(--tw-border-style);border-width:1px;border-color:var(--separator);height:var(--kanban-drop-height,2.5rem);flex-shrink:0;transition:height .15s ease-out}.kanban__drop-indicator[data-drop-target]:is([data-reduce-motion=true],[data-reduce-motion=true] *),.kanban__drop-indicator[data-drop-target]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.kanban__drop-indicator[data-drop-target]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.kanban__drop-indicator[data-drop-target]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.kanban__drag-handle{padding:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;--tw-border-style:none;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));--tw-leading:1;color:var(--muted);clip-path:inset(50%);white-space:nowrap;background-color:#0000;border-style:none;border-width:0;outline-style:none;flex-shrink:0;justify-content:center;align-items:center;width:1px;height:1px;margin:-1px;padding:0;line-height:1;display:flex;position:absolute;overflow:hidden}.kanban__drag-handle:focus,.kanban__drag-handle:focus-visible,.kanban__drag-handle[data-focus-visible=true]{clip-path:none;white-space:normal;--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);width:auto;height:auto;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none;margin:0;padding:0;position:static;overflow:visible}.kanban__card[data-focus-visible=true] .kanban__drag-handle{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.kanban__empty{padding-block:calc(var(--spacing,.25rem) * 8);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted);justify-content:center;align-items:center;display:flex}.kanban--sm{--kanban-column-min-width:240px;--kanban-column-gap:12px}.kanban__card-content--sm{gap:calc(var(--spacing,.25rem) * 1.5);padding:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.kanban--md{--kanban-column-min-width:280px;--kanban-column-gap:16px}.kanban__card-content--md{gap:calc(var(--spacing,.25rem) * 2);padding:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.kanban--lg{--kanban-column-min-width:320px;--kanban-column-gap:20px}.kanban__card-content--lg{gap:calc(var(--spacing,.25rem) * 3);padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.kpi{border-radius:calc(var(--radius) * 2);padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex;position:relative}.kpi__header{margin-bottom:calc(var(--spacing,.25rem) * 1);align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.kpi__content{align-items:center;column-gap:calc(var(--spacing,.25rem) * 2);flex:1;grid-template-rows:auto;grid-template-columns:1fr auto;display:grid}.kpi__icon{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);border-radius:calc(var(--radius) * 1);flex-shrink:0;justify-content:center;align-items:center;display:flex}.kpi__icon svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.kpi__icon[data-status=success]{background-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.kpi__icon[data-status=success]{background-color:color-mix(in oklab, var(--success) 10%, transparent)}}.kpi__icon[data-status=success]{color:var(--success)}.kpi__icon[data-status=warning]{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.kpi__icon[data-status=warning]{background-color:color-mix(in oklab, var(--warning) 10%, transparent)}}.kpi__icon[data-status=warning]{color:var(--warning)}.kpi__icon[data-status=danger]{background-color:var(--danger)}@supports (color:color-mix(in lab, red, red)){.kpi__icon[data-status=danger]{background-color:color-mix(in oklab, var(--danger) 10%, transparent)}}.kpi__icon[data-status=danger]{color:var(--danger)}.kpi__actions{top:calc(var(--spacing) * 4 - var(--spacing) * 1.5);position:absolute;inset-inline-end:calc(var(--spacing) * 4 - var(--spacing) * 1.5)}.kpi__title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--muted)}.kpi__value{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-tight,-.025em);letter-spacing:var(--tracking-tight,-.025em);color:var(--foreground)}.kpi__trend{flex-shrink:0}.kpi__progress{margin-top:calc(var(--spacing,.25rem) * 1);grid-column:1/-1}.kpi__chart{--kpi-chart-fade:10%;--kpi-chart-mask:linear-gradient(to right, transparent 0%, black var(--kpi-chart-fade), black calc(100% - var(--kpi-chart-fade)), transparent 100%);-webkit-mask-image:var(--kpi-chart-mask);-webkit-mask-image:var(--kpi-chart-mask);mask-image:var(--kpi-chart-mask);overflow:hidden}.kpi__chart[data-has-tooltip]{overflow:visible;-webkit-mask-image:none;mask-image:none}.kpi__chart[data-has-tooltip] .recharts-surface{-webkit-mask-image:var(--kpi-chart-mask);-webkit-mask-image:var(--kpi-chart-mask);mask-image:var(--kpi-chart-mask)}.kpi>.kpi__chart{margin-top:calc(var(--spacing,.25rem) * 2);margin-right:calc(var(--spacing,.25rem) * -4);margin-bottom:calc(var(--spacing,.25rem) * -4);margin-left:calc(var(--spacing,.25rem) * -4);border-bottom-right-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2)}.kpi>.kpi__chart:has(+.kpi__separator,+.kpi__footer){margin-bottom:calc(var(--spacing,.25rem) * 0);border-radius:0}.kpi__separator{margin-right:calc(var(--spacing,.25rem) * -4);margin-left:calc(var(--spacing,.25rem) * -4);width:calc(100% + var(--spacing) * 8)}.kpi__footer{margin-bottom:calc(var(--spacing,.25rem) * -1)}.kpi__separator+.kpi__footer{margin-top:calc(var(--spacing,.25rem) * 0)}.kpi-group{background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);overflow:hidden}.kpi-group--horizontal{border-radius:calc(var(--radius) * 2);flex-direction:row;display:flex}.kpi-group--horizontal>[data-slot=kpi]{border-style:var(--tw-border-style);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-width:0;border-radius:0;flex:1}.kpi-group--vertical{border-radius:calc(var(--radius) * 2);flex-direction:column;display:flex}.kpi-group--vertical>[data-slot=kpi]{border-style:var(--tw-border-style);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-width:0;border-radius:0}.kpi-group__separator{background-color:var(--separator);flex-shrink:0}.kpi-group--horizontal>.kpi-group__separator{margin-block:calc(var(--spacing,.25rem) * 4);align-self:stretch;width:1px}.kpi-group--vertical>.kpi-group__separator{align-self:stretch;height:1px}.line-chart{width:100%}.line-chart .recharts-cartesian-axis-tick-value{font-size:10px;fill:var(--muted)!important}.line-chart .recharts-cartesian-axis-line,.line-chart .recharts-cartesian-axis-tick-line{stroke:none!important}.line-chart .recharts-cartesian-grid line{stroke:var(--muted);stroke-opacity:.15}.line-chart .recharts-tooltip-cursor{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1px}.line-chart .recharts-active-dot circle{stroke:var(--surface);stroke-width:2px}.list-view{min-height:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;outline-style:none;width:100%;position:relative}.list-view--primary{background-color:var(--surface-secondary);padding:calc(var(--spacing,.25rem) * 1);border-radius:calc(var(--radius) * 2.5)}.list-view__item{align-items:center;gap:calc(var(--spacing,.25rem) * 3);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));cursor:var(--cursor-interactive);outline-style:none;display:flex}.list-view__item:focus-visible,.list-view__item[data-focus-visible=true]{--tw-outline-style:none;box-shadow:inset 0 0 0 2px var(--color-focus);outline-style:none}.list-view__item:disabled,.list-view__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.list-view__item[data-dragging=true]{opacity:.5}.list-view--primary .list-view__item{background-color:var(--surface);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator-tertiary)}@supports (color:color-mix(in lab, red, red)){.list-view--primary .list-view__item{border-color:color-mix(in oklab, var(--separator-tertiary) 50%, transparent)}}.list-view--primary .list-view__item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.list-view--primary .list-view__item:hover,.list-view--primary .list-view__item[data-hovered=true]{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.list-view--primary .list-view__item:hover,.list-view--primary .list-view__item[data-hovered=true]{background-color:color-mix(in oklab, var(--surface) 40%, transparent)}}}.list-view--primary .list-view__item[data-selected=true]{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.list-view--primary .list-view__item[data-selected=true]{background-color:color-mix(in oklab, var(--surface) 10%, transparent)}}.list-view--primary:not([data-virtualized]) .list-view__item:first-child{border-top-left-radius:calc(var(--radius) * 2);border-top-right-radius:calc(var(--radius) * 2)}.list-view--primary:not([data-virtualized]) .list-view__item:last-child{border-bottom-right-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2)}.list-view--primary[data-virtualized]{overflow:hidden}.list-view--secondary .list-view__item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--separator-tertiary)}@supports (color:color-mix(in lab, red, red)){.list-view--secondary .list-view__item{border-color:color-mix(in oklab, var(--separator-tertiary) 50%, transparent)}}.list-view--secondary .list-view__item{background-color:#0000}.list-view--secondary .list-view__item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.list-view--secondary .list-view__item:hover,.list-view--secondary .list-view__item[data-hovered=true]{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.list-view--secondary .list-view__item:hover,.list-view--secondary .list-view__item[data-hovered=true]{background-color:color-mix(in oklab, var(--default) 50%, transparent)}}}.list-view--secondary .list-view__item[data-selected=true]{background-color:var(--accent-soft)}@media (hover:hover){.list-view--secondary .list-view__item[data-selected=true]:hover,.list-view--secondary .list-view__item[data-selected=true][data-hovered=true]{background-color:var(--accent-soft-hover)}}.list-view__selection-cell{flex-shrink:0;align-items:center;display:flex}.list-view__item-content{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 3);flex:1;display:flex}.list-view__item-content svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);flex-shrink:0}.list-view__title{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);overflow:hidden}.list-view__description{margin-top:calc(var(--spacing,.25rem) * .5);text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);overflow:hidden}.list-view__item-action{flex-shrink:0;margin-inline-start:auto;padding-inline-start:calc(var(--spacing,.25rem) * 2)}.list-view__empty-state{padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 8);justify-content:center;align-items:center;display:flex}.list-view__load-more{padding-block:calc(var(--spacing,.25rem) * 3);justify-content:center;align-items:center;display:flex}.map{--map-control-size:calc(var(--spacing) * 8);--map-control-offset:calc(var(--spacing) * 2);--map-control-attribution-clearance:calc(var(--spacing) * 12);--map-popup-max-width:248px;--map-marker-color:var(--accent);--map-marker-ring-color:var(--surface);--map-route-color:#4285f4;--map-route-opacity:.8;--map-route-width:3;background-color:var(--default);width:100%;height:100%;position:relative;overflow:hidden}.map.maplibregl-map{-webkit-tap-highlight-color:#0000;font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif}.map .maplibregl-canvas{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;outline-style:none;position:absolute}.map .maplibregl-canvas:focus{--tw-outline-style:none;outline-style:none}.map .maplibregl-canvas-container.maplibregl-interactive{cursor:grab;-webkit-user-select:none;user-select:none}.map .maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}.map .maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.map .maplibregl-canvas-container.maplibregl-touch-drag-pan,.map .maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.map .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.map .maplibregl-marker{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);will-change:transform;transition:opacity .2s;position:absolute}.map .maplibregl-popup{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);pointer-events:none;will-change:transform;display:flex;position:absolute}.map .maplibregl-popup-anchor-top,.map .maplibregl-popup-anchor-top-left,.map .maplibregl-popup-anchor-top-right{flex-direction:column}.map .maplibregl-popup-anchor-bottom,.map .maplibregl-popup-anchor-bottom-left,.map .maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.map .maplibregl-popup-anchor-left{flex-direction:row}.map .maplibregl-popup-anchor-right{flex-direction:row-reverse}.map .maplibregl-popup-content{padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);pointer-events:auto;background-color:#0000;border-radius:0;position:relative}.map .maplibregl-popup-tip{display:none}.map .maplibregl-ctrl-top-left,.map .maplibregl-ctrl-top-right,.map .maplibregl-ctrl-bottom-left,.map .maplibregl-ctrl-bottom-right{z-index:10;pointer-events:none;position:absolute}.map .maplibregl-ctrl-top-left{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0)}.map .maplibregl-ctrl-top-right{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0)}.map .maplibregl-ctrl-bottom-left{bottom:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0)}.map .maplibregl-ctrl-bottom-right{right:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0)}.map .maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.map .maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin-top:calc(var(--spacing,.25rem) * 2.5);margin-left:calc(var(--spacing,.25rem) * 2.5)}.map .maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin-top:calc(var(--spacing,.25rem) * 2.5);margin-right:calc(var(--spacing,.25rem) * 2.5)}.map .maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin-bottom:calc(var(--spacing,.25rem) * 2.5);margin-left:calc(var(--spacing,.25rem) * 2.5)}.map .maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin-right:calc(var(--spacing,.25rem) * 2.5);margin-bottom:calc(var(--spacing,.25rem) * 2.5)}.map .maplibregl-ctrl-attrib{margin:calc(var(--spacing,.25rem) * 0);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 0);border-radius:var(--radius-full);color:oklch(20% 0 0);background-color:oklch(100% 0 0/.82);line-height:20px}.map .maplibregl-ctrl-attrib.maplibregl-compact{box-sizing:content-box;min-height:calc(var(--spacing,.25rem) * 5);padding:2px 28px 2px 8px;position:relative}.map .maplibregl-ctrl-attrib-button{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0);width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 0);color:oklch(8% 0 0);background-color:#0000;border-width:0;justify-content:center;align-items:center;display:flex;position:absolute}.map .maplibregl-ctrl-attrib-button:before{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:oklch(100% 0 0);content:"i";background-color:oklch(8% 0 0);border-radius:3.40282e38px;justify-content:center;align-items:center;font-family:ui-sans-serif,system-ui,sans-serif;display:flex}.map .maplibregl-ctrl-attrib-button:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.map .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{appearance:none;list-style:none}.map .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.map .maplibregl-ctrl-attrib-inner{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:inline-flex}.map .maplibregl-ctrl-attrib a{color:inherit;text-decoration:none}.map .maplibregl-ctrl-attrib a:hover{text-decoration:underline}.map .maplibregl-attrib-empty{display:none}.map__loader{inset:calc(var(--spacing,.25rem) * 0);z-index:10;--tw-backdrop-blur:blur(var(--blur-xs,4px));-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,);background-color:var(--overlay);justify-content:center;align-items:center;display:flex;position:absolute}@supports (color:color-mix(in lab, red, red)){.map__loader{background-color:color-mix(in oklab, var(--overlay) 50%, transparent)}}.map__loader-spinner{color:var(--muted)}.map__marker{justify-content:center;align-items:center;display:flex}.map__marker-content{cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}.map__default-marker{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);border-style:var(--tw-border-style);background-color:var(--map-marker-color);border-width:2px;border-color:var(--map-marker-ring-color);box-shadow:var(--overlay-shadow);border-radius:3.40282e38px;display:block;position:relative}.map__marker-label{pointer-events:none;--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);--tw-font-weight:var(--font-weight-medium,500);font-size:10px;font-weight:var(--font-weight-medium,500);white-space:nowrap;color:var(--foreground);position:absolute;left:50%}.map__marker-label--top{margin-bottom:calc(var(--spacing,.25rem) * 1);bottom:100%}.map__marker-label--bottom{margin-top:calc(var(--spacing,.25rem) * 1);top:100%}.map__popup-content{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));background-color:var(--overlay);border-radius:min(32px, var(--radius-3xl));box-shadow:var(--overlay-shadow);color:var(--foreground);max-width:var(--map-popup-max-width);position:relative}.map__popup-content[data-close-button=true]{padding-right:calc(var(--spacing) * 10)}.map__popup-close-button{top:calc(var(--spacing,.25rem) * 2);right:calc(var(--spacing,.25rem) * 2);z-index:10;width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);position:absolute}.map__popup-close-button [data-slot=close-button-icon]{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.map__tooltip{pointer-events:none;border-radius:calc(var(--radius) * .75);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));background-color:var(--foreground);box-shadow:var(--overlay-shadow);color:var(--background);max-width:var(--map-popup-max-width)}.map__controls{z-index:10;gap:calc(var(--spacing,.25rem) * 1.5);flex-direction:column;display:flex;position:absolute}.map__controls--top-left{top:var(--map-control-offset);left:var(--map-control-offset)}.map__controls--top-right{top:var(--map-control-offset);right:var(--map-control-offset)}.map__controls--bottom-left{bottom:calc(var(--map-control-offset) + var(--map-control-attribution-clearance));left:var(--map-control-offset)}.map__controls--bottom-right{right:var(--map-control-offset);bottom:calc(var(--map-control-offset) + var(--map-control-attribution-clearance))}.map__control-button{color:var(--foreground)}.map__control-button.button{padding:calc(var(--spacing,.25rem) * 0);width:var(--map-control-size);height:var(--map-control-size);min-width:var(--map-control-size)}.map__control-icon{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.map__control-spinner{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:currentColor}.map__compass-icon{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;transform-style:preserve-3d;transition-duration:.2s}.map__compass-icon [data-needle=north-right]{fill:oklch(63.7% .237 25.331)}.map__compass-icon [data-needle=north-left]{fill:oklch(70.4% .191 22.216)}.map__compass-icon [data-needle=south-right]{fill:var(--muted)}@supports (color:color-mix(in lab, red, red)){.map__compass-icon [data-needle=south-right]{fill:color-mix(in oklch, var(--muted) 70%, transparent)}}.map__compass-icon [data-needle=south-left]{fill:var(--muted)}@supports (color:color-mix(in lab, red, red)){.map__compass-icon [data-needle=south-left]{fill:color-mix(in oklch, var(--muted) 38%, transparent)}}.markdown{width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625);color:var(--foreground)}.markdown p{margin-bottom:calc(var(--spacing,.25rem) * 3)}.markdown p:last-child{margin-bottom:calc(var(--spacing,.25rem) * 0)}.markdown h1,.markdown h2,.markdown h3,.markdown h4{margin-top:calc(var(--spacing,.25rem) * 4);margin-bottom:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}:is(.markdown h1,.markdown h2,.markdown h3,.markdown h4):first-child{margin-top:calc(var(--spacing,.25rem) * 0)}.markdown h1{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}.markdown h2{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}.markdown h3{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.markdown ul,.markdown ol{margin-bottom:calc(var(--spacing,.25rem) * 3);list-style-position:inside}:where(:is(.markdown ul,.markdown ol)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing,.25rem) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing,.25rem) * 1) * calc(1 - var(--tw-space-y-reverse)))}.markdown ul,.markdown ol{padding-inline-start:calc(var(--spacing,.25rem) * 2)}:is(.markdown ul,.markdown ol):last-child{margin-bottom:calc(var(--spacing,.25rem) * 0)}.markdown ul{list-style-type:disc}.markdown ul li::marker{color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.markdown ul li::marker{color:color-mix(in oklab, var(--muted) 40%, transparent)}}.markdown ol{list-style-type:decimal}.markdown li{--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625)}.markdown a{color:var(--link);text-underline-offset:2px;text-decoration-line:underline}.markdown blockquote{margin-block:calc(var(--spacing,.25rem) * 3);border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px;border-color:var(--border);color:var(--muted);padding-inline-start:calc(var(--spacing,.25rem) * 4);font-style:italic}.markdown hr{margin-block:calc(var(--spacing,.25rem) * 4);border-color:var(--border)}.markdown table{margin-bottom:calc(var(--spacing,.25rem) * 3);border-collapse:collapse;width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.markdown th,.markdown td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);text-align:start}.markdown th{background-color:var(--surface-secondary);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.markdown__block{width:100%}.markdown__inline-code{border-radius:calc(var(--radius) * .5);background-color:var(--default);padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * .5);font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);color:var(--foreground);font-size:.875em}@keyframes sd-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sd-blurIn{0%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur()}}@keyframes sd-slideUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.markdown [data-sd-animate]{animation:var(--sd-animation,sd-fadeIn) var(--sd-duration,.15s) var(--sd-easing,ease) var(--sd-delay,0s) both}.native-select{gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:inline-flex}:is(.native-select[data-invalid=true],.native-select[aria-invalid=true]) [data-slot=description]{display:none}.native-select [data-slot=label]{width:fit-content}.native-select [data-slot=description]{padding-inline:calc(var(--spacing,.25rem) * 1)}.native-select__trigger{align-items:center;display:inline-flex;position:relative}.native-select__select{min-height:calc(var(--spacing,.25rem) * 9);appearance:none;border-radius:var(--field-radius,calc(var(--radius) * 1.5));border-style:var(--tw-border-style);background-color:var(--field-background,var(--default));width:100%;padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--field-foreground,var(--foreground));--tw-shadow:var(--field-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);border-width:1px;outline-style:none;display:inline-flex;position:relative}.native-select__select:is([data-reduce-motion=true],[data-reduce-motion=true] *),.native-select__select:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.native-select__select:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.native-select__select:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.native-select__select:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.native-select__select:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.native-select__select{cursor:var(--cursor-interactive);border-width:var(--border-width-field);border-color:var(--color-field-border);padding-inline-end:calc(var(--native-select-indicator-offset,.5rem) + var(--native-select-indicator-size,1rem) + .5rem)}@media (hover:hover){.native-select__select:hover,.native-select__select[data-hovered=true]{background-color:var(--field-hover);border-color:var(--color-field-border-hover)}}.native-select__select:focus-visible:not(:focus),.native-select__select[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;border-color:var(--color-field-border-focus);background-color:var(--color-field-focus);outline-style:none}.native-select__select:focus{border-color:var(--color-field-border-focus);background-color:var(--color-field-focus)}.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select{outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--danger);--tw-outline-style:solid;--tw-ring-offset-width:3px;outline-style:solid}:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select):focus,:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select):focus-visible,:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select)[data-focused=true],:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select)[data-focus-visible=true],:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select):focus-within,:is(.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select)[data-focus-within=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--danger);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-width:0px}.native-select[data-invalid=true] .native-select__select,.native-select[aria-invalid=true] .native-select__select{background-color:var(--color-field-focus)}.native-select__select:disabled,.native-select__select[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.native-select__select:has(option[value=""]:checked){color:var(--field-placeholder,var(--muted))}.native-select__select::-ms-expand{display:none}.native-select__indicator{pointer-events:none;inset-block:calc(var(--spacing,.25rem) * 0);color:var(--field-placeholder,var(--muted));flex-shrink:0;justify-content:center;align-items:center;margin-block:auto;display:flex;position:absolute;inset-inline-end:calc(var(--spacing,.25rem) * 2)}.native-select__indicator svg{--native-select-indicator-size:1rem;width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.native-select--secondary .native-select__select{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--color-default)}@media (hover:hover){.native-select--secondary .native-select__select:hover,.native-select--secondary .native-select__select[data-hovered=true]{background-color:var(--color-default-hover)}}.native-select--secondary .native-select__select:focus-visible:not(:focus),.native-select--secondary .native-select__select[data-focus-visible=true],.native-select--secondary .native-select__select:focus{background-color:var(--color-default)}.native-select--full-width,.native-select__trigger--full-width{width:100%}.navbar{z-index:40;background-color:var(--background);--navbar-height:4rem;--navbar-max-width:1024px;--navbar-transition-duration:.3s;flex-direction:column;width:100%;display:flex;position:relative}.navbar--sticky{top:calc(var(--spacing,.25rem) * 0);position:sticky}.navbar--static{position:static}.navbar--floating{top:calc(var(--spacing,.25rem) * 2);margin-inline:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);position:sticky}.navbar[data-hidden=true]{pointer-events:none}.navbar[data-menu-open=true]{border-bottom-color:#0000}.navbar--static[data-menu-open=true]{position:relative}.navbar__header{align-items:center;gap:calc(var(--spacing,.25rem) * 4);width:100%;padding-inline:calc(var(--spacing,.25rem) * 6);max-width:var(--navbar-max-width);height:var(--navbar-height);margin-inline:auto;display:flex}.navbar__header--max-sm{--navbar-max-width:640px}.navbar__header--max-md{--navbar-max-width:768px}.navbar__header--max-lg{--navbar-max-width:1024px}.navbar__header--max-xl{--navbar-max-width:1280px}.navbar__header--max-2xl{--navbar-max-width:1536px}.navbar__header--max-full{--navbar-max-width:100%}.navbar__header--sm{gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);--navbar-height:3rem}.navbar__header--lg{gap:calc(var(--spacing,.25rem) * 5);padding-inline:calc(var(--spacing,.25rem) * 8);--navbar-height:5rem}.navbar__brand{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-shrink:0;display:flex}.navbar__content{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:flex}.navbar__item{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--muted);cursor:var(--cursor-interactive);outline-style:none;padding:6px 12px;display:flex;position:relative}@media (hover:hover){.navbar__item:hover,.navbar__item[data-hovered=true]{color:var(--foreground)}}.navbar__item:focus-visible:not(:focus),.navbar__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.navbar__item:disabled,.navbar__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.navbar__item:active,.navbar__item[data-pressed=true],.navbar__item[data-current=true]{color:var(--foreground)}.navbar__item>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);flex-shrink:0}.navbar__item--sm{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));padding:4px 8px}.navbar__item--sm>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.navbar__item--lg{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));padding:8px 16px}.navbar__item--lg>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.navbar__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.navbar__spacer{flex:1}.navbar__separator{height:calc(var(--spacing,.25rem) * 6);border-color:var(--separator);align-self:center}.navbar__menu-toggle{border-radius:calc(var(--radius) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;width:calc(var(--spacing,.25rem) * 9);height:calc(var(--spacing,.25rem) * 9);cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;display:flex;position:relative}@media (hover:hover){.navbar__menu-toggle:hover,.navbar__menu-toggle[data-hovered=true]{background-color:var(--default)}}.navbar__menu-toggle:focus-visible:not(:focus),.navbar__menu-toggle[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.navbar__menu-toggle:disabled,.navbar__menu-toggle[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.navbar__menu-toggle:active,.navbar__menu-toggle[data-pressed=true]{background-color:var(--default-hover)}.navbar__menu-toggle--sm{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.navbar__menu-toggle--lg{width:calc(var(--spacing,.25rem) * 11);height:calc(var(--spacing,.25rem) * 11)}.navbar__menu-toggle-icon{pointer-events:none;width:calc(var(--spacing,.25rem) * 6);flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.navbar__menu-toggle-icon:before,.navbar__menu-toggle-icon:after{height:1px;width:calc(var(--spacing,.25rem) * 6);--tw-content:"";content:var(--tw-content);background-color:currentColor;transition:transform .15s;display:block}.navbar__menu-toggle-icon:before{transform:translateY(-4px)rotate(0)}.navbar__menu-toggle-icon:after{transform:translateY(4px)rotate(0)}.navbar__menu-toggle[data-selected=true] .navbar__menu-toggle-icon:before{transform:translateY(.5px)rotate(45deg)}.navbar__menu-toggle[data-selected=true] .navbar__menu-toggle-icon:after{transform:translateY(-.5px)rotate(-45deg)}.navbar__menu-toggle[data-pressed=true] .navbar__menu-toggle-icon{opacity:.7}@media (prefers-reduced-motion:reduce){.navbar__menu-toggle-icon:before,.navbar__menu-toggle-icon:after{transition:none}}.navbar__menu{inset-inline:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 1);background-color:var(--background);padding-inline:calc(var(--spacing,.25rem) * 6);padding-top:calc(var(--spacing,.25rem) * 2);padding-bottom:calc(var(--spacing,.25rem) * 6);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);flex-direction:column;display:flex;position:absolute;top:100%;overflow:hidden auto}.navbar__menu-item{align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);cursor:var(--cursor-interactive);outline-style:none;padding:10px 12px;display:flex}@media (hover:hover){.navbar__menu-item:hover,.navbar__menu-item[data-hovered=true]{background-color:var(--default)}}.navbar__menu-item:focus-visible:not(:focus),.navbar__menu-item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.navbar__menu-item:disabled,.navbar__menu-item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.navbar__menu-item:active,.navbar__menu-item[data-pressed=true]{background-color:var(--default-hover)}.navbar__menu-item[data-current=true]{background-color:var(--default);color:var(--foreground)}.navbar__menu-item>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);flex-shrink:0}.navbar__menu-item--sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));padding:8px 10px}.navbar__menu-item--sm>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.navbar__menu-item--lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding:12px 16px}.navbar__menu-item--lg>[data-slot=icon]{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.number-stepper{flex-shrink:0;display:inline-flex}.number-stepper__group{align-items:center;gap:calc(var(--spacing,.25rem) * 0);border-style:var(--tw-border-style);background-color:var(--default);padding:calc(var(--spacing,.25rem) * 0);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-width:0;border-radius:3.40282e38px;display:inline-flex}.number-stepper__input{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.number-stepper__decrement-button,.number-stepper__increment-button{height:calc(var(--spacing,.25rem) * 9);width:calc(var(--spacing,.25rem) * 9);border-style:var(--tw-border-style);background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-width:0;border-radius:3.40282e38px;outline-style:none;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}@media (min-width:48rem){.number-stepper__decrement-button,.number-stepper__increment-button{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}}.number-stepper__decrement-button,.number-stepper__increment-button{cursor:var(--cursor-interactive);transition:background-color .1s var(--ease-out), box-shadow .1s var(--ease-out), transform .25s var(--ease-smooth);transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}:is(.number-stepper__decrement-button,.number-stepper__increment-button):is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.number-stepper__decrement-button,.number-stepper__increment-button):is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.number-stepper__decrement-button,.number-stepper__increment-button):is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){:is(.number-stepper__decrement-button,.number-stepper__increment-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.number-stepper__decrement-button,.number-stepper__increment-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.number-stepper__decrement-button,.number-stepper__increment-button):not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);flex-shrink:0;transition:color .15s}:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:is([data-reduce-motion=true],[data-reduce-motion=true] *),:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,:is(.number-stepper__decrement-button,.number-stepper__increment-button) svg:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}@media (hover:hover){:is(:is(.number-stepper__decrement-button,.number-stepper__increment-button):hover,:is(.number-stepper__decrement-button,.number-stepper__increment-button)[data-hovered=true]) svg{color:var(--foreground)}}:is(.number-stepper__decrement-button,.number-stepper__increment-button):active,:is(.number-stepper__decrement-button,.number-stepper__increment-button)[data-pressed=true]{transform:scale(.97)}:is(.number-stepper__decrement-button,.number-stepper__increment-button):focus-visible:not(:focus),:is(.number-stepper__decrement-button,.number-stepper__increment-button)[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}:is(.number-stepper__decrement-button,.number-stepper__increment-button):disabled,:is(.number-stepper__decrement-button,.number-stepper__increment-button)[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.number-stepper__value{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;line-height:.85;display:flex}.number-stepper__group--sm{gap:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * .5);border-radius:3.40282e38px}@media (min-width:48rem){.number-stepper__group--sm{padding:calc(var(--spacing,.25rem) * .5)}}.number-stepper__decrement-button--sm,.number-stepper__increment-button--sm{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}@media (min-width:48rem){.number-stepper__decrement-button--sm,.number-stepper__increment-button--sm{height:calc(var(--spacing,.25rem) * 7);width:calc(var(--spacing,.25rem) * 7)}}:is(.number-stepper__decrement-button--sm,.number-stepper__increment-button--sm) svg{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}:is(.number-stepper__decrement-button--sm,.number-stepper__increment-button--sm):active,:is(.number-stepper__decrement-button--sm,.number-stepper__increment-button--sm)[data-pressed=true]{transform:scale(.98)}.number-stepper__value--sm{min-width:calc(var(--spacing,.25rem) * 6);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}@media (min-width:48rem){.number-stepper__value--sm{min-width:calc(var(--spacing,.25rem) * 5)}}.number-stepper__value--sm{height:calc(var(--spacing,.25rem) * 8)}@media (min-width:48rem){.number-stepper__value--sm{height:calc(var(--spacing,.25rem) * 7)}}.number-stepper__group--md{gap:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * .5);border-radius:3.40282e38px}@media (min-width:48rem){.number-stepper__group--md{padding:calc(var(--spacing,.25rem) * .5)}}.number-stepper__decrement-button--md,.number-stepper__increment-button--md{height:calc(var(--spacing,.25rem) * 9);width:calc(var(--spacing,.25rem) * 9)}@media (min-width:48rem){.number-stepper__decrement-button--md,.number-stepper__increment-button--md{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}}:is(.number-stepper__decrement-button--md,.number-stepper__increment-button--md) svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}:is(.number-stepper__decrement-button--md,.number-stepper__increment-button--md):active,:is(.number-stepper__decrement-button--md,.number-stepper__increment-button--md)[data-pressed=true]{transform:scale(.98)}.number-stepper__value--md{min-width:calc(var(--spacing,.25rem) * 7);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (min-width:48rem){.number-stepper__value--md{min-width:calc(var(--spacing,.25rem) * 6)}}.number-stepper__value--md{height:calc(var(--spacing,.25rem) * 9)}@media (min-width:48rem){.number-stepper__value--md{height:calc(var(--spacing,.25rem) * 8)}}.number-stepper__group--lg{gap:calc(var(--spacing,.25rem) * .5);padding:calc(var(--spacing,.25rem) * .5);border-radius:3.40282e38px}@media (min-width:48rem){.number-stepper__group--lg{padding:calc(var(--spacing,.25rem) * .5)}}.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg{height:calc(var(--spacing,.25rem) * 10);width:calc(var(--spacing,.25rem) * 10)}@media (min-width:48rem){.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg{height:calc(var(--spacing,.25rem) * 9);width:calc(var(--spacing,.25rem) * 9)}}:is(.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg) svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}@media (min-width:48rem){:is(.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg) svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}}:is(.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg):active,:is(.number-stepper__decrement-button--lg,.number-stepper__increment-button--lg)[data-pressed=true]{transform:scale(.96)}.number-stepper__value--lg{min-width:calc(var(--spacing,.25rem) * 8);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}@media (min-width:48rem){.number-stepper__value--lg{min-width:calc(var(--spacing,.25rem) * 7)}}.number-stepper__value--lg{height:calc(var(--spacing,.25rem) * 10)}@media (min-width:48rem){.number-stepper__value--lg{height:calc(var(--spacing,.25rem) * 9)}}.pie-chart{width:100%}.pie-chart .recharts-pie-sector path{stroke:none}.pie-chart .recharts-pie-label-text{font-size:11px;fill:var(--muted)!important}.pie-chart .recharts-pie-label-line{stroke:var(--muted);stroke-opacity:.3}.pie-chart .recharts-label{fill:var(--foreground)}.pie-chart .recharts-tooltip-cursor{display:none}.pie-chart .recharts-tooltip-wrapper{z-index:10}.number-value{font-variant-numeric:tabular-nums}.item-card{align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 2);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);display:flex}.item-card--default{background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.item-card--secondary{background-color:var(--surface-secondary)}.item-card--tertiary{background-color:var(--surface-tertiary)}:is(.item-card--secondary,.item-card--tertiary)>[data-slot=item-card-icon]{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){:is(.item-card--secondary,.item-card--tertiary)>[data-slot=item-card-icon]{background-color:color-mix(in oklab, var(--surface) 50%, transparent)}}.item-card--outline{border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);background-color:#0000}.item-card--transparent{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000}.item-card__icon{width:calc(var(--spacing,.25rem) * 9);height:calc(var(--spacing,.25rem) * 9);border-radius:calc(var(--radius) * 1);background-color:var(--default);color:var(--foreground);flex-shrink:0;justify-content:center;align-items:center;display:flex}.item-card__icon svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.item-card__content{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;flex:1;display:flex}.item-card__title{text-overflow:ellipsis;white-space:nowrap;width:fit-content;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);overflow:hidden}.item-card__description{margin-top:calc(var(--spacing,.25rem) * .5);text-overflow:ellipsis;white-space:nowrap;width:fit-content;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);overflow:hidden}.item-card__action{flex-shrink:0;margin-inline-start:auto;padding-inline-start:calc(var(--spacing,.25rem) * 2)}.item-card-group{border-radius:calc(var(--radius) * 2)}.item-card-group>[data-slot=item-card]{border-style:var(--tw-border-style);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000;border-width:0;border-radius:0}.item-card-group--default{background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.item-card-group--secondary{background-color:var(--surface-secondary)}.item-card-group--tertiary{background-color:var(--surface-tertiary)}:is(.item-card-group--secondary,.item-card-group--tertiary) [data-slot=separator]{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){:is(.item-card-group--secondary,.item-card-group--tertiary) [data-slot=separator]{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}:is(.item-card-group--secondary,.item-card-group--tertiary)>[data-slot=item-card]>[data-slot=item-card-icon]{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){:is(.item-card-group--secondary,.item-card-group--tertiary)>[data-slot=item-card]>[data-slot=item-card-icon]{background-color:color-mix(in oklab, var(--surface) 50%, transparent)}}.item-card-group--outline{border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000}.item-card-group--transparent{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000;border-radius:0}.item-card-group__header{padding-inline:calc(var(--spacing,.25rem) * 4);padding-top:calc(var(--spacing,.25rem) * 4);padding-bottom:calc(var(--spacing,.25rem) * 2)}.item-card-group__title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.item-card-group__description{margin-top:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.item-card-group--list{flex-direction:column;display:flex}.item-card-group--grid{--item-card-group-columns:2}.item-card-group--grid .item-card-group__header{padding:calc(var(--spacing,.25rem) * 0)}.item-card-group--grid{gap:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);grid-template-columns:repeat(var(--item-card-group-columns), minmax(0, 1fr));background-color:#0000;display:grid}.item-card-group--grid>[data-slot=item-card-group-header]{grid-column:1/-1}.item-card-group--grid>[data-slot=item-card]{border-radius:calc(var(--radius) * 2);background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}[data-sheet-drawer]{touch-action:none;transition:transform .5s cubic-bezier(.32,.72,0,1);animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}[data-sheet-drawer][data-entering],[data-sheet-drawer][data-exiting],[data-sheet-drawer].sheet-dragging{will-change:transform}[data-sheet-drawer][data-exiting]{animation-fill-mode:forwards}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=bottom][data-entering]{animation-name:sheet-slideFromBottom}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=bottom][data-exiting]{animation-name:sheet-slideToBottom}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=top][data-entering]{animation-name:sheet-slideFromTop}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=top][data-exiting]{animation-name:sheet-slideToTop}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=left][data-entering]{animation-name:sheet-slideFromLeft}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=left][data-exiting]{animation-name:sheet-slideToLeft}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=right][data-entering]{animation-name:sheet-slideFromRight}[data-sheet-drawer][data-sheet-snap-points=false][data-sheet-drawer-direction=right][data-exiting]{animation-name:sheet-slideToRight}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=bottom]{transform:translate3d(0, var(--initial-transform,100%), 0)}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=top]{transform:translate3d(0, calc(var(--initial-transform,100%) * -1), 0)}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=left]{transform:translate3d(calc(var(--initial-transform,100%) * -1), 0, 0)}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=right]{transform:translate3d(var(--initial-transform,100%), 0, 0)}[data-sheet-drawer][data-sheet-delayed-snap-points=true][data-sheet-drawer-direction=top],[data-sheet-drawer][data-sheet-delayed-snap-points=true][data-sheet-drawer-direction=bottom]{transform:translate3d(0, var(--snap-point-height,0), 0)}[data-sheet-drawer][data-sheet-delayed-snap-points=true][data-sheet-drawer-direction=left],[data-sheet-drawer][data-sheet-delayed-snap-points=true][data-sheet-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0), 0, 0)}[data-sheet-overlay]{background:0 0!important}[data-sheet-overlay]:before{content:"";pointer-events:none;position:fixed;inset:0}[data-sheet-overlay][data-sheet-snap-points=false]:before{animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}[data-sheet-overlay][data-sheet-snap-points=false][data-entering]:before{animation-name:sheet-fadeIn}[data-sheet-overlay][data-sheet-snap-points=false][data-exiting]:before{animation-name:sheet-fadeOut;animation-fill-mode:forwards}[data-sheet-animate=false],[data-sheet-animate=false]:before{transition:none!important;animation:none!important}[data-sheet-overlay][data-sheet-snap-points=true]:before{opacity:var(--sheet-backdrop-opacity,0)}[data-sheet-overlay][data-sheet-snap-points=true][data-sheet-dragging]:before{will-change:opacity}[data-sheet-overlay][data-sheet-snap-points=true]:not([data-sheet-dragging]):before{transition:opacity .5s cubic-bezier(.32,.72,0,1)}[data-sheet-overlay][data-sheet-snap-points=true]:not([data-sheet-snap-points-overlay=true]):not([data-sheet-dragging]):before{opacity:0!important}[data-sheet-drawer]:not([data-sheet-custom-container=true]):after{content:"";pointer-events:none;background-color:var(--overlay);position:absolute}[data-sheet-drawer][data-sheet-drawer-direction=top]:after{top:initial;height:200%;bottom:100%;left:0;right:0}[data-sheet-drawer][data-sheet-drawer-direction=bottom]:after{top:100%;bottom:initial;height:200%;left:0;right:0}[data-sheet-drawer][data-sheet-drawer-direction=left]:after{left:initial;width:200%;top:0;bottom:0;right:100%}[data-sheet-drawer][data-sheet-drawer-direction=right]:after{left:100%;right:initial;width:200%;top:0;bottom:0}[data-sheet-handle]{opacity:.7;touch-action:pan-y;border-radius:1rem;width:32px;height:5px;margin-left:auto;margin-right:auto;display:block;position:relative}[data-sheet-handle]:hover,[data-sheet-handle]:active{opacity:1}[data-slot=sheet-handle-hitarea]{touch-action:inherit;align-items:center;width:max(100%,2.75rem);height:max(100%,2.75rem);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (hover:hover) and (pointer:fine){[data-sheet-drawer]{-webkit-user-select:none;user-select:none}}@media (pointer:fine){[data-slot=sheet-handle-hitarea]{width:100%;height:100%}}@media (prefers-reduced-motion:reduce){[data-sheet-drawer]{transition-duration:.01ms!important;animation-duration:.01ms!important}[data-sheet-overlay]{animation-duration:.01ms!important}[data-sheet-overlay][data-sheet-snap-points=true]:not([data-sheet-dragging]):before,.sheet__handle-bar{transition-duration:.01ms!important}}@keyframes sheet-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sheet-fadeOut{to{opacity:0}}@keyframes sheet-slideFromBottom{0%{transform:translate3d(0, var(--initial-transform,100%), 0)}to{transform:translate(0)}}@keyframes sheet-slideToBottom{to{transform:translate3d(0, var(--initial-transform,100%), 0)}}@keyframes sheet-slideFromTop{0%{transform:translate3d(0, calc(var(--initial-transform,100%) * -1), 0)}to{transform:translate(0)}}@keyframes sheet-slideToTop{to{transform:translate3d(0, calc(var(--initial-transform,100%) * -1), 0)}}@keyframes sheet-slideFromLeft{0%{transform:translate3d(calc(var(--initial-transform,100%) * -1), 0, 0)}to{transform:translate(0)}}@keyframes sheet-slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%) * -1), 0, 0)}}@keyframes sheet-slideFromRight{0%{transform:translate3d(var(--initial-transform,100%), 0, 0)}to{transform:translate(0)}}@keyframes sheet-slideToRight{to{transform:translate3d(var(--initial-transform,100%), 0, 0)}}.sheet__backdrop{z-index:50;position:fixed;inset:0}.sheet__backdrop--opaque:before{background-color:var(--backdrop)}.sheet__backdrop--blur:before{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.sheet__backdrop--blur:before{background-color:color-mix(in oklab, var(--background) 1%, transparent)}}.sheet__backdrop--blur:before{--tw-backdrop-blur:blur(var(--blur-sm,8px));-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,)}.sheet__backdrop--transparent:before{background:0 0}.sheet__content{z-index:50;outline:none;position:fixed}.sheet__content--bottom{border-top-left-radius:calc(var(--radius) * 2);border-top-right-radius:calc(var(--radius) * 2);max-height:96vh;bottom:0;left:0;right:0}.sheet__content--top{border-bottom-right-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2);max-height:96vh;top:0;left:0;right:0}.sheet__content--left{border-top-right-radius:calc(var(--radius) * 2);border-bottom-right-radius:calc(var(--radius) * 2);max-width:96vw;height:100dvh;top:0;bottom:0;left:0}.sheet__content--right{border-top-left-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2);max-width:96vw;height:100dvh;top:0;bottom:0;right:0}[data-sheet-detached]{border-radius:calc(var(--radius) * 2);overflow:hidden}[data-sheet-detached] .sheet__dialog{border-radius:calc(var(--radius) * 2)}[data-sheet-detached]:after{content:none}[data-sheet-detached].sheet__content--bottom{bottom:.5rem;left:.5rem;right:.5rem}[data-sheet-detached].sheet__content--top{top:.5rem;left:.5rem;right:.5rem}[data-sheet-detached].sheet__content--left{top:.5rem;bottom:.5rem;left:.5rem}[data-sheet-detached].sheet__content--right{top:.5rem;bottom:.5rem;right:.5rem}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=bottom],[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=top]{flex-direction:column;height:100vh;max-height:none;display:flex}[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=left],[data-sheet-drawer][data-sheet-snap-points=true][data-sheet-drawer-direction=right]{flex-direction:row;width:100vw;max-width:none;display:flex}.sheet__dialog{background-color:var(--overlay);color:var(--overlay-foreground);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:none;flex-direction:column;flex:auto;min-height:0;display:flex;position:relative;overflow:hidden}.sheet__dialog--bottom{border-top-left-radius:calc(var(--radius) * 2);border-top-right-radius:calc(var(--radius) * 2);max-height:96vh}.sheet__dialog--top{border-bottom-right-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2);max-height:96vh}[data-sheet-snap-points=true] .sheet__dialog--bottom,[data-sheet-snap-points=true] .sheet__dialog--top{max-height:none}.sheet__dialog--left{border-top-right-radius:calc(var(--radius) * 2);border-bottom-right-radius:calc(var(--radius) * 2);height:100%}.sheet__dialog--right{border-top-left-radius:calc(var(--radius) * 2);border-bottom-left-radius:calc(var(--radius) * 2);height:100%}.sheet__header{flex-direction:column;flex-shrink:0;gap:.25rem;padding:1rem 1.25rem .5rem;display:flex}.sheet__heading{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.sheet__body{scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);-webkit-overflow-scrolling:touch;flex:auto;padding:.5rem 1.25rem;overflow-y:auto}.sheet__footer{flex-shrink:0;justify-content:flex-end;align-items:center;gap:.5rem;padding:.5rem 1.25rem 1rem;display:flex}.sheet__handle{cursor:grab;touch-action:pan-y;justify-content:center;align-items:center;padding:.75rem 0;display:flex;position:relative}.sheet__handle:active{cursor:grabbing}.sheet__handle-bar{background-color:var(--default);border-radius:3.40282e38px;width:2rem;height:.3rem;transition:background-color .15s;display:block}.sheet__handle:hover .sheet__handle-bar,.sheet__handle:active .sheet__handle-bar{background-color:var(--default-hover)}.sheet__close-trigger{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;color:var(--muted);cursor:var(--cursor-interactive);outline-style:none;position:absolute;top:.75rem;right:.75rem}.sheet__close-trigger:focus-visible,.sheet__close-trigger[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.sheet__close-trigger:disabled,.sheet__close-trigger[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}@media (hover:hover){.sheet__close-trigger:hover,.sheet__close-trigger[data-hovered=true]{color:var(--foreground)}}.pressable-feedback{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-radius:inherit;cursor:var(--cursor-interactive);outline-style:none;display:inline-flex;position:relative;overflow:hidden}.pressable-feedback:focus-visible:not(:focus),.pressable-feedback[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.pressable-feedback:disabled,.pressable-feedback[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.pressable-feedback__highlight{--pressable-feedback-highlight-color:currentColor;--pressable-feedback-highlight-opacity:.08;--pressable-feedback-highlight-pressed-opacity:.12;--pressable-feedback-transition-duration:.15s;pointer-events:none;border-radius:inherit;background-color:var(--pressable-feedback-highlight-color);opacity:0;transition:opacity var(--pressable-feedback-transition-duration) ease;position:absolute;inset:0}@media (hover:hover){:hover>.pressable-feedback__highlight,[data-hovered=true]>.pressable-feedback__highlight{opacity:var(--pressable-feedback-highlight-opacity)}}:active>.pressable-feedback__highlight,[data-pressed=true]>.pressable-feedback__highlight{opacity:var(--pressable-feedback-highlight-pressed-opacity)}:disabled>.pressable-feedback__highlight,[aria-disabled=true]>.pressable-feedback__highlight{display:none}.pressable-feedback__ripple{pointer-events:none;border-radius:inherit;width:100%;height:100%;margin:auto;display:block;position:absolute;inset:0;overflow:hidden}.pressable-feedback__ripple[aria-disabled=true]{display:none}@media (forced-colors:active){.pressable-feedback__ripple{display:none}}.pressable-feedback__ripple-surface{pointer-events:none;border-radius:inherit;inset:0}.pressable-feedback__ripple-surface:before,.pressable-feedback__ripple-surface:after{content:"";opacity:0;position:absolute}.pressable-feedback__ripple-surface:before{background-color:var(--pressable-feedback-ripple-color,currentColor);width:100%;height:100%;transition:opacity var(--pressable-feedback-ripple-duration,.15s), background-color var(--pressable-feedback-ripple-duration,.15s);inset:0}.pressable-feedback__ripple-surface:after{background:radial-gradient(closest-side, var(--pressable-feedback-ripple-color,currentColor) max(100% - 70px, 65%), transparent 100%);transform-origin:50%;transition:opacity .375s;inset:0}.pressable-feedback__ripple-surface.--hover:before{background-color:var(--pressable-feedback-ripple-color,currentColor);opacity:var(--pressable-feedback-ripple-hover-opacity,.08)}.pressable-feedback__ripple-surface.--press:after{opacity:var(--pressable-feedback-ripple-pressed-opacity,.12);transition-duration:75ms}.pressable-feedback__hold-confirm{--pressable-feedback-hold-confirm-duration:2s;--pressable-feedback-hold-confirm-release-duration:.2s;justify-content:center;align-items:center;gap:inherit;pointer-events:none;border-radius:inherit;transition:clip-path var(--pressable-feedback-hold-confirm-release-duration) ease-out;display:flex;position:absolute;inset:0}.pressable-feedback__hold-confirm[data-sweep=right]{clip-path:inset(0 100% 0 0)}.pressable-feedback__hold-confirm[data-sweep=left]{clip-path:inset(0 0 0 100%)}.pressable-feedback__hold-confirm[data-sweep=down]{clip-path:inset(0 0 100%)}.pressable-feedback__hold-confirm[data-sweep=up]{clip-path:inset(100% 0 0)}.pressable-feedback__hold-confirm[data-holding=true]{clip-path:inset(0);transition:clip-path var(--pressable-feedback-hold-confirm-duration) linear}.pressable-feedback__hold-confirm[data-complete=true]{clip-path:inset(0);transition:none}:disabled>.pressable-feedback__hold-confirm,[aria-disabled=true]>.pressable-feedback__hold-confirm{display:none}.pressable-feedback__progress-feedback{--pressable-feedback-progress-feedback-duration:2s;--pressable-feedback-progress-feedback-release-duration:.3s;justify-content:center;align-items:center;gap:inherit;pointer-events:none;border-radius:inherit;transition:clip-path var(--pressable-feedback-progress-feedback-release-duration) ease-out;display:flex;position:absolute;inset:0}.pressable-feedback__progress-feedback[data-sweep=right]{clip-path:inset(0 100% 0 0)}.pressable-feedback__progress-feedback[data-sweep=left]{clip-path:inset(0 0 0 100%)}.pressable-feedback__progress-feedback[data-sweep=down]{clip-path:inset(0 0 100%)}.pressable-feedback__progress-feedback[data-sweep=up]{clip-path:inset(100% 0 0)}.pressable-feedback__progress-feedback[data-progressing=true]{clip-path:inset(0);transition:clip-path var(--pressable-feedback-progress-feedback-duration) linear}.pressable-feedback__progress-feedback[data-complete=true]{clip-path:inset(0);transition:none}:disabled>.pressable-feedback__progress-feedback,[aria-disabled=true]>.pressable-feedback__progress-feedback{display:none}.prompt-input{width:100%;position:relative}.prompt-input__shell{border-radius:calc(var(--radius) * 2);border-style:solid;border-color:var(--field-border,var(--border));border-width:var(--border-width-field,var(--field-border-width,1px));width:100%;transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);flex-direction:column;display:flex;position:relative;overflow:hidden}.prompt-input__shell--primary{background-color:var(--field-background,var(--default));border-color:var(--field-border,var(--border))}@media (hover:hover){.prompt-input__shell--primary:hover{border-color:var(--field-border-hover)}}.prompt-input:focus-within .prompt-input__shell--primary{background-color:var(--field-focus,var(--field-background,var(--default)));border-color:var(--field-border-focus,var(--field-border,var(--border)))}.prompt-input__shell--secondary{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:var(--default);border-color:var(--field-border,var(--border))}@media (hover:hover){.prompt-input__shell--secondary:hover{background-color:var(--default-hover)}}.prompt-input:focus-within .prompt-input__shell--secondary{background-color:var(--default);border-color:var(--field-border-focus,var(--field-border,var(--border)))}.prompt-input__shell[data-dragging=true]{background-color:var(--accent-soft);border-style:dotted;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.prompt-input__content{min-height:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;flex:1;display:flex}.prompt-input__attachments{gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);flex-wrap:wrap;display:flex}.prompt-input__textarea{margin-bottom:calc(var(--spacing,.25rem) * 14);min-height:calc(var(--spacing,.25rem) * 14);resize:none;padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);scrollbar-width:var(--scrollbar-width);scrollbar-color:var(--scrollbar-color);scrollbar-gutter:var(--scrollbar-gutter);transition:height .1s var(--ease-out)}.prompt-input__attachments+.prompt-input__textarea{padding-top:calc(var(--spacing,.25rem) * 1)}@media (prefers-reduced-motion:reduce){.prompt-input__textarea{transition:none}}.prompt-input__shell .prompt-input__textarea.textarea,.prompt-input__shell .prompt-input__textarea.textarea:hover:not(:focus):not(:focus-visible),.prompt-input__shell .prompt-input__textarea.textarea[data-hovered=true]:not([data-focused=true]):not([data-focus-visible=true]){box-shadow:none;--tw-shadow:0 0 #0000;--tw-inset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;background-color:#0000;border-color:#0000}.prompt-input__shell .prompt-input__textarea.textarea:focus,.prompt-input__shell .prompt-input__textarea.textarea:focus-visible,.prompt-input__shell .prompt-input__textarea.textarea[data-focused=true],.prompt-input__shell .prompt-input__textarea.textarea[data-focus-visible=true]{box-shadow:none;--tw-shadow:0 0 #0000;--tw-inset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;background-color:#0000;border-color:#0000;outline:none}.prompt-input--sm .prompt-input__textarea{margin-bottom:calc(var(--spacing,.25rem) * 10);min-height:calc(var(--spacing,.25rem) * 12)}.prompt-input--lg .prompt-input__textarea{margin-bottom:calc(var(--spacing,.25rem) * 14);min-height:calc(var(--spacing,.25rem) * 18)}.prompt-input__toolbar{inset-inline:calc(var(--spacing,.25rem) * 3);bottom:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex;position:absolute}.prompt-input__toolbar-start,.prompt-input__toolbar-end{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.prompt-input__toolbar-end{margin-inline-start:auto}.prompt-input__footer{margin-top:calc(var(--spacing,.25rem) * 1);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.prompt-input__send{flex-shrink:0}.prompt-input[data-disabled=true]{opacity:.6}.prompt-input[data-pending=true] .prompt-input__shell{opacity:.95}.prompt-input[data-status=error] .prompt-input__send{background-color:var(--danger);color:var(--danger-foreground)}.prompt-input[data-disabled=true] .prompt-input__shell{cursor:not-allowed}.prompt-input:not([data-disabled=true]) .prompt-input__shell{cursor:text}.prompt-input:not([data-disabled=true]) .prompt-input__toolbar{cursor:default}.prompt-input[data-layout=compact] .prompt-input__shell--compact,.prompt-input[data-layout=inline] .prompt-input__shell--inline{background-color:var(--field-background,var(--default));border-color:var(--field-border,var(--border));border-radius:var(--radius-2xl,1rem);transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), border-radius .2s var(--ease-out), box-shadow .15s var(--ease-out), min-height .2s var(--ease-out)}@media (prefers-reduced-motion:reduce){.prompt-input[data-layout=compact] .prompt-input__shell--compact,.prompt-input[data-layout=inline] .prompt-input__shell--inline{transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out)}}@media (hover:hover){.prompt-input[data-layout=compact] .prompt-input__shell--compact:hover,.prompt-input[data-layout=inline] .prompt-input__shell--inline:hover{border-color:var(--field-border-hover)}}.prompt-input[data-layout=compact]:focus-within .prompt-input__shell--compact,.prompt-input[data-layout=inline]:focus-within .prompt-input__shell--inline{background-color:var(--field-focus,var(--field-background,var(--default)));border-color:var(--field-border-focus,var(--field-border,var(--border)))}.prompt-input[data-layout=compact] .prompt-input__send,.prompt-input[data-layout=compact] [data-slot=prompt-input-action],.prompt-input[data-layout=inline] .prompt-input__send,.prompt-input[data-layout=inline] [data-slot=prompt-input-action]{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);max-height:calc(var(--spacing,.25rem) * 8);min-height:calc(var(--spacing,.25rem) * 8);max-width:calc(var(--spacing,.25rem) * 8);min-width:calc(var(--spacing,.25rem) * 8);flex-shrink:0}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)),.prompt-input[data-layout=inline] .prompt-input__shell--inline{min-height:calc(var(--spacing,.25rem) * 12);border-radius:calc(var(--radius) * 3);padding-block:calc(var(--spacing,.25rem) * 0);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(calc(var(--spacing) * 12), auto);grid-template-areas:"attachments attachments attachments""toolbar-start textarea toolbar-end";display:grid;overflow:hidden}.prompt-input[data-layout=inline][data-expanded] .prompt-input__shell--inline,.prompt-input[data-layout=inline] .prompt-input__shell--inline:has(.prompt-input__attachments>*){border-radius:var(--radius-2xl,1rem)}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__content,.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__toolbar,.prompt-input[data-layout=inline] .prompt-input__content,.prompt-input[data-layout=inline] .prompt-input__toolbar{display:contents}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__textarea,.prompt-input[data-layout=inline] .prompt-input__textarea{max-height:none;margin-bottom:calc(var(--spacing,.25rem) * 0);min-height:calc(var(--spacing,.25rem) * 12);resize:none;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 3.5);transition:height .1s var(--ease-out), min-height .2s var(--ease-out);grid-area:textarea;align-self:flex-start;overflow-y:auto}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__textarea{max-height:calc(var(--spacing,.25rem) * 12);align-self:center;overflow-y:hidden}@media (prefers-reduced-motion:reduce){.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__textarea,.prompt-input[data-layout=inline] .prompt-input__textarea{transition:none}}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__toolbar-start{height:calc(var(--spacing,.25rem) * 8);grid-area:toolbar-start;align-self:center;padding-inline-start:calc(var(--spacing,.25rem) * 2)}.prompt-input[data-layout=compact]:not([data-expanded]) .prompt-input__shell--compact:not(:has(.prompt-input__attachments>*)) .prompt-input__toolbar-end{height:calc(var(--spacing,.25rem) * 8);grid-area:toolbar-end;align-self:center;padding-inline-end:calc(var(--spacing,.25rem) * 2)}.prompt-input[data-layout=inline] .prompt-input__attachments{gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);flex-wrap:wrap;grid-area:attachments;display:flex}.prompt-input[data-layout=inline] .prompt-input__attachments+.prompt-input__textarea{padding-top:calc(var(--spacing,.25rem) * 1)}.prompt-input[data-layout=inline] .prompt-input__toolbar-start{margin-top:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 8);grid-area:toolbar-start;align-self:flex-start;padding-inline-start:calc(var(--spacing,.25rem) * 2)}.prompt-input[data-layout=inline] .prompt-input__toolbar-end{margin-top:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 8);grid-area:toolbar-end;align-self:flex-start;padding-inline-end:calc(var(--spacing,.25rem) * 2)}.prompt-input[data-layout=compact][data-expanded] .prompt-input__shell--compact,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*){border-radius:var(--radius-2xl,1rem);min-height:calc(var(--spacing,.25rem) * 28);flex-direction:column;display:flex}.prompt-input[data-layout=compact][data-expanded] .prompt-input__content,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__content{min-height:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;flex:1;display:flex}.prompt-input[data-layout=compact][data-expanded] .prompt-input__toolbar,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__toolbar{inset-inline:calc(var(--spacing,.25rem) * 3);bottom:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex;position:absolute}.prompt-input[data-layout=compact][data-expanded] .prompt-input__attachments,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__attachments{gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 1);flex-wrap:wrap;display:flex}.prompt-input[data-layout=compact][data-expanded] .prompt-input__textarea,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__textarea{max-height:none;margin-bottom:calc(var(--spacing,.25rem) * 12);min-height:calc(var(--spacing,.25rem) * 18);resize:none;padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 3);transition:height .1s var(--ease-out), min-height .2s var(--ease-out)}@media (prefers-reduced-motion:reduce){.prompt-input[data-layout=compact][data-expanded] .prompt-input__textarea,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__textarea{transition:none}}.prompt-input[data-layout=compact][data-expanded] .prompt-input__attachments+.prompt-input__textarea,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__attachments+.prompt-input__textarea{padding-top:calc(var(--spacing,.25rem) * 1)}.prompt-input[data-layout=compact][data-expanded] .prompt-input__toolbar-start,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__toolbar-start{flex-shrink:0;padding-inline-start:calc(var(--spacing,.25rem) * 0)}.prompt-input[data-layout=compact][data-expanded] .prompt-input__toolbar-end,.prompt-input[data-layout=compact] .prompt-input__shell--compact:has(.prompt-input__attachments>*) .prompt-input__toolbar-end{flex-shrink:0;padding-inline-end:calc(var(--spacing,.25rem) * 0)}.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline{--field-border:var(--border);--field-border-hover:var(--border);--field-border-focus:var(--border);box-shadow:none;border-style:solid;border-width:var(--border-width,1px);border-color:var(--border);--button-bg-hover:var(--default);background-color:#0000}@supports (color:color-mix(in lab, red, red)){.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline{--button-bg-hover:color-mix(in srgb, var(--default) 60%, transparent)}}@media (hover:hover){.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline:hover,.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline[data-hovered=true]{border-color:var(--border);background-color:var(--button-bg-hover)}}.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline:focus-visible,.prompt-input [data-slot=select-trigger].prompt-input__select-trigger--outline[data-focus-visible=true]{border-color:var(--border);background-color:#0000}.prompt-input:has(>.prompt-input__queue){gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;width:100%;display:flex;overflow-x:hidden}.prompt-input:has(>.prompt-input__queue)>.prompt-input__shell{flex-shrink:0;width:100%}.prompt-input__queue{border-radius:calc(var(--radius) * 2);border-style:solid;border-color:var(--field-border,var(--border));border-width:var(--border-width-field,var(--field-border-width,1px));width:100%;transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth);flex-shrink:0;position:relative;overflow:hidden}.prompt-input[data-variant=primary] .prompt-input__queue,.prompt-input:not([data-variant]) .prompt-input__queue{background-color:var(--field-background,var(--default))}.prompt-input[data-variant=secondary] .prompt-input__queue{background-color:var(--default)}@media (hover:hover){.prompt-input[data-variant=primary] .prompt-input__queue:hover,.prompt-input:not([data-variant]) .prompt-input__queue:hover{border-color:var(--field-border-hover,var(--field-border,var(--border)))}}.prompt-input:focus-within[data-variant=primary] .prompt-input__queue,.prompt-input:focus-within:not([data-variant]) .prompt-input__queue,.prompt-input[data-layout=compact]:focus-within .prompt-input__queue,.prompt-input[data-layout=inline]:focus-within .prompt-input__queue{border-color:var(--field-border-focus,var(--field-border,var(--border)))}.prompt-input__queue-list{max-height:calc(var(--spacing,.25rem) * 40);width:100%;overflow-x:hidden}.prompt-input__queue-list-items{margin:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * 0);list-style-type:none}.prompt-input__queue-item{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);display:flex}.prompt-input__queue-item+.prompt-input__queue-item{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.prompt-input__queue-item+.prompt-input__queue-item{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.prompt-input__queue-item-body{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:1;display:flex}.prompt-input__queue-item-body:has(.prompt-input__queue-item-attachments){align-items:stretch;gap:calc(var(--spacing,.25rem) * 2);flex-direction:column}.prompt-input__queue-item-body:has(.prompt-input__queue-item-attachments) .prompt-input__queue-item-icon{align-self:flex-start}.prompt-input__queue-item>.prompt-input__queue-item-attachments{flex-basis:100%;padding-inline-start:calc(var(--spacing,.25rem) * 9)}.prompt-input__queue-item:has(>.prompt-input__queue-item-attachments){flex-wrap:wrap}.prompt-input__queue-item:has(>.prompt-input__queue-item-attachments) .prompt-input__queue-item-actions{align-self:center}.prompt-input__queue-item-handle{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7);min-height:calc(var(--spacing,.25rem) * 7);min-width:calc(var(--spacing,.25rem) * 7);color:var(--muted);opacity:1;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-shrink:0}.prompt-input__queue-item-handle[data-reorder-enabled]{cursor:grab}.prompt-input__queue-item-handle[data-reorder-enabled]:active{cursor:grabbing}.prompt-input__queue-item-icon{color:var(--muted);flex-shrink:0;justify-content:center;align-self:center;align-items:center;display:flex}.prompt-input__queue-item-content{min-width:calc(var(--spacing,.25rem) * 0);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);overflow-wrap:anywhere;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;align-self:center;display:-webkit-box;overflow:hidden}.prompt-input__queue-item-body .prompt-input__queue-item-content{min-width:calc(var(--spacing,.25rem) * 0);flex:1}.prompt-input__queue-item-description{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);color:var(--muted)}.prompt-input__queue-item-actions{align-items:center;gap:calc(var(--spacing,.25rem) * .5);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-shrink:0;align-self:center;display:flex}.prompt-input__queue[data-actions-visibility=hover] .prompt-input__queue-item-actions{opacity:0}.prompt-input__queue[data-actions-visibility=hover] .prompt-input__queue-item:hover .prompt-input__queue-item-actions,.prompt-input__queue[data-actions-visibility=hover] .prompt-input__queue-item:focus-within .prompt-input__queue-item-actions,.prompt-input__queue[data-actions-visibility=hover] .prompt-input__queue-item:has([aria-expanded=true]) .prompt-input__queue-item-actions,.prompt-input__queue[data-actions-visibility=hover] .prompt-input__queue-item:has([data-open=true]) .prompt-input__queue-item-actions,.prompt-input__queue[data-actions-visibility=always] .prompt-input__queue-item-actions{opacity:1}.prompt-input__queue-item-attachments{min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}.prompt-input__queue-item-attachments-overflow{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.prompt-suggestion{gap:calc(var(--spacing,.25rem) * 8);flex-direction:column;width:100%;display:flex}.prompt-suggestion__header{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.prompt-suggestion__title{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-tight,-.025em);letter-spacing:var(--tracking-tight,-.025em);color:var(--foreground)}.prompt-suggestion__description{max-width:640px;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted)}.prompt-suggestion__group{gap:calc(var(--spacing,.25rem) * 3);flex-direction:column;display:flex}.prompt-suggestion__group-label{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.prompt-suggestion__group-description{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted)}.prompt-suggestion__items--pill{gap:calc(var(--spacing,.25rem) * 2);grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:auto;width:100%;display:grid}@media (min-width:40rem){.prompt-suggestion__items--pill{grid-template-columns:repeat(2,minmax(0,1fr))}}.prompt-suggestion__items--card{gap:calc(var(--spacing,.25rem) * 3);grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:auto;display:grid}@media (min-width:40rem){.prompt-suggestion__items--card{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.prompt-suggestion__items--card{grid-template-columns:repeat(3,minmax(0,1fr))}}.prompt-suggestion__items--card>*{height:100%}.prompt-suggestion__item--pill{height:auto;min-height:calc(var(--spacing,.25rem) * 0);justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);white-space:normal;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#0000;display:flex}@media (hover:hover){.prompt-suggestion__item--pill:hover{background-color:var(--default)}@supports (color:color-mix(in lab, red, red)){.prompt-suggestion__item--pill:hover{background-color:color-mix(in oklab, var(--default) 40%, transparent)}}}.prompt-suggestion__item--pill{cursor:var(--cursor-interactive)}.prompt-suggestion__item--pill:focus-visible,.prompt-suggestion__item--pill[data-focus-visible=true]{--tw-outline-style:none;box-shadow:inset 0 0 0 2px var(--color-focus);outline-style:none}.prompt-suggestion__item-label{min-width:calc(var(--spacing,.25rem) * 0);text-wrap:pretty;align-items:center;display:flex}.prompt-suggestion__item-end-icon{margin-top:calc(var(--spacing,.25rem) * .5);width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);color:var(--muted);opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-shrink:0}.prompt-suggestion__item--pill:hover .prompt-suggestion__item-end-icon,.prompt-suggestion__item--pill[data-hovered=true] .prompt-suggestion__item-end-icon{opacity:1}.prompt-suggestion__item-end-icon:dir(rtl){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.prompt-suggestion__item--card{gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 2);flex-direction:column;height:100%;display:flex}.prompt-suggestion__item-description{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.prompt-suggestion__item-footer{padding-top:calc(var(--spacing,.25rem) * 0);justify-content:space-between;align-items:center;margin-top:auto;display:flex}.prompt-suggestion__item-tags{gap:calc(var(--spacing,.25rem) * 1.5);flex-wrap:wrap;display:flex}.prompt-suggestion__item-meta{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.radar-chart{width:100%}.radar-chart .recharts-polar-angle-axis-tick-value{font-size:11px;fill:var(--muted)!important}.radar-chart .recharts-polar-radius-axis-tick-value{font-size:10px;fill:var(--muted)!important}.radar-chart .recharts-polar-grid-concentric-polygon,.radar-chart .recharts-polar-grid-concentric-circle,.radar-chart .recharts-polar-grid-angle line{stroke:var(--muted);stroke-opacity:.2}.radar-chart .recharts-tooltip-cursor{display:none}.radial-chart{width:100%}.radial-chart .recharts-tooltip-cursor{display:none}.radial-chart .recharts-tooltip-wrapper{z-index:10}.radial-chart .recharts-radial-bar-background-sector{fill:var(--separator)}.radio-button-group{gap:calc(var(--spacing,.25rem) * 3);--radio-button-group-item-radius:var(--radius-2xl);display:flex}.radio-button-group--grid{display:grid}.radio-button-group>[data-slot=radio-button-group-item]{display:contents}.radio-button-group__item{align-items:stretch;gap:calc(var(--spacing,.25rem) * 4);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 4);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);background-color:var(--surface);border-radius:var(--radio-button-group-item-radius);cursor:var(--cursor-interactive);outline-style:none;flex-direction:column;display:flex;position:relative}.radio-button-group__item[data-selected=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--accent);border-color:#0000}.radio-button-group__item:focus-visible:not(:focus),.radio-button-group__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.radio-button-group__item[data-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.radio-button-group__indicator{inset-inline-end:calc(var(--spacing,.25rem) * 4);top:calc(var(--spacing,.25rem) * 3);position:absolute}.radio-button-group__indicator[data-custom=true]{color:var(--accent);opacity:0;transition:opacity .15s ease-out}.radio-button-group__indicator[data-custom=true] svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}[data-selected=true]>.radio-button-group__indicator[data-custom=true]{opacity:1}.radio-button-group__item-content{min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;display:flex}.radio-button-group__item-icon{flex-shrink:0}.radio-button-group__item-icon svg{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.rating{--tw-outline-style:none;--rating-active-color:var(--color-warning);--rating-inactive-color:var(--color-surface-tertiary);outline-style:none;align-items:center;display:flex}.rating[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.rating[data-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.rating[data-readonly=true]{pointer-events:none}.rating[data-readonly=true] input{display:none}.rating[data-readonly=true]:focus-visible,.rating[data-readonly=true][data-focus-visible=true]{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;outline-style:none}.rating__item{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;justify-content:center;align-items:center;transition:transform .15s;display:flex;position:relative}.rating__item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.rating__item:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.rating__item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.rating__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.rating__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.rating__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.rating__item:focus-visible:not(:focus),.rating__item[data-focus-visible=true]{border-radius:calc(var(--radius) * .5);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.rating__item:disabled,.rating__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.rating__item:active:not([data-readonly=true]),.rating__item[data-pressed=true]:not([data-readonly=true]){transform:scale(.8)}.rating__item[data-readonly=true]{pointer-events:none;cursor:default}.rating__item[data-readonly=true]:focus-visible:not(:focus),.rating__item[data-readonly=true][data-focus-visible=true]{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;outline-style:none}.rating__icon{color:var(--rating-inactive-color);justify-content:center;align-items:center;transition:color .1s ease-out;display:flex;position:relative}.rating__icon:is([data-reduce-motion=true],[data-reduce-motion=true] *),.rating__icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.rating__icon:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.rating__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.rating__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.rating__icon:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.rating__icon svg{width:100%;height:100%}.rating__item[data-active=true] .rating__icon{color:var(--rating-active-color)}.rating__icon-partial{inset-block:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);color:var(--rating-active-color);width:var(--rating-partial);align-items:center;display:flex;position:absolute;overflow:hidden}.rating__icon-partial svg{flex-shrink:0}.rating--sm{gap:4px}.rating__item--sm .rating__icon,.rating__item--sm .rating__icon-partial svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.rating--md{gap:5px}.rating__item--md .rating__icon,.rating__item--md .rating__icon-partial svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.rating--lg{gap:8px}.rating__item--lg .rating__icon,.rating__item--lg .rating__icon-partial svg{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.resizable{--resizable-handle-size:1px;--resizable-handle-hit-area:8px;--resizable-handle-color:var(--color-separator);--resizable-handle-color-hover:var(--color-separator-secondary);--resizable-handle-color-active:var(--color-accent-soft);--resizable-indicator-pill-width:6px;--resizable-indicator-pill-height:32px;--resizable-indicator-drag-radius:var(--radius-sm,6px);--resizable-indicator-drag-bg:var(--color-default);--resizable-indicator-drag-bg-hover:var(--color-default-hover);--resizable-indicator-drag-fg:var(--color-muted);--resizable-indicator-drag-fg-hover:var(--color-foreground);--resizable-indicator-drag-long:20px;--resizable-indicator-drag-short:13px;--resizable-indicator-drag-icon-size:10px;--resizable-indicator-radius:var(--radius-full,9999px);--resizable-transition-duration:.12s;height:100%;min-height:calc(var(--spacing,.25rem) * 0);width:100%;min-width:calc(var(--spacing,.25rem) * 0);display:flex}.resizable--horizontal{flex-direction:row}.resizable--vertical{flex-direction:column}.resizable__panel{min-height:calc(var(--spacing,.25rem) * 0);min-width:calc(var(--spacing,.25rem) * 0);position:relative;overflow:hidden}.resizable__handle{--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:var(--resizable-handle-color);cursor:var(--cursor-interactive,col-resize);touch-action:none;-webkit-user-select:none;user-select:none;transition:background-color var(--resizable-transition-duration) ease;outline-style:none;flex:none;justify-content:center;align-items:center;display:flex;position:relative}.resizable__handle--horizontal{width:var(--resizable-handle-size);cursor:col-resize}.resizable__handle--vertical{height:var(--resizable-handle-size);cursor:row-resize}.resizable__handle:before{content:"";background:0 0;position:absolute}.resizable__handle--horizontal:before{top:0;bottom:0;left:calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2);right:calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2)}.resizable__handle--vertical:before{left:0;right:0;top:calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2);bottom:calc((var(--resizable-handle-size) - var(--resizable-handle-hit-area)) / 2)}.resizable__handle--primary{--resizable-handle-color:var(--color-separator)}.resizable__handle--secondary{--resizable-handle-color:var(--color-separator-secondary)}.resizable__handle--tertiary{--resizable-handle-color:var(--color-separator-tertiary)}@media (hover:hover){.resizable__handle:hover,.resizable__handle[data-hovered=true]{background-color:var(--resizable-handle-color-hover)}}.resizable__handle[data-resize-handle-active],.resizable__handle[data-resize-handle-state=drag],.resizable__handle:active,.resizable__handle[data-pressed=true]{background-color:var(--resizable-handle-color-active)}.resizable__handle:focus-visible:not(:focus),.resizable__handle[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.resizable__handle:disabled,.resizable__handle[aria-disabled=true],.resizable__handle[data-disabled]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none;cursor:default}.resizable__handle-indicator{pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.resizable__handle--pill .resizable__handle-indicator--pill,.resizable__handle-indicator--pill{width:var(--resizable-indicator-pill-width);height:var(--resizable-indicator-pill-height);border-radius:var(--resizable-indicator-radius);background-color:var(--color-default);transition:background-color var(--resizable-transition-duration) ease, transform var(--resizable-transition-duration) ease}.resizable__handle--vertical .resizable__handle-indicator--pill{width:var(--resizable-indicator-pill-height);height:var(--resizable-indicator-pill-width)}@media (hover:hover){.resizable__handle--pill:hover .resizable__handle-indicator--pill,.resizable__handle--pill[data-hovered=true] .resizable__handle-indicator--pill{background-color:var(--color-default-hover)}}.resizable__handle--pill[data-resize-handle-active] .resizable__handle-indicator--pill,.resizable__handle--pill:active .resizable__handle-indicator--pill{background-color:var(--color-default-hover)}.resizable__handle-indicator--drag{border-radius:var(--resizable-indicator-drag-radius);background-color:var(--resizable-indicator-drag-bg);color:var(--resizable-indicator-drag-fg);transition:background-color var(--resizable-transition-duration) ease, color var(--resizable-transition-duration) ease;justify-content:center;align-items:center;display:inline-flex}.resizable__handle-indicator-icon{width:var(--resizable-indicator-drag-icon-size);height:var(--resizable-indicator-drag-icon-size);display:block}.resizable__handle--horizontal .resizable__handle-indicator--drag{width:var(--resizable-indicator-drag-short);height:var(--resizable-indicator-drag-long)}.resizable__handle--vertical .resizable__handle-indicator--drag{width:var(--resizable-indicator-drag-long);height:var(--resizable-indicator-drag-short)}@media (hover:hover){.resizable__handle--drag:hover .resizable__handle-indicator--drag,.resizable__handle--drag[data-hovered=true] .resizable__handle-indicator--drag{background-color:var(--resizable-indicator-drag-bg-hover);color:var(--resizable-indicator-drag-fg-hover)}}.resizable__handle--handle{background-color:#0000}@media (hover:hover){.resizable__handle--handle:hover,.resizable__handle--handle[data-hovered=true]{background-color:#0000}}.resizable__handle--handle[data-resize-handle-active],.resizable__handle--handle[data-resize-handle-state=drag],.resizable__handle--handle:active,.resizable__handle--handle[data-pressed=true]{background-color:#0000}@media (prefers-reduced-motion:reduce){.resizable__handle,.resizable__handle-indicator,.resizable__handle-indicator--pill,.resizable__handle-indicator--drag{transition:none}}.rich-text-editor{width:100%;position:relative}.rich-text-editor__shell{min-height:calc(var(--spacing,.25rem) * 0);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border);background-color:var(--field-background,var(--default));border-color:var(--field-border,var(--border));border-width:var(--border-width-field,1px);width:100%;transition:background-color .15s var(--ease-smooth), border-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);flex-direction:column;display:flex;position:relative;overflow:hidden}@media (hover:hover){.rich-text-editor:not([data-disabled=true]) .rich-text-editor__shell:hover{border-color:var(--field-border-hover)}}.rich-text-editor:has(.rich-text-editor__prosemirror:focus) .rich-text-editor__shell{background-color:var(--field-focus,var(--field-background,var(--default)));border-color:var(--field-border-focus,var(--field-border,var(--border)))}.rich-text-editor__toolbar.toolbar{min-height:calc(var(--spacing,.25rem) * 12);align-items:center;gap:calc(var(--spacing,.25rem) * 1);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}.rich-text-editor__toolbar-group{align-items:center;gap:calc(var(--spacing,.25rem) * 1);display:flex}.rich-text-editor__toolbar-separator.separator{margin-inline:calc(var(--spacing,.25rem) * 1);height:calc(var(--spacing,.25rem) * 6);background-color:var(--separator);flex-shrink:0;align-self:center;width:1px}.rich-text-editor__toolbar-button{flex-shrink:0}.rich-text-editor__toolbar-button[data-active=true],.rich-text-editor__toolbar-button[data-selected=true]{background-color:var(--accent-soft);color:var(--accent)}.rich-text-editor__content{min-height:calc(var(--spacing,.25rem) * 0);flex:1;overflow-y:auto}.rich-text-editor__loading{min-height:180px}.rich-text-editor__prosemirror{min-height:180px;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);color:var(--foreground);--tw-outline-style:none;outline-style:none}.rich-text-editor__prosemirror>*+*{margin-top:calc(var(--spacing,.25rem) * 3)}.rich-text-editor__prosemirror h1,.rich-text-editor__prosemirror h2,.rich-text-editor__prosemirror h3{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-normal,0em);letter-spacing:var(--tracking-normal,0em);color:var(--foreground)}.rich-text-editor__prosemirror h1{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-leading:calc(var(--spacing,.25rem) * 8);line-height:calc(var(--spacing,.25rem) * 8)}.rich-text-editor__prosemirror h2{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}.rich-text-editor__prosemirror h3{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}.rich-text-editor__prosemirror p{min-height:calc(var(--spacing,.25rem) * 6)}.rich-text-editor__prosemirror ul,.rich-text-editor__prosemirror ol{padding-inline-start:calc(var(--spacing,.25rem) * 6)}.rich-text-editor__prosemirror ul{list-style-type:disc}.rich-text-editor__prosemirror ol{list-style-type:decimal}.rich-text-editor__prosemirror li+li{margin-top:calc(var(--spacing,.25rem) * 1)}.rich-text-editor__prosemirror blockquote{border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px;border-color:var(--border);color:var(--muted);padding-inline-start:calc(var(--spacing,.25rem) * 4)}.rich-text-editor__prosemirror code{border-radius:calc(var(--radius) * .75);background-color:var(--default-hover);padding-inline:calc(var(--spacing,.25rem) * 1.5);padding-block:calc(var(--spacing,.25rem) * .5);font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);color:var(--foreground);font-size:.9em}.rich-text-editor__prosemirror pre{border-radius:calc(var(--radius) * 1.5);background-color:var(--default-hover);padding:calc(var(--spacing,.25rem) * 3);font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--foreground);overflow-x:auto}.rich-text-editor__prosemirror pre code{padding:calc(var(--spacing,.25rem) * 0);color:inherit;background-color:#0000}.rich-text-editor__prosemirror a{color:var(--link);text-underline-offset:2px;text-decoration-line:underline}.rich-text-editor__prosemirror p.is-editor-empty:first-child:before,.rich-text-editor__prosemirror .is-empty:before{pointer-events:none;float:left;height:calc(var(--spacing,.25rem) * 0);color:var(--muted);content:attr(data-placeholder)}.rich-text-editor__bubble-menu{border-radius:calc(var(--radius) * 3);background-color:var(--overlay);padding:calc(var(--spacing,.25rem) * 1);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.rich-text-editor__bubble-menu-toolbar.toolbar{align-items:center;gap:calc(var(--spacing,.25rem) * 1);width:fit-content;display:flex}.rich-text-editor__floating-menu{border-radius:calc(var(--radius) * 3);background-color:var(--overlay);padding:calc(var(--spacing,.25rem) * 1);--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.rich-text-editor__floating-menu-toolbar.toolbar{align-items:center;gap:calc(var(--spacing,.25rem) * 1);width:fit-content;display:flex}.rich-text-editor__suggestion-menu{width:calc(var(--spacing,.25rem) * 80);background-color:var(--overlay);padding:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-shadow:var(--overlay-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;border-radius:min(32px, var(--radius-3xl));outline-style:none;overflow:hidden}.rich-text-editor__suggestion-menu-list{gap:calc(var(--spacing,.25rem) * 1);padding:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;max-height:inherit;outline-style:none;flex-direction:column;display:flex;overflow-y:auto}.rich-text-editor__suggestion-menu-item{min-height:calc(var(--spacing,.25rem) * 12);align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 3);width:100%;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 2);text-align:start;color:var(--foreground);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease-out-quart), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out);cursor:var(--cursor-interactive);outline-style:none;display:flex;position:relative}.rich-text-editor__suggestion-menu-item:focus-visible,.rich-text-editor__suggestion-menu-item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.rich-text-editor__suggestion-menu-item:active{transform:scale(.98)}@media (hover:hover){.rich-text-editor__suggestion-menu-item:hover{background-color:var(--default)}}.rich-text-editor__suggestion-menu-item[data-selected=true]{background-color:var(--default)}.rich-text-editor__suggestion-menu-icon{width:calc(var(--spacing,.25rem) * 9);height:calc(var(--spacing,.25rem) * 9);background-color:var(--default);color:var(--muted);border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.rich-text-editor__suggestion-menu-item[data-selected=true] .rich-text-editor__suggestion-menu-icon{background-color:var(--overlay);color:var(--foreground);--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)}.rich-text-editor__suggestion-menu-item-content{min-width:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;flex:1;display:flex}.rich-text-editor__suggestion-menu-title{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);overflow:hidden}.rich-text-editor__suggestion-menu-description{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 4);line-height:calc(var(--spacing,.25rem) * 4);color:var(--muted);display:block;overflow:hidden}.rich-text-editor__suggestion-menu-empty{padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--muted)}.rich-text-editor__prosemirror .rich-text-editor__suggestion-decoration{border-radius:calc(var(--radius) * .5);background-color:var(--accent-soft);color:var(--accent)}.rich-text-editor__footer{min-height:calc(var(--spacing,.25rem) * 10);justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);display:flex}.rich-text-editor__character-count{color:var(--muted);--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,)}.rich-text-editor__character-count[data-over-limit=true]{color:var(--danger)}.rich-text-editor__link-popover{border-radius:calc(var(--radius) * 2);background-color:var(--overlay);--tw-shadow:var(--overlay-shadow);width:320px;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;outline-style:none}.rich-text-editor__link-popover-content{gap:calc(var(--spacing,.25rem) * 3);padding:calc(var(--spacing,.25rem) * 3);flex-direction:column;display:flex}.rich-text-editor__link-popover-trigger{display:inline-flex}.rich-text-editor__link-input{width:100%}.rich-text-editor__link-popover-actions{justify-content:flex-end;align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.rich-text-editor[data-disabled=true]{opacity:.6}.rich-text-editor[data-disabled=true] .rich-text-editor__shell{cursor:not-allowed}.rich-text-editor:not([data-disabled=true]) .rich-text-editor__shell{cursor:text}.rich-text-editor:not([data-disabled=true]) .rich-text-editor__toolbar,.rich-text-editor:not([data-disabled=true]) .rich-text-editor__footer{cursor:default}.rich-text-editor .ProseMirror-selectednode{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--accent);border-radius:.25rem}.segment{background-color:var(--default);padding:calc(var(--spacing,.25rem) * 1);border-radius:calc(var(--radius-2xl) + .25rem);align-items:center;display:inline-flex;position:relative}.segment__item{z-index:1;cursor:var(--cursor-interactive);height:calc(var(--spacing,.25rem) * 8);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);border-radius:calc(var(--radius) * 3);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:var(--muted);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:color .15s var(--ease-smooth), background-color .15s var(--ease-smooth), box-shadow .15s var(--ease-out), opacity .15s var(--ease-smooth);outline-style:none;display:flex;position:relative}.segment__item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.segment__item:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.segment__item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.segment__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.segment__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.segment__item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.segment__item[data-selected=true]{color:var(--segment-foreground)}.segment__item[data-selected=true] .segment__separator,.segment__item[data-selected=true]+.segment__item .segment__separator{opacity:0}.segment__item:disabled,.segment__item[data-disabled=true],.segment__item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}@media (hover:hover){.segment__item:not([data-selected=true]):not([data-disabled=true]):hover,.segment__item[data-hovered=true]:not([data-selected=true]):not([data-disabled=true]){opacity:.7}}.segment__item:focus-visible:not(:focus),.segment__item[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.segment__item svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);flex-shrink:0}.segment__separator{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.segment__separator{background-color:color-mix(in oklab, var(--muted) 25%, transparent)}}.segment__separator{pointer-events:none;width:1px;height:50%;transition:opacity .15s var(--ease-smooth);inset-inline-start:0;border-radius:4px;position:absolute;top:25%}.segment__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.segment__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.segment__separator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.segment__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.segment__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.segment__separator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.segment__item:first-child>.segment__separator{display:none}.segment__indicator{z-index:-1;border-radius:var(--radius-3xl);background-color:var(--segment);width:100%;height:100%;box-shadow:var(--shadow-surface);transition-property:translate,width,height;transition-duration:.25s;transition-timing-function:var(--ease-out-fluid);position:absolute;top:0;left:0}.segment__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.segment__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.segment__indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.segment__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.segment__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.segment__indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.segment--sm{padding:calc(var(--spacing,.25rem) * .5)}.segment__item--sm{height:calc(var(--spacing,.25rem) * 7);padding-inline:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.segment__item--md{height:calc(var(--spacing,.25rem) * 8);padding-inline:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.segment__item--lg{height:calc(var(--spacing,.25rem) * 10);padding-inline:calc(var(--spacing,.25rem) * 5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.segment--ghost{padding:calc(var(--spacing,.25rem) * 0);background-color:#0000}.segment__item--ghost[data-selected=true]{color:var(--accent-foreground)}.segment__indicator--ghost{background-color:var(--accent);box-shadow:none}.stepper{--stepper-indicator-size:28px;--stepper-separator-size:2px;--stepper-vertical-gap:16px;--stepper-active-color:var(--color-accent);--stepper-complete-color:var(--color-accent);--stepper-complete-fg:var(--color-accent-foreground);--stepper-inactive-border:var(--color-border);--stepper-inactive-fg:var(--color-muted);margin:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * 0);list-style-type:none}.stepper--horizontal{align-items:flex-start;display:flex}.stepper--vertical{flex-direction:column;display:flex}.stepper__step{position:relative}.stepper__step--horizontal{flex-direction:column;flex:1;align-items:center;display:flex;position:relative;overflow:visible}.stepper__step--vertical{padding-bottom:var(--stepper-vertical-gap);flex-direction:column;display:flex;position:relative}.stepper__step--vertical:last-child{padding-bottom:0}.stepper__step-button{border-style:var(--tw-border-style);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.1s;--tw-outline-style:none;-webkit-tap-highlight-color:transparent;border-radius:calc(var(--radius) * 1);padding:calc(var(--spacing,.25rem) * 0);transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);background-color:#0000;border-width:0;outline-style:none;align-items:center;transition-duration:.1s;display:flex}.stepper__step-button:is([data-reduce-motion=true],[data-reduce-motion=true] *),.stepper__step-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.stepper__step-button:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.stepper__step-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.stepper__step-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.stepper__step-button:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.stepper__step-button[data-clickable=true]{cursor:var(--cursor-interactive)}@media (hover:hover){:is(.stepper__step-button[data-clickable=true]:hover,.stepper__step-button[data-clickable=true][data-hovered=true]) .stepper__indicator{opacity:.8}}.stepper__step-button[data-clickable=true]:active,.stepper__step-button[data-clickable=true][data-pressed=true]{opacity:.8}.stepper__step-button[data-clickable=true]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.stepper__step-button--horizontal{z-index:10;align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);flex-direction:column;position:relative}.stepper__step-button--vertical{z-index:10;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 2.5);flex-direction:row;position:relative}.stepper__indicator{width:var(--stepper-indicator-size);height:var(--stepper-indicator-size);border:2px solid;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.stepper__indicator[data-status=inactive]{border-color:var(--stepper-inactive-border);color:var(--stepper-inactive-fg);background-color:#0000}.stepper__indicator[data-status=active]{border-color:var(--stepper-active-color);color:var(--stepper-active-color);background-color:#0000}.stepper__indicator[data-status=complete]{background-color:var(--stepper-complete-color);border-color:var(--stepper-complete-color);color:var(--stepper-complete-fg);--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);animation:.3s ease-out stepper-indicator-complete}.stepper__indicator[data-status=complete]:is([data-reduce-motion=true],[data-reduce-motion=true] *),.stepper__indicator[data-status=complete]:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.stepper__indicator[data-status=complete]:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){.stepper__indicator[data-status=complete]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.stepper__indicator[data-status=complete]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.stepper__indicator[data-status=complete]:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}@keyframes stepper-indicator-complete{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.stepper__indicator--sm{--tw-font-weight:var(--font-weight-semibold,600);font-size:10px;font-weight:var(--font-weight-semibold,600)}.stepper__indicator--md{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.stepper__indicator--lg{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.stepper__separator{display:flex}.stepper__separator--horizontal{top:calc(var(--stepper-indicator-size) / 2 - var(--stepper-separator-size) / 2);position:absolute;inset-inline-start:calc(50% + var(--stepper-indicator-size) / 2);inset-inline-end:calc(-50% + var(--stepper-indicator-size) / 2)}.stepper__separator--vertical{top:var(--stepper-indicator-size);bottom:0;position:absolute;inset-inline-start:calc(var(--stepper-indicator-size) / 2 - var(--stepper-separator-size) / 2)}.stepper__separator-track{background-color:var(--separator);position:relative;overflow:hidden}.stepper__separator-track--horizontal{width:100%;height:var(--stepper-separator-size)}.stepper__separator-track--vertical{height:100%;width:var(--stepper-separator-size)}.stepper__separator-fill{inset:calc(var(--spacing,.25rem) * 0);background-color:var(--stepper-complete-color);position:absolute}.stepper__separator-fill--horizontal{transform:scaleX(var(--stepper-separator-progress,0));transform-origin:0;transition:transform .3s}.stepper__separator-fill--horizontal:dir(rtl){transform-origin:100%}.stepper__separator-fill--vertical{transform:scaleY(var(--stepper-separator-progress,0));transform-origin:top;transition:transform .3s}.stepper__content{flex-direction:column;display:flex}.stepper__content--horizontal{text-align:center;align-items:center}.stepper__content--vertical{text-align:start;min-height:var(--stepper-indicator-size);align-items:flex-start}.stepper__title{--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--foreground);transition:color .3s}.stepper__step[data-status=inactive] .stepper__title{color:var(--muted)}.stepper__title--sm{font-size:11px}.stepper__title--md{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.stepper__title--lg{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.stepper__description{--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);color:var(--muted);transition:color .3s}.stepper__step[data-status=inactive] .stepper__description{opacity:.6}.stepper__description--sm{margin-top:calc(var(--spacing,.25rem) * .5);font-size:10px}.stepper__description--md,.stepper__description--lg{margin-top:calc(var(--spacing,.25rem) * .5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.stepper__icon{justify-content:center;align-items:center;display:flex}.stepper__icon svg{width:55%;height:55%}.stepper__icon [data-slot=stepper-default-checkmark]{width:44%;height:44%}[data-slot=stepper-default-checkmark]{transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}[data-slot=stepper-default-checkmark] polyline{stroke-dasharray:22;stroke-dashoffset:0;animation:.2s ease-out 50ms both stepper-checkmark-draw}[data-slot=stepper-default-checkmark] polyline:is([data-reduce-motion=true],[data-reduce-motion=true] *),[data-slot=stepper-default-checkmark] polyline:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,[data-slot=stepper-default-checkmark] polyline:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){[data-slot=stepper-default-checkmark] polyline:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),[data-slot=stepper-default-checkmark] polyline:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,[data-slot=stepper-default-checkmark] polyline:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}@keyframes stepper-checkmark-draw{0%{stroke-dashoffset:22px}to{stroke-dashoffset:0}}.stepper--sm{--stepper-indicator-size:22px;--stepper-vertical-gap:12px}.stepper--md{--stepper-indicator-size:28px;--stepper-vertical-gap:16px}.stepper--lg{--stepper-indicator-size:36px;--stepper-vertical-gap:24px}@property --shimmer-track-height{syntax:"";inherits:true;initial-value:200px}@property --shimmer-angle{syntax:"";inherits:true;initial-value:15deg}@keyframes text-shimmer{0%{background-position:100% 0}}.text-shimmer{--shimmer-track-height:1em;--_speed:200;--_spread:calc(4ch + 80px);--_bg:oklch(from currentColor l c h / calc(alpha * .45));--_fg:currentColor;--_gradient-width:calc(var(--_spread) + var(--shimmer-track-height) * tan(var(--shimmer-angle)));--_active-distance:calc(var(--shimmer-track-width,200px) + var(--_gradient-width));--_duration:calc(var(--_active-distance) / var(--_speed) / 1px * 1000);--_repeat-delay:calc(20000 / var(--_speed));--_repeat-delay-px:calc(var(--_repeat-delay) * var(--_active-distance) / var(--_duration));--_xy-offset-px:calc((var(--shimmer-x,0) + var(--shimmer-y,0) * tan(var(--shimmer-angle))) * 1px);--_bg-width:calc(100% + var(--shimmer-track-width,100%) + var(--_gradient-width) + var(--_repeat-delay-px));--_position:calc(var(--shimmer-track-width,(100% - var(--_gradient-width) - var(--_repeat-delay-px)) / 2) + var(--_gradient-width) / 2 + var(--_repeat-delay-px) - var(--_xy-offset-px));--_mix-96:var(--_fg);width:fit-content;display:inline-block;position:relative}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-96:color-mix(in oklch, var(--_fg), var(--_bg) 96%)}}.text-shimmer{--_mix-83:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-83:color-mix(in oklch, var(--_fg), var(--_bg) 83%)}}.text-shimmer{--_mix-67:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-67:color-mix(in oklch, var(--_fg), var(--_bg) 67%)}}.text-shimmer{--_mix-50:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-50:color-mix(in oklch, var(--_fg), var(--_bg) 50%)}}.text-shimmer{--_mix-33:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-33:color-mix(in oklch, var(--_fg), var(--_bg) 33%)}}.text-shimmer{--_mix-17:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-17:color-mix(in oklch, var(--_fg), var(--_bg) 17%)}}.text-shimmer{--_mix-4:var(--_fg)}@supports (color:color-mix(in lab, red, red)){.text-shimmer{--_mix-4:color-mix(in oklch, var(--_fg), var(--_bg) 4%)}}.text-shimmer{background:linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_bg) calc(var(--_position) - var(--_spread) * .5), var(--_mix-96) calc(var(--_position) - var(--_spread) * .44), var(--_mix-83) calc(var(--_position) - var(--_spread) * .37), var(--_mix-67) calc(var(--_position) - var(--_spread) * .31), var(--_mix-50) calc(var(--_position) - var(--_spread) * .25), var(--_mix-33) calc(var(--_position) - var(--_spread) * .19), var(--_mix-17) calc(var(--_position) - var(--_spread) * .12), var(--_mix-4) calc(var(--_position) - var(--_spread) * .06), var(--_fg) var(--_position), var(--_mix-4) calc(var(--_position) + var(--_spread) * .06), var(--_mix-17) calc(var(--_position) + var(--_spread) * .12), var(--_mix-33) calc(var(--_position) + var(--_spread) * .19), var(--_mix-50) calc(var(--_position) + var(--_spread) * .25), var(--_mix-67) calc(var(--_position) + var(--_spread) * .31), var(--_mix-83) calc(var(--_position) + var(--_spread) * .37), var(--_mix-96) calc(var(--_position) + var(--_spread) * .44), var(--_bg) calc(var(--_position) + var(--_spread) * .5)) 0 0 / var(--_bg-width) 100% no-repeat;-webkit-text-fill-color:transparent;animation:1s linear infinite backwards text-shimmer;animation-duration:calc((var(--_duration) + var(--_repeat-delay)) * 1ms);-webkit-background-clip:text;background-clip:text}.dark .text-shimmer,[data-theme=dark] .text-shimmer{--_fg:oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4))}@-moz-document url-prefix(){.text-shimmer{--_duration:calc(375000 / var(--_speed))}}@media (prefers-reduced-motion:reduce){.text-shimmer{-webkit-text-fill-color:unset;color:currentColor;opacity:.6;background:0 0;animation:none}}.timeline{--timeline-spacing:var(--spacing,.25rem);--timeline-marker-size:calc(var(--timeline-spacing) * 7);--timeline-connector-size:calc(var(--timeline-spacing) * .5);--timeline-rail-width:calc(var(--timeline-spacing) * 7);--timeline-gap:calc(var(--timeline-spacing) * 3.5);--timeline-item-gap:calc(var(--timeline-spacing) * 4);--timeline-marker-border-width:calc(var(--timeline-spacing) * .25);--timeline-marker-border-width-lg:calc(var(--timeline-spacing) * .5);--timeline-current-color:var(--color-accent);--timeline-marker-border:var(--color-border);--timeline-marker-fg:var(--color-muted);--timeline-connector-color:var(--color-separator);margin:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * 0);list-style-type:none}.timeline--axis-start,.timeline--axis-center{flex-direction:column;display:flex}.timeline--compact{--timeline-item-gap:calc(var(--timeline-spacing) * 3)}.timeline--comfortable{--timeline-item-gap:calc(var(--timeline-spacing) * 4)}.timeline--sm{--timeline-marker-size:calc(var(--timeline-spacing) * 5.5);--timeline-rail-width:calc(var(--timeline-spacing) * 5.5);--timeline-gap:calc(var(--timeline-spacing) * 2.5)}.timeline--md{--timeline-marker-size:calc(var(--timeline-spacing) * 7);--timeline-rail-width:calc(var(--timeline-spacing) * 7);--timeline-gap:calc(var(--timeline-spacing) * 3.5)}.timeline--lg{--timeline-marker-size:calc(var(--timeline-spacing) * 9);--timeline-rail-width:calc(var(--timeline-spacing) * 9);--timeline-gap:calc(var(--timeline-spacing) * 4.5)}.timeline__item{padding-bottom:var(--timeline-item-gap);display:grid;position:relative}.timeline__item[data-last=true]{padding-bottom:0}.timeline--axis-start .timeline__item{grid-template-columns:var(--timeline-rail-width) minmax(0, 1fr) auto;column-gap:var(--timeline-gap)}.timeline--axis-center .timeline__item{grid-template-columns:minmax(0, 1fr) var(--timeline-rail-width) minmax(0, 1fr);column-gap:var(--timeline-gap)}.timeline__rail{min-height:var(--timeline-marker-size);grid-row:1/span 20;justify-content:center;display:flex;position:relative}.timeline--axis-start .timeline__rail{grid-column:1}.timeline--axis-center .timeline__rail{grid-column:2}.timeline__marker{z-index:10;border:var(--timeline-marker-border-width) solid var(--timeline-marker-border);color:var(--timeline-marker-fg);height:var(--timeline-marker-size);width:var(--timeline-marker-size);background-color:#0000;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.timeline__marker svg{width:55%;height:55%}.timeline__marker--sm{--tw-font-weight:var(--font-weight-semibold,600);font-size:10px;font-weight:var(--font-weight-semibold,600)}.timeline__marker--md{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.timeline__marker--lg{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);border-width:var(--timeline-marker-border-width-lg)}.timeline__marker[data-status=default],.timeline__marker[data-status=muted]{border-color:var(--timeline-marker-border);color:var(--timeline-marker-fg);background-color:#0000}.timeline__marker[data-status=muted]{opacity:.7}.timeline__marker[data-status=current]{background-color:var(--accent-soft);color:var(--accent);border-color:var(--timeline-current-color)}.timeline__marker[data-status=success]{background-color:var(--color-success)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=success]{background-color:color-mix(in srgb, var(--color-success) 12%, transparent)}}.timeline__marker[data-status=success]{border-color:var(--color-success)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=success]{border-color:color-mix(in srgb, var(--color-success) 55%, var(--timeline-marker-border))}}.timeline__marker[data-status=success]{color:var(--color-success)}.timeline__marker[data-status=warning]{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=warning]{background-color:color-mix(in srgb, var(--color-warning) 12%, transparent)}}.timeline__marker[data-status=warning]{border-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=warning]{border-color:color-mix(in srgb, var(--color-warning) 55%, var(--timeline-marker-border))}}.timeline__marker[data-status=warning]{color:var(--color-warning)}.timeline__marker[data-status=danger]{background-color:var(--color-danger)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=danger]{background-color:color-mix(in srgb, var(--color-danger) 12%, transparent)}}.timeline__marker[data-status=danger]{border-color:var(--color-danger)}@supports (color:color-mix(in lab, red, red)){.timeline__marker[data-status=danger]{border-color:color-mix(in srgb, var(--color-danger) 55%, var(--timeline-marker-border))}}.timeline__marker[data-status=danger]{color:var(--color-danger)}.timeline__connector{background-color:var(--timeline-connector-color);bottom:calc(var(--timeline-item-gap) * -1);left:calc(50% - var(--timeline-connector-size) / 2);top:var(--timeline-marker-size);width:var(--timeline-connector-size);position:absolute}.timeline__item[data-last=true] .timeline__connector:not([data-force]){display:none}.timeline__content{min-width:calc(var(--spacing,.25rem) * 0);min-height:var(--timeline-marker-size);flex-direction:column;display:flex}.timeline__item--align-start .timeline__content{justify-content:flex-start}.timeline__item--align-center .timeline__content{justify-content:center}.timeline--axis-start .timeline__content{grid-column:2}.timeline--axis-center .timeline__content[data-side=start]{text-align:right;grid-column:1;justify-self:end;align-items:flex-end}.timeline--axis-center .timeline__content[data-side=end]{text-align:left;grid-column:3;justify-self:start;align-items:flex-start}.trend-chip__indicator{flex-shrink:0}.trend-chip__value{font-variant-numeric:tabular-nums}.trend-chip__suffix{color:var(--muted)}.trend-chip--sm .trend-chip__indicator{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.trend-chip--md .trend-chip__indicator{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.trend-chip--lg .trend-chip__indicator{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.widget{border-radius:calc(var(--radius) * 2);background-color:var(--surface-secondary);flex-direction:column;display:flex;overflow:hidden}.widget__header{margin-top:calc(var(--spacing,.25rem) * .5);min-height:calc(var(--spacing,.25rem) * 8);justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);display:flex}.widget__title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--foreground)}.widget__description{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.widget__content{margin-inline:calc(var(--spacing,.25rem) * 1.5);margin-bottom:calc(var(--spacing,.25rem) * 1.5);border-radius:calc(var(--radius) * 1.5);background-color:var(--surface);padding:calc(var(--spacing,.25rem) * 4);flex:1;overflow:hidden}.widget__content:first-child{margin-top:calc(var(--spacing,.25rem) * 1.5)}.widget__content{box-shadow:0 0 0 1px oklch(0% 0 0/.03),0 1px 2px oklch(0% 0 0/.04)}.widget__footer{align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-top:calc(var(--spacing,.25rem) * 3);padding-bottom:calc(var(--spacing,.25rem) * 4);display:flex}.widget__legend{align-items:center;gap:calc(var(--spacing,.25rem) * 3);display:flex}.widget__legend-item{align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);display:flex}.widget__legend-item-dot{width:calc(var(--spacing,.25rem) * 2.5);height:calc(var(--spacing,.25rem) * 2.5);border-radius:3.40282e38px;flex-shrink:0}.widget__legend-item-label{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted)}.sidebar__provider{width:100%;min-height:100svh;display:flex}.sidebar__provider:has(.sidebar__offcanvas-wrapper){overflow-x:clip}.sidebar{top:calc(var(--spacing,.25rem) * 0);border-color:var(--border);background-color:var(--background);--sidebar-width:240px;--sidebar-width-collapsed:48px;--sidebar-duration:.2s;--sidebar-ease:ease;--sidebar-edge-outline:#00000014;height:100svh;width:var(--sidebar-width);min-width:var(--sidebar-width-collapsed);transition:width var(--sidebar-duration) var(--sidebar-ease), box-shadow .15s var(--ease-out);flex-direction:column;flex-shrink:0;display:flex;position:sticky}@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}.dark .sidebar,[data-theme=dark] .sidebar{--sidebar-edge-outline:#ffffff1a}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]){width:var(--sidebar-width-collapsed);overflow-x:clip}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__header,.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__footer{padding-inline:calc(var(--spacing,.25rem) * 1.5)}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__header{align-items:center}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__header>*{justify-content:center;gap:calc(var(--spacing,.25rem) * 0);width:auto;padding:calc(var(--spacing,.25rem) * 0)}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__header [data-sidebar=label]{display:none}.sidebar[data-state=collapsed]:not([data-collapsible=offcanvas]) .sidebar__content{padding-inline:calc(var(--spacing,.25rem) * 1.5)}.sidebar[data-collapsible=icon] [data-sidebar=label],.sidebar[data-collapsible=icon] [data-slot=chip]{white-space:nowrap;visibility:visible;max-width:100%;transition:opacity var(--sidebar-duration) var(--sidebar-ease), max-width var(--sidebar-duration) var(--sidebar-ease), margin var(--sidebar-duration) var(--sidebar-ease), visibility 0s linear;overflow:hidden}.sidebar[data-collapsible=icon][data-state=collapsed] [data-sidebar=label],.sidebar[data-collapsible=icon][data-state=collapsed] [data-slot=chip]{opacity:0;pointer-events:none;visibility:hidden;max-width:0;transition-delay:0s, 0s, 0s, var(--sidebar-duration);margin:0}.sidebar[data-collapsible=icon] [data-slot=list-box-item]{width:100%}.sidebar[data-collapsible=icon][data-state=collapsed] [data-slot=list-box-item]{justify-content:center;gap:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * 2.5)}.sidebar__offcanvas-wrapper{--sidebar-width:240px;--sidebar-duration:.2s;--sidebar-ease:ease;width:var(--sidebar-width);transition:width var(--sidebar-duration) var(--sidebar-ease);flex-shrink:0;position:relative}@media (prefers-reduced-motion:reduce){.sidebar__offcanvas-wrapper{transition:none}}.sidebar__offcanvas-wrapper[data-side=right]{order:1}.sidebar__offcanvas-wrapper:has(.sidebar--floating){width:calc(var(--sidebar-width) + var(--spacing) * 4)}.sidebar__offcanvas-wrapper[data-state=collapsed]{width:0}.sidebar[data-collapsible=offcanvas]{z-index:20;transition:translate var(--sidebar-duration) var(--sidebar-ease), visibility var(--sidebar-duration)}@media (prefers-reduced-motion:reduce){.sidebar[data-collapsible=offcanvas]{transition:none}}.sidebar[data-collapsible=offcanvas][data-side=right]{left:auto;right:0}.sidebar[data-state=collapsed][data-collapsible=offcanvas]{width:var(--sidebar-width);visibility:hidden;translate:-100%}.sidebar[data-state=collapsed][data-collapsible=offcanvas][data-side=right]{translate:100%}@media (max-width:768px){.sidebar,.sidebar__offcanvas-wrapper{display:none}}.sidebar--default{box-shadow:inset -1px 0 0 var(--sidebar-edge-outline)}.sidebar--default.sidebar--right{box-shadow:inset 1px 0 0 var(--sidebar-edge-outline)}@media (hover:hover){.sidebar--default:has(.sidebar__rail:hover){box-shadow:inset -1px 0 0 var(--color-default-hover)}.sidebar--default.sidebar--right:has(.sidebar__rail:hover){box-shadow:inset 1px 0 0 var(--color-default-hover)}}.sidebar--default:has(.sidebar__rail:focus-visible){box-shadow:inset -1px 0 0 var(--color-default-hover)}.sidebar--default.sidebar--right:has(.sidebar__rail:focus-visible){box-shadow:inset 1px 0 0 var(--color-default-hover)}.sidebar--floating{margin:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);background-color:var(--surface);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px 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);border-width:1px;height:calc(100svh - 1rem)}.sidebar--inset{--tw-border-style:none;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000;border-style:none}.sidebar--right{order:1}.sidebar__header{gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 4);padding-top:calc(var(--spacing,.25rem) * 4);padding-bottom:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.sidebar__content{min-height:calc(var(--spacing,.25rem) * 0);gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.sidebar__footer{gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 3);padding-top:calc(var(--spacing,.25rem) * 2);padding-bottom:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}.sidebar__group{gap:calc(var(--spacing,.25rem) * 1);flex-direction:column;display:flex}.sidebar__group+.sidebar__group{margin-top:calc(var(--spacing,.25rem) * 2)}.sidebar__group-label{text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);--tw-tracking:var(--tracking-normal,0em);letter-spacing:var(--tracking-normal,0em);color:var(--muted);-webkit-user-select:none;user-select:none;transition:opacity var(--sidebar-duration) var(--sidebar-ease), width var(--sidebar-duration) var(--sidebar-ease);overflow:hidden}@media (prefers-reduced-motion:reduce){.sidebar__group-label{transition:none}}.sidebar[data-state=collapsed] .sidebar__group-label{display:none}.sidebar__menu{gap:calc(var(--spacing,.25rem) * .5);--tw-outline-style:none;forced-color-adjust:none;--sidebar-menu-indent:calc(var(--spacing) * 4);--sidebar-menu-guide-color:currentColor;outline-style:none;flex-direction:column;display:flex}@supports (color:color-mix(in lab, red, red)){.sidebar__menu{--sidebar-menu-guide-color:color-mix(in srgb, currentColor 10%, transparent)}}.sidebar__menu{--sidebar-menu-row-gap:calc(var(--spacing) * .5)}.sidebar__menu[data-focus-visible]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.sidebar__menu-section{gap:calc(var(--spacing,.25rem) * .5);flex-direction:column;display:flex}.sidebar__menu-section:not(:first-child){margin-top:calc(var(--spacing,.25rem) * 3)}.sidebar__menu-header{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);--tw-tracking:var(--tracking-wider,.05em);letter-spacing:var(--tracking-wider,.05em);color:var(--muted);text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar[data-state=collapsed] .sidebar__menu-header{display:none}.sidebar__menu-item{width:100%;color:var(--foreground);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s var(--ease-out);outline-style:none;justify-content:flex-start;align-items:center;display:flex;position:relative}.sidebar__menu-item:is([data-reduce-motion=true],[data-reduce-motion=true] *),.sidebar__menu-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.sidebar__menu-item:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.sidebar__menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.sidebar__menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.sidebar__menu-item:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.sidebar__menu-item{cursor:var(--cursor-interactive);--sidebar-menu-item-offset:0px;--sidebar-menu-guide-count:0}.sidebar__menu-item:disabled,.sidebar__menu-item[aria-disabled=true]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}.sidebar__menu:is([data-guide-lines=always],[data-guide-lines=hover]) .sidebar__menu-item:before{content:"";top:calc(var(--sidebar-menu-row-gap) * -.5);bottom:calc(var(--sidebar-menu-row-gap) * -.5);left:calc(var(--sidebar-menu-indent) / 2);width:calc(var(--sidebar-menu-guide-count) * var(--sidebar-menu-indent));pointer-events:none;background-image:repeating-linear-gradient(to right, var(--sidebar-menu-guide-color) 0 1px, transparent 1px var(--sidebar-menu-indent));opacity:1;position:absolute}.sidebar__menu[data-guide-lines=hover] .sidebar__menu-item:before{opacity:0;transition:opacity .15s}.sidebar__menu[data-guide-lines=hover]:hover .sidebar__menu-item:before{opacity:1}.sidebar__menu-item-content{min-height:calc(var(--spacing,.25rem) * 9);width:100%;min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:calc(var(--radius) * 2);padding-block:calc(var(--spacing,.25rem) * 1.5);width:calc(100% - var(--sidebar-menu-item-offset));margin-inline-start:var(--sidebar-menu-item-offset);padding-inline:.5rem;display:flex;overflow:hidden}@media (hover:hover){.sidebar__menu-item:hover .sidebar__menu-item-content,.sidebar__menu-item[data-hovered=true] .sidebar__menu-item-content{background-color:var(--default)}}.sidebar__menu-item:focus-visible:not(:focus) .sidebar__menu-item-content,.sidebar__menu-item[data-focus-visible=true] .sidebar__menu-item-content{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.sidebar__menu-item[aria-level="2"]{--sidebar-menu-item-offset:var(--sidebar-menu-indent);--sidebar-menu-guide-count:1}.sidebar__menu-item[aria-level="3"]{--sidebar-menu-item-offset:calc(var(--sidebar-menu-indent) * 2);--sidebar-menu-guide-count:2}.sidebar__menu-item[aria-level="4"]{--sidebar-menu-item-offset:calc(var(--sidebar-menu-indent) * 3);--sidebar-menu-guide-count:3}.sidebar__menu-item[aria-level="5"]{--sidebar-menu-item-offset:calc(var(--sidebar-menu-indent) * 4);--sidebar-menu-guide-count:4}.sidebar__menu-item[data-current=true] .sidebar__menu-item-content,.sidebar__menu-item:is(:has(.sidebar__menu-actions:hover),:has(.sidebar__menu-action:active),:has(.sidebar__menu-action[data-pressed=true]),:has(.sidebar__menu-actions [aria-expanded=true])) .sidebar__menu-item-content{background-color:var(--default)}.sidebar__menu-item[data-current=true] .sidebar__menu-label{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.sidebar__menu-trigger{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;cursor:var(--cursor-interactive);outline-style:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar__menu-item:not([data-has-child-items]) .sidebar__menu-trigger{display:none}.sidebar__menu-indicator{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5);color:var(--muted);cursor:inherit;flex-shrink:0;transition:rotate .15s;rotate:0deg}.sidebar__menu-indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *),.sidebar__menu-indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.sidebar__menu-indicator:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{animation:none}@media (prefers-reduced-motion:reduce){.sidebar__menu-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.sidebar__menu-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.sidebar__menu-indicator:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{animation:none}}.sidebar__menu-indicator:dir(rtl){rotate:180deg}.sidebar__menu-item[data-expanded] .sidebar__menu-indicator{rotate:90deg}.sidebar__menu-icon{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5);color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar__menu-icon svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.sidebar__menu-item[data-current=true] .sidebar__menu-icon,.sidebar__menu-item[data-current=true] .sidebar__menu-chip{color:var(--foreground)}.sidebar__menu-label{pointer-events:none;min-width:calc(var(--spacing,.25rem) * 0);align-items:center;gap:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--foreground);-webkit-user-select:none;user-select:none;flex:1;display:flex}.sidebar__menu-label-text{min-width:calc(var(--spacing,.25rem) * 0);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.sidebar__menu-actions{align-items:center;gap:calc(var(--spacing,.25rem) * 1);flex-shrink:0;display:none}.sidebar__menu-item:is(:hover,[data-current=true],[data-hovered=true],:has(.sidebar__menu-action:focus-visible),:has(.sidebar__menu-action[data-focus-visible=true]),:has(.sidebar__menu-actions [aria-expanded=true])) .sidebar__menu-actions,.sidebar__mobile .sidebar__menu-actions{display:flex}.sidebar__menu-chip{pointer-events:none;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--muted);--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,);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar__menu-action{isolation:isolate;transform-origin:50%;transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);border-radius:calc(var(--radius) * 1);padding:calc(var(--spacing,.25rem) * 1);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease-smooth), background-color .1s var(--ease-out), box-shadow .1s var(--ease-out);outline-style:none;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.sidebar__menu-action:is([data-reduce-motion=true],[data-reduce-motion=true] *),.sidebar__menu-action:is([data-reduce-motion=true],[data-reduce-motion=true] *):before,.sidebar__menu-action:is([data-reduce-motion=true],[data-reduce-motion=true] *):after{transition-property:none}@media (prefers-reduced-motion:reduce){.sidebar__menu-action:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)),.sidebar__menu-action:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):before,.sidebar__menu-action:not(:is([data-reduce-motion=true],[data-reduce-motion=true] *)):after{transition-property:none}}.sidebar__menu-action{cursor:var(--cursor-interactive);--button-bg:transparent;--button-bg-hover:var(--color-default-hover);--button-bg-pressed:var(--color-default-hover);--button-fg:var(--color-default-foreground);background-color:var(--button-bg);color:var(--button-fg)}@media (hover:hover){.sidebar__menu-action:hover,.sidebar__menu-action[data-hovered=true]{background-color:var(--button-bg-hover)}}.sidebar__menu-action:active,.sidebar__menu-action[data-pressed=true]{background-color:var(--button-bg-pressed);transform:scale(.98)}.sidebar__menu-action:focus-visible,.sidebar__menu-action[data-focus-visible=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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);--tw-ring-color:var(--focus);--tw-ring-offset-width:var(--ring-offset-width);--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background);--tw-outline-style:none;outline-style:none}.sidebar__menu-action svg{pointer-events:none;width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4);flex-shrink:0;align-self:center}.sidebar__menu-actions [aria-expanded=true] .sidebar__menu-action{background-color:var(--button-bg-hover)}.sidebar[data-collapsible=icon] .sidebar__menu-item{width:100%}.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-item-content{padding-inline:calc(var(--spacing,.25rem) * 0);justify-content:center;padding-inline-start:0}.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-trigger,.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-actions,.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-label,.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-chip,.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-action{display:none}.sidebar[data-collapsible=icon][data-state=collapsed] .sidebar__menu-item:before{content:none}.sidebar__separator{margin-block:calc(var(--spacing,.25rem) * 2);width:auto}.sidebar__rail{inset-block:calc(var(--spacing,.25rem) * 0);z-index:10;width:calc(var(--spacing,.25rem) * 4);appearance:none;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 0);--tw-outline-style:none;-webkit-tap-highlight-color:transparent;background-color:#0000;border-width:0;outline-style:none;position:absolute}.sidebar--left[data-state=collapsed] .sidebar__rail{cursor:e-resize}.sidebar--left[data-state=expanded] .sidebar__rail,.sidebar--right[data-state=collapsed] .sidebar__rail{cursor:w-resize}.sidebar--right[data-state=expanded] .sidebar__rail{cursor:e-resize}.sidebar--left .sidebar__rail{right:-2px}.sidebar--right .sidebar__rail{left:-2px}.sidebar__main{min-height:100svh;min-width:calc(var(--spacing,.25rem) * 0);flex-direction:column;flex:1;display:flex;position:relative}.sidebar__provider:has(.sidebar--inset) .sidebar__main{margin:calc(var(--spacing,.25rem) * 2);border-radius:calc(var(--radius) * 2);border-style:var(--tw-border-style);background-color:var(--surface);--tw-shadow:var(--surface-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);min-height:calc(100svh - 1rem);transition:margin var(--sidebar-duration,.2s) var(--sidebar-ease,ease);border-width:1px;margin-inline-start:calc(var(--spacing,.25rem) * 0)}.sidebar__provider[data-state=collapsed]:has(.sidebar--inset) .sidebar__main{margin-inline-start:calc(var(--spacing,.25rem) * 2)}.sidebar__mobile-sheet[data-sheet-drawer-direction=left],.sidebar__mobile-sheet[data-sheet-drawer-direction=right]{border-radius:0;width:80vw;max-width:500px}.sidebar__mobile-dialog{border-radius:0}.sidebar__mobile{height:100%;min-height:calc(var(--spacing,.25rem) * 0);flex-direction:column;display:flex}.sidebar__mobile>.sidebar__header{padding-top:calc(var(--spacing,.25rem) * 4)}.sidebar__mobile>.sidebar__content{min-height:calc(var(--spacing,.25rem) * 0);flex:1}.sidebar__mobile>.sidebar__footer{padding-bottom:calc(var(--spacing,.25rem) * 4)}.sidebar__mobile-sheet[data-sheet-drawer-direction=left] .sidebar__mobile-dialog,.sidebar__mobile-sheet[data-sheet-drawer-direction=right] .sidebar__mobile-dialog{width:100%;max-width:none}.sidebar__mobile-sheet[data-sheet-drawer-direction=left]:after,.sidebar__mobile-sheet[data-sheet-drawer-direction=right]:after{border-radius:0}.sidebar__mobile-sheet[data-sheet-drawer-direction=left] .sidebar__mobile-dialog,.sidebar__mobile-sheet[data-sheet-drawer-direction=right] .sidebar__mobile-dialog{overflow:hidden}.sidebar__pages{flex-direction:column;width:100%;display:flex;position:relative;overflow:clip}.sidebar__page{gap:calc(var(--spacing,.25rem) * 1);will-change:transform;flex-direction:column;width:100%;display:flex;inset-block-start:0;inset-inline-start:0}.sidebar__page[data-active=true]{position:relative}.sidebar__page[data-active=false]{pointer-events:none;position:absolute}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value: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-font-weight{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-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-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-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}} @property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }} #cc-main{background:transparent;color:var(--cc-primary-color);font-family:var(--cc-font-family);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.15;position:relative;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;position:fixed;z-index:var(--cc-z-index)}#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span{all:unset;box-sizing:border-box}#cc-main .pm__badge,#cc-main button{all:initial;box-sizing:border-box;color:unset;visibility:unset}#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr{all:revert;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-modal-border-radius:.5rem;--cc-btn-border-radius:.4rem;--cc-modal-transition-duration:.25s;--cc-link-color:var(--cc-btn-primary-bg);--cc-modal-margin:1rem;--cc-z-index:2147483647;--cc-bg:#fff;--cc-primary-color:#2c2f31;--cc-secondary-color:#5e6266;--cc-btn-primary-bg:#30363c;--cc-btn-primary-color:#fff;--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#000;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#d4dae0;--cc-btn-secondary-hover-color:#000;--cc-btn-secondary-hover-border-color:#d4dae0;--cc-separator-border-color:#f0f4f7;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#667481;--cc-toggle-on-knob-bg:#fff;--cc-toggle-off-knob-bg:var(--cc-toggle-on-knob-bg);--cc-toggle-enabled-icon-color:var(--cc-bg);--cc-toggle-disabled-icon-color:var(--cc-bg);--cc-toggle-readonly-bg:#d5dee2;--cc-toggle-readonly-knob-bg:#fff;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:var(--cc-cookie-category-block-bg);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-border:#f0f4f7;--cc-cookie-category-block-hover-bg:#e9eff4;--cc-cookie-category-block-hover-border:#e9eff4;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:#dee4e9;--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:var(--cc-btn-secondary-bg);--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#e4eaed;--cc-pm-toggle-border-radius:4em}#cc-main.cc--rtl{direction:rtl}#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong{font-weight:600}#cc-main button>span{pointer-events:none}#cc-main .cc__link,#cc-main a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600;position:relative;transition:background-size .25s,color .25s ease}#cc-main .cc__link:hover,#cc-main a:hover{background-size:100% 1px;color:var(--cc-primary-color)}#cc-main .cc__link{color:var(--cc-link-color)}#cc-main .cm__desc,#cc-main .pm__body{overscroll-behavior:auto contain;scrollbar-width:thin}@media screen and (min-width:640px){#cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track{all:revert}#cc-main ::-webkit-scrollbar-thumb{-webkit-background-clip:padding-box;background-clip:padding-box;background:var(--cc-toggle-readonly-bg);border:.25rem solid var(--cc-bg);border-radius:1rem}#cc-main ::-webkit-scrollbar-thumb:hover{background:var(--cc-toggle-off-bg)}#cc-main ::-webkit-scrollbar{background:transparent;width:12px}}html.disable--interaction.show--consent,html.disable--interaction.show--consent body{height:auto!important;overflow:hidden!important}@media (prefers-reduced-motion){#cc-main{--cc-modal-transition-duration:0s}}.cc--darkmode{--cc-bg:#161a1c;--cc-primary-color:#ebf3f6;--cc-secondary-color:#aebbc5;--cc-btn-primary-bg:#c2d0e0;--cc-btn-primary-color:var(--cc-bg);--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#98a7b6;--cc-btn-primary-hover-color:#000;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#242c31;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#353d43;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:var(--cc-btn-secondary-hover-bg);--cc-separator-border-color:#222a30;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#525f6b;--cc-toggle-on-knob-bg:var(--cc-btn-primary-color);--cc-toggle-off-knob-bg:var(--cc-btn-primary-color);--cc-toggle-enabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-disabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-readonly-bg:#343e45;--cc-toggle-readonly-knob-bg:#5f6b72;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:#1e2428;--cc-cookie-category-block-bg:#1e2428;--cc-cookie-category-block-border:var(--cc-section-category-border);--cc-cookie-category-block-hover-bg:#242c31;--cc-cookie-category-block-hover-border:#232a2f;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:var(--cc-toggle-readonly-bg);--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:#0c0e0f;--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#060809}.cc--darkmode #cc-main{color-scheme:dark}#cc-main .cm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;max-width:24rem;opacity:0;overflow:hidden;position:fixed;transform:translateY(1.6em);visibility:hidden;z-index:1}#cc-main .cm--top{top:var(--cc-modal-margin)}#cc-main .cm--middle{top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .cm--bottom{bottom:var(--cc-modal-margin)}#cc-main .cm--center{left:var(--cc-modal-margin);margin:0 auto;right:var(--cc-modal-margin);width:unset}#cc-main .cm--left{left:var(--cc-modal-margin);margin-right:var(--cc-modal-margin)}#cc-main .cm--right{margin-left:var(--cc-modal-margin);right:var(--cc-modal-margin)}#cc-main .cm__body{display:flex;flex-direction:column;justify-content:space-between;position:relative}#cc-main .cm__btns,#cc-main .cm__links{padding:1rem 1.3rem;width:unset}#cc-main .cm__texts{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1rem 0 0}#cc-main .cm__desc,#cc-main .cm__title{padding:0 1.3rem}#cc-main .cm__title{font-size:1.05em}#cc-main .cm__title+.cm__desc{margin-top:1.1em}#cc-main .cm__desc{color:var(--cc-secondary-color);font-size:.9em;line-height:1.5;max-height:40vh;overflow-x:visible;overflow-y:auto;padding-bottom:1em}#cc-main .cm__btns{border-top:1px solid var(--cc-separator-border-color);display:flex;flex-direction:column;justify-content:center}#cc-main .cm__btn-group{display:grid;grid-auto-columns:minmax(0,1fr)}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin-top:.375rem}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .cm--inline .cm__btn+.cm__btn{margin-left:.375rem;margin-top:0}#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-right:0}#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-right:.375rem}#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven{display:flex;flex:1;justify-content:space-between}#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven{flex-direction:row-reverse}#cc-main .cm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);font-size:.82em;font-weight:600;min-height:42px;padding:.5em 1em;text-align:center}#cc-main .cm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .cm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close{border-radius:0;border-bottom-left-radius:var(--cc-btn-border-radius);border-right:none;border-top:none;display:none;font-size:1em;height:42px;min-width:auto!important;overflow:hidden;padding:0!important;position:absolute;right:0;top:0;width:42px}#cc-main .cm__btn--close svg{stroke:var(--cc-btn-primary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .cm__btn--close:hover svg{stroke:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--close.cm__btn--secondary svg{stroke:var(--cc-btn-secondary-color)}#cc-main .cm__btn--close.cm__btn--secondary:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close+.cm__texts .cm__title{padding-right:3rem}#cc-main .cm--inline .cm__btn-group{grid-auto-flow:column}#cc-main .cm__footer{background:var(--cc-footer-bg);border-top:1px solid var(--cc-footer-border-color);color:var(--cc-footer-color);padding:.4em 0 .5em}#cc-main .cm__links{display:flex;flex-direction:row;padding-bottom:0;padding-top:0}#cc-main .cm__link-group{display:flex;flex-direction:row;font-size:.8em;width:100%}#cc-main .cm__link-group>*+*{margin-left:1.3rem}#cc-main .cm--flip .cm__btn:last-child{grid-row:1}#cc-main .cm--inline.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--box .cm__btn--close{display:block}#cc-main .cm--box.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--box.cm--wide{max-width:36em}#cc-main .cm--box.cm--wide .cm__btns{flex-direction:row;justify-content:space-between}#cc-main .cm--box.cm--wide .cm__btn-group{grid-auto-flow:column}#cc-main .cm--box.cm--wide .cm__btn{min-width:120px;padding-left:1.8em;padding-right:1.8em}#cc-main .cm--box.cm--wide.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--cloud{max-width:54em;width:unset}#cc-main .cm--cloud .cm__body{flex-direction:row}#cc-main .cm--cloud .cm__texts{flex:1}#cc-main .cm--cloud .cm__desc{max-height:9.4em}#cc-main .cm--cloud .cm__btns{border-left:1px solid var(--cc-separator-border-color);border-top:none;max-width:23em}#cc-main .cm--cloud .cm__btn-group{flex-direction:column}#cc-main .cm--cloud .cm__btn{min-width:19em}#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--cloud.cm--inline .cm__btn-group{flex-direction:row}#cc-main .cm--cloud.cm--inline .cm__btn{min-width:10em}#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group{flex-direction:row-reverse}#cc-main .cm--bar{border-radius:0;left:0;margin:0;max-width:unset;opacity:1;right:0;transform:translateY(0);width:100vw;--cc-modal-transition-duration:.35s}#cc-main .cm--bar.cm--top{top:0;transform:translateY(-100%)}#cc-main .cm--bar.cm--bottom{bottom:0;transform:translateY(100%)}#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links{margin:0 auto;max-width:55em;width:100%}#cc-main .cm--bar .cm__body{padding:.5em 0 .9em}#cc-main .cm--bar .cm__btns{border-top:none;flex-direction:row;justify-content:space-between}#cc-main .cm--bar .cm__btn-group{grid-auto-flow:column}#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--bar.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--bar.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links{max-width:74em}#cc-main .cm--bar.cm--inline .cm__body{flex-direction:row;padding:0}#cc-main .cm--bar.cm--inline .cm__btns{flex-direction:column;justify-content:center;max-width:23em}#cc-main .cm--bar.cm--inline.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close{transition:background-color .15s ease,border-color .15s ease,color .15s ease}.disable--interaction #cc-main .cm-wrapper:before{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:0}.show--consent #cc-main .cc--anim .cm{opacity:1;transform:translateY(0);visibility:visible!important}.show--consent #cc-main .cc--anim .cm--middle{transform:translateY(-50%)}.show--consent #cc-main .cc--anim .cm--bar{transform:translateY(0)}.show--consent #cc-main .cc--anim.cm-wrapper:before{opacity:1;visibility:visible}#cc-main.cc--rtl .cm__btn--close{border-bottom-left-radius:unset;border-bottom-right-radius:var(--cc-btn-border-radius);left:0;right:unset}#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title{padding-left:3rem!important;padding-right:1.3rem}#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm__link-group>*+*{margin-left:0;margin-right:1.3rem}@media screen and (max-width:640px){#cc-main{--cc-modal-margin:.5em}#cc-main .cm{max-width:none!important;width:auto!important}#cc-main .cm__body{flex-direction:column!important;padding:0!important}#cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title{padding-left:1.1rem!important;padding-right:1.1rem!important}#cc-main .cm__btns{border-left:none!important;border-top:1px solid var(--cc-separator-border-color)!important;flex-direction:column!important;max-width:none!important;min-width:auto!important}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin:.375rem 0 0!important}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .cm__btn-group{display:flex!important;flex-direction:column!important;min-width:auto!important}#cc-main .cm__btn{flex:auto!important}#cc-main .cm__link-group{justify-content:center!important}#cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns{flex-direction:column-reverse!important}}#cc-main .pm-wrapper{position:relative;z-index:2}#cc-main .pm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;opacity:0;overflow:hidden;position:fixed;visibility:hidden;width:100%;width:unset;z-index:1}#cc-main svg{fill:none;width:100%}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:1em 1.4em}#cc-main .pm__header{align-items:center;border-bottom:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__title{align-items:center;display:flex;flex:1;font-weight:600;margin-right:2em}#cc-main .pm__close-btn{background:var(--cc-btn-secondary-bg);border:1px solid var(--cc-btn-secondary-border-color);border-radius:var(--cc-btn-border-radius);height:40px;position:relative;transition:all .15s ease;width:40px}#cc-main .pm__close-btn span{display:flex;height:100%;width:100%}#cc-main .pm__close-btn svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .pm__close-btn:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color)}#cc-main .pm__close-btn:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .pm__body{flex:1;overflow-y:auto;overflow-y:overlay}#cc-main .pm__section,#cc-main .pm__section--toggle{border-radius:var(--cc-btn-border-radius);display:flex;flex-direction:column;margin-bottom:.5em}#cc-main .pm__section--toggle .pm__section-desc-wrapper{border:1px solid var(--cc-cookie-category-block-border);border-radius:var(--cc-btn-border-radius);border-top:none;border-top-left-radius:0;border-top-right-radius:0;display:none;margin-top:0!important;overflow:hidden}#cc-main .pm__section{border:1px solid var(--cc-separator-border-color);padding:1em;transition:background-color .25s ease,border-color .25s ease}#cc-main .pm__section:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#cc-main .pm__section:not(:first-child):hover{background:var(--cc-cookie-category-block-bg);border-color:var(--cc-cookie-category-block-border)}#cc-main .pm__section-toggles+.pm__section{margin-top:2em}#cc-main .pm__section--toggle{background:var(--cc-cookie-category-block-bg);border-top:none;margin-bottom:.375rem}#cc-main .pm__section--toggle .pm__section-title{align-items:center;background:var(--cc-cookie-category-block-bg);border:1px solid var(--cc-cookie-category-block-border);display:flex;justify-content:space-between;min-height:58px;padding:1.1em 5.4em 1.1em 1.2em;position:relative;transition:background-color .25s ease,border-color .25s ease;width:100%}#cc-main .pm__section--toggle .pm__section-title:hover{background:var(--cc-cookie-category-block-hover-bg);border-color:var(--cc-cookie-category-block-hover-border)}#cc-main .pm__section--toggle .pm__section-desc{margin-top:0;padding:1em}#cc-main .pm__section--toggle.is-expanded{--cc-cookie-category-block-bg:var(--cc-cookie-category-expanded-block-bg);--cc-cookie-category-block-border:var(--cc-cookie-category-expanded-block-hover-bg)}#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg{transform:scale(.5) rotate(180deg)}#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper{display:flex}#cc-main .pm__section--expandable .pm__section-title{cursor:pointer;padding-left:3.4em}#cc-main .pm__section--expandable .pm__section-arrow{background:var(--cc-toggle-readonly-bg);border-radius:100%;display:flex;height:20px;justify-content:center;left:18px;pointer-events:none;position:absolute;width:20px}#cc-main .pm__section--expandable .pm__section-arrow svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5)}#cc-main .pm__section-title-wrapper{align-items:center;display:flex;position:relative}#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper{margin-top:.85em}#cc-main .pm__section-title{border-radius:var(--cc-btn-border-radius);font-size:.95em;font-weight:600}#cc-main .pm__badge{align-items:center;background:var(--cc-btn-secondary-bg);border-radius:5em;color:var(--cc-secondary-color);display:flex;flex:none;font-size:.8em;font-weight:600;height:23px;justify-content:center;margin-left:1em;min-width:23px;overflow:hidden;padding:0 .6em 1px;position:relative;text-align:center;white-space:nowrap;width:auto}#cc-main .pm__service-counter{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);padding:0;width:23px}#cc-main .pm__service-counter[data-counterlabel]{padding:0 .6em 1px;width:auto}#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label{border-radius:var(--cc-pm-toggle-border-radius);height:23px;transform:translateZ(0);width:50px}#cc-main .section__toggle-wrapper{cursor:pointer;position:absolute;right:18px;z-index:1}#cc-main .toggle-service{height:19px;position:relative;right:0;width:42px}#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label{height:19px;width:42px}#cc-main .toggle-service .toggle__icon{position:relative}#cc-main .toggle-service .toggle__icon-circle{height:19px;width:19px}#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(23px)}#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after{display:none!important}#cc-main .section__toggle{border:0;cursor:pointer;display:block;left:0;margin:0;position:absolute;top:0}#cc-main .section__toggle:disabled{cursor:not-allowed}#cc-main .toggle__icon{background:var(--cc-toggle-off-bg);box-shadow:0 0 0 1px var(--cc-toggle-off-bg);display:flex;flex-direction:row;pointer-events:none;position:absolute;transition:all .25s ease}#cc-main .toggle__icon-circle{background:var(--cc-toggle-off-knob-bg);border:none;border-radius:var(--cc-pm-toggle-border-radius);box-shadow:0 1px 2px rgba(24,32,3,.36);display:block;height:23px;left:0;position:absolute;top:0;transition:transform .25s ease,background-color .25s ease;width:23px}#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{height:100%;position:absolute;transition:opacity .15s ease;width:100%}#cc-main .toggle__icon-on{opacity:0;transform:rotate(45deg)}#cc-main .toggle__icon-on svg{stroke:var(--cc-toggle-on-bg);transform:scale(.55) rotate(-45deg)}#cc-main .toggle__icon-off{opacity:1}#cc-main .toggle__icon-off svg{stroke:var(--cc-toggle-off-bg);transform:scale(.55)}#cc-main .section__toggle:checked~.toggle__icon{background:var(--cc-toggle-on-bg);box-shadow:0 0 0 1px var(--cc-toggle-on-bg)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle{background-color:var(--cc-toggle-on-knob-bg);transform:translateX(27px)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on{opacity:1}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off{opacity:0}#cc-main .section__toggle:checked:disabled~.toggle__icon{background:var(--cc-toggle-readonly-bg);box-shadow:0 0 0 1px var(--cc-toggle-readonly-bg)}#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle{background:var(--cc-toggle-readonly-knob-bg);box-shadow:none}#cc-main .section__toggle:checked:disabled~.toggle__icon svg{stroke:var(--cc-toggle-readonly-knob-icon-color)}#cc-main .toggle__label{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#cc-main .pm__section-desc-wrapper{color:var(--cc-secondary-color);display:flex;flex-direction:column;font-size:.9em}#cc-main .pm__section-desc-wrapper>:not(:last-child){border-bottom:1px solid var(--cc-cookie-category-block-border)}#cc-main .pm__section-services{display:flex;flex-direction:column}#cc-main .pm__service{align-items:center;display:flex;justify-content:space-between;padding:.4em 1.2em;position:relative;transition:background-color .15s ease}#cc-main .pm__service:hover{background-color:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__service-header{align-items:center;display:flex;margin-right:1em;width:100%}#cc-main .pm__service-icon{border:2px solid;border-radius:100%;height:8px;margin-left:6px;margin-right:20px;margin-top:1px;min-width:8px}#cc-main .pm__service-title{font-size:.95em;width:100%;word-break:break-word}#cc-main .pm__section-desc{line-height:1.5em}#cc-main .pm__section-table{border-collapse:collapse;font-size:.9em;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#cc-main .pm__table-caption{text-align:left}#cc-main .pm__table-caption,#cc-main .pm__table-head>tr{border-bottom:1px dashed var(--cc-separator-border-color);color:var(--cc-primary-color);font-weight:600}#cc-main .pm__table-tr{transition:background-color .15s ease}#cc-main .pm__table-tr:hover{background:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th{padding:.625em .625em .625em 1.2em;vertical-align:top}#cc-main .pm__footer{border-top:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__btn-group{display:flex}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin-left:.375rem}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main .pm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);flex:auto;font-size:.82em;font-weight:600;min-height:42px;min-width:110px;padding:.5em 1.5em;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#cc-main .pm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .pm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .pm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .pm--box{height:calc(100% - 2em);left:var(--cc-modal-margin);margin:0 auto;max-height:37.5em;max-width:43em;right:var(--cc-modal-margin);top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm--bar{border-radius:0;bottom:0;height:100%;margin:0;max-height:none;max-width:29em;opacity:1;top:0;width:100%;--cc-modal-transition-duration:.35s}#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr{display:block}#cc-main .pm--bar .pm__table-head{display:none}#cc-main .pm--bar .pm__table-caption{display:block}#cc-main .pm--bar .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm--bar .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm--bar .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm--bar .pm__table-td>div{flex:3}#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header{padding:1em 1.3em}#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer{flex-direction:column}#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin:.375rem 0 0}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer{flex-direction:column-reverse}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .pm--bar:not(.pm--wide) .pm__badge{display:none}#cc-main .pm--bar.pm--left{left:0;transform:translateX(-100%)}#cc-main .pm--bar.pm--right{right:0;transform:translateX(100%)}#cc-main .pm--bar.pm--wide{max-width:35em}#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header{padding:1em 1.4em}#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm-overlay{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:1}#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}.show--preferences #cc-main .cc--anim .pm{opacity:1;visibility:visible!important}.show--preferences #cc-main .cc--anim .pm--box{transform:translateY(-50%)}.show--preferences #cc-main .cc--anim .pm--bar{transform:translateX(0)}.show--preferences #cc-main .cc--anim .pm-overlay{opacity:1;visibility:visible}#cc-main.cc--rtl .pm__service-header{margin-left:1em;margin-right:0}#cc-main.cc--rtl .pm__section-arrow{left:unset;right:18px}#cc-main.cc--rtl .section__toggle-wrapper{left:18px;right:unset;transform-origin:left}#cc-main.cc--rtl .toggle-service{left:0}#cc-main.cc--rtl .pm__service-icon{margin-left:20px;margin-right:5px}#cc-main.cc--rtl .pm__section--toggle .pm__section-title{padding-left:5.4em;padding-right:1.2em}#cc-main.cc--rtl .pm__section--expandable .pm__section-title{padding-right:3.4em}#cc-main.cc--rtl .pm__badge{margin-left:unset;margin-right:1em}#cc-main.cc--rtl .toggle__icon-circle{transform:translateX(27px)}#cc-main.cc--rtl .toggle-service .toggle__icon-circle{transform:translateX(23px)}#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(0)}#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th{padding-left:unset;padding-right:1.2em;text-align:right}#cc-main.cc--rtl .pm__table-td{padding-left:unset;padding-right:1.2em}#cc-main.cc--rtl .pm__table-td:before{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin-left:0}@media screen and (max-width:640px){#cc-main .pm{border-radius:0;bottom:0;height:auto;left:0;max-height:100%;max-width:none!important;right:0;top:0;transform:translateY(1.6em)}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:.9em!important}#cc-main .pm__badge{display:none}#cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr{display:block}#cc-main .pm__table-head{display:none}#cc-main .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm__table-td>div{flex:3}#cc-main .pm__btn-group,#cc-main .pm__footer{flex-direction:column!important}#cc-main .pm__btn-group{display:flex!important}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin:.375rem 0 0!important}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer{flex-direction:column-reverse!important}.show--preferences #cc-main .cc--anim .pm{transform:translateY(0)!important}} /*# sourceMappingURL=vendors.6a3832bd.css.map*/