@retrivora-ai/rag-engine 1.9.7 → 1.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +136 -136
- package/dist/{ILLMProvider-Bhk6zJOK.d.mts → ILLMProvider-DMxLyTdq.d.mts} +59 -4
- package/dist/{ILLMProvider-Bhk6zJOK.d.ts → ILLMProvider-DMxLyTdq.d.ts} +59 -4
- package/dist/handlers/index.d.mts +2 -2
- package/dist/handlers/index.d.ts +2 -2
- package/dist/handlers/index.js +2327 -474
- package/dist/handlers/index.mjs +2329 -473
- package/dist/{index-B9J_XEh0.d.ts → index-CfkqZd2Y.d.ts} +12 -2
- package/dist/{index-C3SVtPYg.d.mts → index-DXd29KMq.d.mts} +27 -52
- package/dist/{index-Bu7T6xgr.d.ts → index-D_bOdJML.d.ts} +27 -52
- package/dist/{index-BJ4cd-t5.d.mts → index-xygonxpW.d.mts} +12 -2
- package/dist/index.css +783 -550
- package/dist/index.d.mts +35 -7
- package/dist/index.d.ts +35 -7
- package/dist/index.js +419 -282
- package/dist/index.mjs +426 -292
- package/dist/server.d.mts +65 -6
- package/dist/server.d.ts +65 -6
- package/dist/server.js +2185 -317
- package/dist/server.mjs +2185 -317
- package/package.json +13 -8
- package/src/app/constants.tsx +37 -7
- package/src/app/page.tsx +2 -0
- package/src/components/ChatWidget.tsx +2 -1
- package/src/components/ChatWindow.tsx +4 -1
- package/src/components/CodeViewer.tsx +19 -14
- package/src/components/MarkdownComponents.tsx +44 -1
- package/src/components/MessageBubble.tsx +162 -50
- package/src/components/constants.tsx +228 -0
- package/src/config/RagConfig.ts +48 -2
- package/src/config/constants.ts +4 -0
- package/src/config/serverConfig.ts +15 -0
- package/src/core/ConfigResolver.ts +38 -6
- package/src/core/DatabaseStorage.ts +469 -0
- package/src/core/LicenseVerifier.ts +260 -0
- package/src/core/MultiAgentCoordinator.ts +239 -0
- package/src/core/Pipeline.ts +151 -18
- package/src/core/Retrivora.ts +7 -0
- package/src/core/VectorPlugin.ts +12 -3
- package/src/core/mcp.ts +261 -0
- package/src/handlers/index.ts +449 -63
- package/src/hooks/useRagChat.ts +96 -42
- package/src/hooks/useStoredMessages.ts +15 -4
- package/src/index.ts +3 -0
- package/src/llm/LLMFactory.ts +9 -1
- package/src/llm/providers/GroqProvider.ts +176 -0
- package/src/llm/providers/QwenProvider.ts +191 -0
- package/src/server.ts +7 -0
- package/src/types/chat.ts +14 -0
- package/src/types/props.ts +12 -0
- package/.env.example +0 -80
- package/LICENSE.txt +0 -21
- package/src/components/AmbientBackground.tsx +0 -29
- package/src/components/ArchitectureCard.tsx +0 -17
- package/src/components/ArchitectureCardsSection.tsx +0 -15
- package/src/components/DocViewer.tsx +0 -103
- package/src/components/Documentation.tsx +0 -121
- package/src/components/Hero.tsx +0 -59
- package/src/components/Lifecycle.tsx +0 -37
- package/src/components/Navbar.tsx +0 -55
package/dist/index.js
CHANGED
|
@@ -63,12 +63,15 @@ __export(index_exports, {
|
|
|
63
63
|
AuthenticationException: () => AuthenticationException,
|
|
64
64
|
ChatWidget: () => ChatWidget,
|
|
65
65
|
ChatWindow: () => ChatWindow,
|
|
66
|
+
CodeViewer: () => CodeViewer,
|
|
66
67
|
ConfigProvider: () => ConfigProvider,
|
|
67
68
|
ConfigurationException: () => ConfigurationException,
|
|
68
69
|
DocumentUpload: () => DocumentUpload,
|
|
69
70
|
EmbeddingFailedException: () => EmbeddingFailedException,
|
|
70
71
|
MessageBubble: () => MessageBubble,
|
|
71
72
|
ObservabilityPanel: () => ObservabilityPanel,
|
|
73
|
+
ProductCard: () => ProductCard,
|
|
74
|
+
ProductCarousel: () => ProductCarousel,
|
|
72
75
|
ProviderNotFoundException: () => ProviderNotFoundException,
|
|
73
76
|
RateLimitException: () => RateLimitException,
|
|
74
77
|
RetrievalException: () => RetrievalException,
|
|
@@ -103,7 +106,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
103
106
|
}
|
|
104
107
|
|
|
105
108
|
// src/index.css
|
|
106
|
-
styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-200: oklch(88.5% 0.062 18.334);\n --color-red-400: oklch(70.4% 0.191 22.216);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-600: oklch(66.6% 0.179 58.318);\n --color-yellow-500: oklch(79.5% 0.184 86.047);\n --color-green-500: oklch(72.3% 0.219 149.579);\n --color-emerald-50: oklch(97.9% 0.021 166.113);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-200: oklch(90.5% 0.093 164.15);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-400: oklch(76.5% 0.177 163.223);\n --color-emerald-500: oklch(69.6% 0.17 162.48);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-blue-400: oklch(70.7% 0.165 254.624);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-indigo-50: oklch(96.2% 0.018 272.314);\n --color-indigo-100: oklch(93% 0.034 272.788);\n --color-indigo-200: oklch(87% 0.065 274.039);\n --color-indigo-300: oklch(78.5% 0.115 274.713);\n --color-indigo-400: oklch(67.3% 0.182 276.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-indigo-600: oklch(51.1% 0.262 276.966);\n --color-indigo-700: oklch(45.7% 0.24 277.023);\n --color-violet-200: oklch(89.4% 0.057 293.283);\n --color-violet-400: oklch(70.2% 0.183 293.541);\n --color-violet-500: oklch(60.6% 0.25 292.717);\n --color-violet-600: oklch(54.1% 0.281 293.009);\n --color-rose-50: oklch(96.9% 0.015 12.422);\n --color-rose-100: oklch(94.1% 0.03 12.58);\n --color-rose-200: oklch(89.2% 0.058 10.001);\n --color-rose-400: oklch(71.2% 0.194 13.428);\n --color-rose-500: oklch(64.5% 0.246 16.439);\n --color-rose-600: oklch(58.6% 0.253 17.585);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-xs: 20rem;\n --container-md: 28rem;\n --container-2xl: 42rem;\n --container-5xl: 64rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n --tracking-tight: -0.025em;\n --tracking-wider: 0.05em;\n --tracking-widest: 0.1em;\n --leading-tight: 1.25;\n --leading-relaxed: 1.625;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --animate-bounce: bounce 1s infinite;\n --blur-sm: 8px;\n --blur-md: 12px;\n --blur-lg: 16px;\n --blur-xl: 24px;\n --blur-3xl: 64px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .-top-40 {\n top: calc(var(--spacing) * -40);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-2 {\n top: calc(var(--spacing) * 2);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .-right-4 {\n right: calc(var(--spacing) * -4);\n }\n .-right-40 {\n right: calc(var(--spacing) * -40);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .right-5 {\n right: calc(var(--spacing) * 5);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .-bottom-1\\.5 {\n bottom: calc(var(--spacing) * -1.5);\n }\n .-bottom-4 {\n bottom: calc(var(--spacing) * -4);\n }\n .-bottom-40 {\n bottom: calc(var(--spacing) * -40);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .bottom-20 {\n bottom: calc(var(--spacing) * 20);\n }\n .-left-4 {\n left: calc(var(--spacing) * -4);\n }\n .-left-40 {\n left: calc(var(--spacing) * -40);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .left-2 {\n left: calc(var(--spacing) * 2);\n }\n .left-5 {\n left: calc(var(--spacing) * 5);\n }\n .left-6 {\n left: calc(var(--spacing) * 6);\n }\n .isolate {\n isolation: isolate;\n }\n .z-0 {\n z-index: 0;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[100\\] {\n z-index: 100;\n }\n .z-\\[9998\\] {\n z-index: 9998;\n }\n .z-\\[9999\\] {\n z-index: 9999;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .my-3 {\n margin-block: calc(var(--spacing) * 3);\n }\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n .my-5 {\n margin-block: calc(var(--spacing) * 5);\n }\n .my-6 {\n margin-block: calc(var(--spacing) * 6);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mt-16 {\n margin-top: calc(var(--spacing) * 16);\n }\n .mt-24 {\n margin-top: calc(var(--spacing) * 24);\n }\n .mt-32 {\n margin-top: calc(var(--spacing) * 32);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .mb-12 {\n margin-bottom: calc(var(--spacing) * 12);\n }\n .mb-16 {\n margin-bottom: calc(var(--spacing) * 16);\n }\n .mb-24 {\n margin-bottom: calc(var(--spacing) * 24);\n }\n .mb-32 {\n margin-bottom: calc(var(--spacing) * 32);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .ml-auto {\n margin-left: auto;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .\\!table {\n display: table !important;\n }\n .\\!table-cell {\n display: table-cell !important;\n }\n .\\!table-header-group {\n display: table-header-group !important;\n }\n .\\!table-row {\n display: table-row !important;\n }\n .\\!table-row-group {\n display: table-row-group !important;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-\\[4\\/3\\] {\n aspect-ratio: 4/3;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .h-1 {\n height: calc(var(--spacing) * 1);\n }\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-28 {\n height: calc(var(--spacing) * 28);\n }\n .h-32 {\n height: calc(var(--spacing) * 32);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-\\[400\\%\\] {\n height: 400%;\n }\n .h-\\[600px\\] {\n height: 600px;\n }\n .h-\\[calc\\(100vh-3rem\\)\\] {\n height: calc(100vh - 3rem);\n }\n .h-full {\n height: 100%;\n }\n .max-h-24 {\n max-height: calc(var(--spacing) * 24);\n }\n .max-h-32 {\n max-height: calc(var(--spacing) * 32);\n }\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n .max-h-56 {\n max-height: calc(var(--spacing) * 56);\n }\n .max-h-60 {\n max-height: calc(var(--spacing) * 60);\n }\n .max-h-64 {\n max-height: calc(var(--spacing) * 64);\n }\n .max-h-\\[320px\\] {\n max-height: 320px;\n }\n .max-h-\\[400px\\] {\n max-height: 400px;\n }\n .max-h-\\[800px\\] {\n max-height: 800px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[440px\\] {\n min-height: 440px;\n }\n .min-h-\\[500px\\] {\n min-height: 500px;\n }\n .min-h-\\[560px\\] {\n min-height: 560px;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-0\\.5 {\n width: calc(var(--spacing) * 0.5);\n }\n .w-1\\.5 {\n width: calc(var(--spacing) * 1.5);\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-14 {\n width: calc(var(--spacing) * 14);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-28 {\n width: calc(var(--spacing) * 28);\n }\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n .w-\\[400\\%\\] {\n width: 400%;\n }\n .w-\\[500px\\] {\n width: 500px;\n }\n .w-\\[600px\\] {\n width: 600px;\n }\n .w-\\[min\\(88\\%\\,18rem\\)\\] {\n width: min(88%, 18rem);\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-5xl {\n max-width: var(--container-5xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .max-w-\\[90\\%\\] {\n max-width: 90%;\n }\n .max-w-\\[92\\%\\] {\n max-width: 92%;\n }\n .max-w-\\[94\\%\\] {\n max-width: 94%;\n }\n .max-w-\\[calc\\(100vw-3rem\\)\\] {\n max-width: calc(100vw - 3rem);\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-none {\n max-width: none;\n }\n .max-w-xs {\n max-width: var(--container-xs);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-\\[11rem\\] {\n min-width: 11rem;\n }\n .min-w-\\[400px\\] {\n min-width: 400px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-4 {\n --tw-translate-y: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-90 {\n --tw-scale-x: 90%;\n --tw-scale-y: 90%;\n --tw-scale-z: 90%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-95 {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-105 {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .rotate-0 {\n rotate: 0deg;\n }\n .rotate-45 {\n rotate: 45deg;\n }\n .rotate-90 {\n rotate: 90deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-bounce {\n animation: var(--animate-bounce);\n }\n .animate-ping {\n animation: var(--animate-ping);\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-nw-resize {\n cursor: nw-resize;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n .snap-mandatory {\n --tw-scroll-snap-strictness: mandatory;\n }\n .snap-start {\n scroll-snap-align: start;\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n }\n .scrollbar-thumb-slate-200 {\n --tw-scrollbar-thumb: var(--color-slate-200);\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n .scrollbar-track-transparent {\n --tw-scrollbar-track: transparent;\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-row-reverse {\n flex-direction: row-reverse;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-2\\.5 {\n gap: calc(var(--spacing) * 2.5);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n .gap-16 {\n gap: calc(var(--spacing) * 16);\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-12 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .divide-y {\n :where(& > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n }\n .divide-slate-100 {\n :where(& > :not(:last-child)) {\n border-color: var(--color-slate-100);\n }\n }\n .self-center {\n align-self: center;\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-3xl {\n border-radius: var(--radius-3xl);\n }\n .rounded-\\[2px\\] {\n border-radius: 2px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n .rounded-tl-\\[2px\\] {\n border-top-left-radius: 2px;\n }\n .rounded-tl-sm {\n border-top-left-radius: var(--radius-sm);\n }\n .rounded-tr-sm {\n border-top-right-radius: var(--radius-sm);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-4 {\n border-style: var(--tw-border-style);\n border-width: 4px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-l-2 {\n border-left-style: var(--tw-border-style);\n border-left-width: 2px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-amber-100 {\n border-color: var(--color-amber-100);\n }\n .border-amber-200 {\n border-color: var(--color-amber-200);\n }\n .border-emerald-100 {\n border-color: var(--color-emerald-100);\n }\n .border-emerald-200 {\n border-color: var(--color-emerald-200);\n }\n .border-emerald-500 {\n border-color: var(--color-emerald-500);\n }\n .border-emerald-500\\/20 {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n }\n }\n .border-indigo-100 {\n border-color: var(--color-indigo-100);\n }\n .border-indigo-200 {\n border-color: var(--color-indigo-200);\n }\n .border-indigo-500 {\n border-color: var(--color-indigo-500);\n }\n .border-indigo-600 {\n border-color: var(--color-indigo-600);\n }\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n .border-rose-100 {\n border-color: var(--color-rose-100);\n }\n .border-rose-200 {\n border-color: var(--color-rose-200);\n }\n .border-slate-50 {\n border-color: var(--color-slate-50);\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-200\\/50 {\n border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);\n }\n }\n .border-slate-200\\/60 {\n border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);\n }\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-violet-200 {\n border-color: var(--color-violet-200);\n }\n .border-violet-600 {\n border-color: var(--color-violet-600);\n }\n .border-white {\n border-color: var(--color-white);\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .bg-\\[\\#0f172a\\] {\n background-color: #0f172a;\n }\n .bg-amber-50 {\n background-color: var(--color-amber-50);\n }\n .bg-amber-500 {\n background-color: var(--color-amber-500);\n }\n .bg-emerald-50 {\n background-color: var(--color-emerald-50);\n }\n .bg-emerald-50\\/50 {\n background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-500 {\n background-color: var(--color-emerald-500);\n }\n .bg-emerald-500\\/10 {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n }\n }\n .bg-green-500 {\n background-color: var(--color-green-500);\n }\n .bg-indigo-50 {\n background-color: var(--color-indigo-50);\n }\n .bg-indigo-500 {\n background-color: var(--color-indigo-500);\n }\n .bg-indigo-500\\/10 {\n background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);\n }\n }\n .bg-indigo-600 {\n background-color: var(--color-indigo-600);\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-500 {\n background-color: var(--color-red-500);\n }\n .bg-rose-50 {\n background-color: var(--color-rose-50);\n }\n .bg-rose-500 {\n background-color: var(--color-rose-500);\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-50\\/20 {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 20%, transparent);\n }\n }\n .bg-slate-50\\/50 {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);\n }\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-slate-100\\/50 {\n background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent);\n }\n }\n .bg-slate-200 {\n background-color: var(--color-slate-200);\n }\n .bg-slate-400 {\n background-color: var(--color-slate-400);\n }\n .bg-slate-500\\/5 {\n background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-500) 5%, transparent);\n }\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-slate-900\\/50 {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-violet-500\\/10 {\n background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);\n }\n }\n .bg-violet-600 {\n background-color: var(--color-violet-600);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/20 {\n background-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n .bg-white\\/80 {\n background-color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n .bg-white\\/90 {\n background-color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n .bg-yellow-500 {\n background-color: var(--color-yellow-500);\n }\n .bg-gradient-to-r {\n --tw-gradient-position: to right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-indigo-500 {\n --tw-gradient-from: var(--color-indigo-500);\n --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));\n }\n .via-indigo-600 {\n --tw-gradient-via: var(--color-indigo-600);\n --tw-gradient-via-stops:\n var(--tw-gradient-position),\n var(--tw-gradient-from) var(--tw-gradient-from-position),\n var(--tw-gradient-via) var(--tw-gradient-via-position),\n var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n .to-violet-600 {\n --tw-gradient-to: var(--color-violet-600);\n --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));\n }\n .bg-clip-text {\n background-clip: text;\n }\n .object-cover {\n object-fit: cover;\n }\n .p-0\\.5 {\n padding: calc(var(--spacing) * 0.5);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-2\\.5 {\n padding: calc(var(--spacing) * 2.5);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-5 {\n padding-block: calc(var(--spacing) * 5);\n }\n .py-12 {\n padding-block: calc(var(--spacing) * 12);\n }\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * 0.5);\n }\n .pt-1 {\n padding-top: calc(var(--spacing) * 1);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n .pr-1 {\n padding-right: calc(var(--spacing) * 1);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .align-middle {\n vertical-align: middle;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-7xl {\n font-size: var(--text-7xl);\n line-height: var(--tw-leading, var(--text-7xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[8px\\] {\n font-size: 8px;\n }\n .text-\\[9px\\] {\n font-size: 9px;\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-black {\n --tw-font-weight: var(--font-weight-black);\n font-weight: var(--font-weight-black);\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-extrabold {\n --tw-font-weight: var(--font-weight-extrabold);\n font-weight: var(--font-weight-extrabold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.2em\\] {\n --tw-tracking: 0.2em;\n letter-spacing: 0.2em;\n }\n .tracking-\\[0\\.3em\\] {\n --tw-tracking: 0.3em;\n letter-spacing: 0.3em;\n }\n .tracking-\\[0\\.15em\\] {\n --tw-tracking: 0.15em;\n letter-spacing: 0.15em;\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre {\n white-space: pre;\n }\n .whitespace-pre-line {\n white-space: pre-line;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-amber-400 {\n color: var(--color-amber-400);\n }\n .text-amber-500 {\n color: var(--color-amber-500);\n }\n .text-amber-600 {\n color: var(--color-amber-600);\n }\n .text-emerald-400 {\n color: var(--color-emerald-400);\n }\n .text-emerald-500 {\n color: var(--color-emerald-500);\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-indigo-50 {\n color: var(--color-indigo-50);\n }\n .text-indigo-400 {\n color: var(--color-indigo-400);\n }\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n .text-indigo-600 {\n color: var(--color-indigo-600);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-600 {\n color: var(--color-red-600);\n }\n .text-rose-400 {\n color: var(--color-rose-400);\n }\n .text-rose-500 {\n color: var(--color-rose-500);\n }\n .text-rose-600 {\n color: var(--color-rose-600);\n }\n .text-slate-100 {\n color: var(--color-slate-100);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-transparent {\n color: transparent;\n }\n .text-violet-500 {\n color: var(--color-violet-500);\n }\n .text-violet-600 {\n color: var(--color-violet-600);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .placeholder-slate-400 {\n &::placeholder {\n color: var(--color-slate-400);\n }\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-15 {\n opacity: 15%;\n }\n .opacity-20 {\n opacity: 20%;\n }\n .opacity-40 {\n opacity: 40%;\n }\n .opacity-70 {\n opacity: 70%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .opacity-\\[0\\.1\\] {\n opacity: 0.1;\n }\n .opacity-\\[0\\.05\\] {\n opacity: 0.05;\n }\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_0_8px_rgba\\(99\\,102\\,241\\,0\\.5\\)\\] {\n --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(99,102,241,0.5));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-indigo-200 {\n --tw-shadow-color: oklch(87% 0.065 274.039);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, var(--color-indigo-200) var(--tw-shadow-alpha), transparent);\n }\n }\n .shadow-indigo-500\\/10 {\n --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 10%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .shadow-indigo-500\\/20 {\n --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .shadow-rose-500\\/20 {\n --tw-shadow-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .shadow-violet-500\\/20 {\n --tw-shadow-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .blur-3xl {\n --tw-blur: blur(var(--blur-3xl));\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .blur-lg {\n --tw-blur: blur(var(--blur-lg));\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .drop-shadow-2xl {\n --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));\n --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur-md {\n --tw-backdrop-blur: blur(var(--blur-md));\n -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,);\n 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,);\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n -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,);\n 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,);\n }\n .backdrop-blur-xl {\n --tw-backdrop-blur: blur(var(--blur-xl));\n -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,);\n 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,);\n }\n .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-500 {\n --tw-duration: 500ms;\n transition-duration: 500ms;\n }\n .duration-700 {\n --tw-duration: 700ms;\n transition-duration: 700ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .select-text {\n -webkit-user-select: text;\n user-select: text;\n }\n .\\[animation-delay\\:0ms\\] {\n animation-delay: 0ms;\n }\n .\\[animation-delay\\:150ms\\] {\n animation-delay: 150ms;\n }\n .\\[animation-delay\\:300ms\\] {\n animation-delay: 300ms;\n }\n .group-hover\\:scale-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:scale-105 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:scale-110 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:animate-\\[gradientMove_3\\.5s_ease-in-out_infinite_alternate\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n animation: gradientMove 3.5s ease-in-out infinite alternate;\n }\n }\n }\n .group-hover\\:animate-\\[shapeshift_5s_ease-in-out_infinite_forwards\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n animation: shapeshift 5s ease-in-out infinite forwards;\n }\n }\n }\n .group-hover\\:rounded-none {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-radius: 0;\n }\n }\n }\n .group-hover\\:border-slate-500 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-color: var(--color-slate-500);\n }\n }\n }\n .group-hover\\:text-indigo-600 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n color: var(--color-indigo-600);\n }\n }\n }\n .group-hover\\:opacity-80 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 80%;\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus-within\\:border-slate-300 {\n &:focus-within {\n border-color: var(--color-slate-300);\n }\n }\n .hover\\:scale-105 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .hover\\:scale-110 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .hover\\:scale-\\[1\\.01\\] {\n &:hover {\n @media (hover: hover) {\n scale: 1.01;\n }\n }\n }\n .hover\\:scale-\\[1\\.02\\] {\n &:hover {\n @media (hover: hover) {\n scale: 1.02;\n }\n }\n }\n .hover\\:border-indigo-200 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-indigo-200);\n }\n }\n }\n .hover\\:border-indigo-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-indigo-300);\n }\n }\n }\n .hover\\:border-indigo-500\\/50 {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-indigo-500) 50%, transparent);\n }\n }\n }\n }\n .hover\\:border-indigo-700 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-indigo-700);\n }\n }\n }\n .hover\\:border-slate-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-300);\n }\n }\n }\n .hover\\:bg-indigo-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-indigo-700);\n }\n }\n }\n .hover\\:bg-rose-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-rose-600);\n }\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-50\\/60 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);\n }\n }\n }\n }\n .hover\\:bg-slate-50\\/70 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);\n }\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-200);\n }\n }\n }\n .hover\\:bg-slate-500\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-500) 10%, transparent);\n }\n }\n }\n }\n .hover\\:bg-white {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-white);\n }\n }\n }\n .hover\\:text-\\[\\#CB3837\\] {\n &:hover {\n @media (hover: hover) {\n color: #CB3837;\n }\n }\n }\n .hover\\:text-blue-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-blue-500);\n }\n }\n }\n .hover\\:text-emerald-400 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-emerald-400);\n }\n }\n }\n .hover\\:text-indigo-300 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-300);\n }\n }\n }\n .hover\\:text-indigo-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-500);\n }\n }\n }\n .hover\\:text-indigo-600 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-600);\n }\n }\n }\n .hover\\:text-rose-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-500);\n }\n }\n }\n .hover\\:text-slate-600 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-600);\n }\n }\n }\n .hover\\:text-slate-900 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-900);\n }\n }\n }\n .hover\\:opacity-90 {\n &:hover {\n @media (hover: hover) {\n opacity: 90%;\n }\n }\n }\n .hover\\:shadow-md {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-xl {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-indigo-500\\/5 {\n &:hover {\n @media (hover: hover) {\n --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 5%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n }\n .focus\\:border-emerald-500 {\n &:focus {\n border-color: var(--color-emerald-500);\n }\n }\n .active\\:scale-95 {\n &:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .active\\:scale-\\[0\\.98\\] {\n &:active {\n scale: 0.98;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-30 {\n &:disabled {\n opacity: 30%;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .disabled\\:hover\\:scale-100 {\n &:disabled {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n }\n .disabled\\:active\\:scale-100 {\n &:disabled {\n &:active {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .sm\\:grid-cols-3 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n .sm\\:flex-nowrap {\n @media (width >= 40rem) {\n flex-wrap: nowrap;\n }\n }\n .md\\:block {\n @media (width >= 48rem) {\n display: block;\n }\n }\n .md\\:w-1\\/2 {\n @media (width >= 48rem) {\n width: calc(1 / 2 * 100%);\n }\n }\n .md\\:flex-row {\n @media (width >= 48rem) {\n flex-direction: row;\n }\n }\n .md\\:flex-row-reverse {\n @media (width >= 48rem) {\n flex-direction: row-reverse;\n }\n }\n .md\\:space-y-0 {\n @media (width >= 48rem) {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n }\n .md\\:text-7xl {\n @media (width >= 48rem) {\n font-size: var(--text-7xl);\n line-height: var(--tw-leading, var(--text-7xl--line-height));\n }\n }\n .md\\:text-xl {\n @media (width >= 48rem) {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n }\n .md\\:opacity-0 {\n @media (width >= 48rem) {\n opacity: 0%;\n }\n }\n .md\\:group-hover\\/carousel\\:opacity-100 {\n @media (width >= 48rem) {\n &:is(:where(.group\\/carousel):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n }\n .lg\\:sticky {\n @media (width >= 64rem) {\n position: sticky;\n }\n }\n .lg\\:top-6 {\n @media (width >= 64rem) {\n top: calc(var(--spacing) * 6);\n }\n }\n .lg\\:grid-cols-2 {\n @media (width >= 64rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .lg\\:grid-cols-\\[280px_1fr\\] {\n @media (width >= 64rem) {\n grid-template-columns: 280px 1fr;\n }\n }\n .dark\\:scrollbar-thumb-white\\/10 {\n @media (prefers-color-scheme: dark) {\n --tw-scrollbar-thumb: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-scrollbar-thumb: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n }\n .dark\\:divide-white\\/5 {\n @media (prefers-color-scheme: dark) {\n :where(& > :not(:last-child)) {\n border-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n }\n .dark\\:border-\\[\\#080811\\] {\n @media (prefers-color-scheme: dark) {\n border-color: #080811;\n }\n }\n .dark\\:border-amber-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-amber-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-emerald-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-emerald-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-indigo-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-indigo-500\\/30 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);\n }\n }\n }\n .dark\\:border-red-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-rose-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-violet-500\\/30 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);\n }\n }\n }\n .dark\\:border-white\\/5 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n .dark\\:border-white\\/8 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n }\n .dark\\:border-white\\/10 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n .dark\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n .dark\\:bg-\\[\\#0f0f1a\\] {\n @media (prefers-color-scheme: dark) {\n background-color: #0f0f1a;\n }\n }\n .dark\\:bg-\\[\\#0f0f1a\\]\\/90 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in oklab, #0f0f1a 90%, transparent);\n }\n }\n .dark\\:bg-\\[\\#080811\\] {\n @media (prefers-color-scheme: dark) {\n background-color: #080811;\n }\n }\n .dark\\:bg-\\[\\#080811\\]\\/80 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in oklab, #080811 80%, transparent);\n }\n }\n .dark\\:bg-amber-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-amber-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-black\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n }\n .dark\\:bg-black\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-400 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-emerald-400);\n }\n }\n .dark\\:bg-emerald-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-500\\/5 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-400 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-indigo-400);\n }\n }\n .dark\\:bg-indigo-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-red-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-rose-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-slate-800 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-800);\n }\n }\n .dark\\:bg-slate-900 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-900);\n }\n }\n .dark\\:bg-slate-900\\/50 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900\\/80 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);\n }\n }\n }\n .dark\\:bg-slate-950 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-950);\n }\n }\n .dark\\:bg-transparent {\n @media (prefers-color-scheme: dark) {\n background-color: transparent;\n }\n }\n .dark\\:bg-violet-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-white {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-white);\n }\n }\n .dark\\:bg-white\\/3 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 3%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 3%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/5 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/8 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n .dark\\:text-amber-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-amber-400);\n }\n }\n .dark\\:text-emerald-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-emerald-300);\n }\n }\n .dark\\:text-emerald-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-emerald-400);\n }\n }\n .dark\\:text-indigo-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-indigo-400);\n }\n }\n .dark\\:text-red-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-red-400);\n }\n }\n .dark\\:text-rose-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-rose-400);\n }\n }\n .dark\\:text-slate-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-slate-300);\n }\n }\n .dark\\:text-slate-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-slate-400);\n }\n }\n .dark\\:text-slate-900 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-slate-900);\n }\n }\n .dark\\:text-violet-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-violet-400);\n }\n }\n .dark\\:text-white {\n @media (prefers-color-scheme: dark) {\n color: var(--color-white);\n }\n }\n .dark\\:text-white\\/20 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n .dark\\:text-white\\/30 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 30%, transparent);\n }\n }\n }\n .dark\\:text-white\\/40 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 40%, transparent);\n }\n }\n }\n .dark\\:text-white\\/50 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 50%, transparent);\n }\n }\n }\n .dark\\:text-white\\/60 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n .dark\\:text-white\\/70 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n }\n .dark\\:text-white\\/75 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 75%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 75%, transparent);\n }\n }\n }\n .dark\\:text-white\\/80 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n }\n .dark\\:text-white\\/90 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n }\n .dark\\:placeholder-white\\/30 {\n @media (prefers-color-scheme: dark) {\n &::placeholder {\n color: color-mix(in srgb, #fff 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 30%, transparent);\n }\n }\n }\n }\n .dark\\:opacity-\\[0\\.03\\] {\n @media (prefers-color-scheme: dark) {\n opacity: 0.03;\n }\n }\n .dark\\:shadow-lg {\n @media (prefers-color-scheme: dark) {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .dark\\:shadow-indigo-500\\/20 {\n @media (prefers-color-scheme: dark) {\n --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n .dark\\:group-hover\\:border-white\\/50 {\n @media (prefers-color-scheme: dark) {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n }\n }\n }\n }\n }\n .dark\\:focus-within\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:focus-within {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n .dark\\:hover\\:border-indigo-500\\/30 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-indigo-500) 30%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:border-white\\/10 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/5 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/8 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/10 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-\\[\\#CB3837\\] {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: #CB3837;\n }\n }\n }\n }\n .dark\\:hover\\:text-blue-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-blue-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-indigo-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-rose-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/60 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/70 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/80 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/90 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n }\n }\n }\n}\n@layer base {\n :root {\n --star: shape(evenodd from 50% 24.787%, curve by 7.143% 18.016% with 0% 0% / 2.9725% 13.814%, curve by 17.882% 7.197% with 4.171% 4.2025% / 17.882% 7.197%, curve by -17.882% 8.6765% with 0% 0% / -13.711% 4.474%, curve by -7.143% 16.5365% with -4.1705% 4.202% / -7.143% 16.5365%, curve by -8.6115% -16.5365% with 0% 0% / -4.441% -12.3345%, curve by -16.4135% -8.6765% with -4.171% -4.2025% / -16.4135% -8.6765%, curve by 16.4135% -7.197% with 0% 0% / 12.2425% -2.9945%, curve by 8.6115% -18.016% with 4.1705% -4.202% / 8.6115% -18.016%, close);\n --flower: shape(evenodd from 17.9665% 82.0335%, curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%, curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%, curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%, curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%, curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%, curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%, curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%, curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%, curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%, curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%, curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%, curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%, close);\n --hexagon: shape(evenodd from 6.47% 67.001%, curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%, curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%, curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%, curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%, curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%, curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%, curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%, curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%, curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%, curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%, curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%, curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%, close);\n --cylinder: shape(evenodd from 10.5845% 59.7305%, curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%, curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%, curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%, curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%, curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%, curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%, curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%, curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%, curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%, curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%, curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%, curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%, close);\n --circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);\n --heart: shape(evenodd from 51.311% 83.603%, curve by -8.333% -20.508% with -14.104% -4.287% / -16.406% -16.185%, curve by -4.271% -37.41% with -5.419% -9.658% / -6.815% -22.733%, curve by 13.589% -33.586% with 3.982% -7.448% / 8.411% -15.994%, curve by 28.187% -21.985% with 4.029% -4.29% / 4.029% -4.29%, curve by 33.835% 0.721% with 9.618% 4.647% / 22.541% 9.618%, curve by 37.596% 21.304% with 3.306% 13.266% / 7.589% 24.251%, curve by 21.985% 43.613% with -4.208% 3.982% / -15.994% 8.411%, curve by 0.721% 37.596% with -7.448% 4.029% / -15.994% 8.411%, curve by -16.185% 28.187% with -9.658% 5.419% / -22.733% 6.815%, curve by -37.41% 4.271% with -4.29% 4.029% / -4.29% 4.029%, curve by -33.586% -13.589% with -7.448% 3.982% / -15.994% 8.411%, curve by -28.187% -32.094% with -4.029% 4.029% / -4.029% 4.029%, close);\n --spiral: shape(evenodd from 13.347% 30.885%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, curve by -20.309% 16.907% with -7.146% -1.332% / -9.016% -2.812%, curve by -25.848% -13.087% with -7.017% -7.46% / -9.941% -15.041%, curve by 10.154% -25.731% with 2.473% -6.063% / 7.163% -10.656%, curve by 31.473% -7.963% with 8.814% 2.403% / 13.84% 8.748%, curve by 16.526% 20.487% with -4.058% 1.502% / -9.51% 3.304%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, close);\n --sun: shape(evenodd from 12.758% 22.039%, curve by 2.2585% 27.561% with 4.517% 18.961% / 2.2585% 27.561%, curve by 3.187% -11.541% with 2.2585% -8.483% / 4.7615% -12.541%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, curve by 19.814% -34.731% with 0% 0% / -3.187% 11.541%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, close);\n --star2: shape(open from 28.947% 47.744%, curve by 24.042% -2.139% with 0% 0% / -24.042% 2.139%, curve by 4.208% -25.165% with 4.208% -25.165% / 4.208% -25.165%, curve by 2.341% -18.447% with 0% 0% / 1.888% -1.438%, curve by 32.355% 1.085% with 0% 0% / 25.984% 1.085%, curve by -4.655% 25.165% with 0% 0% / -4.655% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.566% -4.208% with 0% 0% / 2.072% -1.639%, curve by 30.069% 1.085% with 0% 0% / 24.156% 1.085%, curve by -2.791% 25.165% with 0% 0% / -2.791% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.116% -4.208% with 0% 0% / 1.659% -1.557%, close);\n --tri-star: shape(open from 25% 25%, curve by 25% 25% with 0% 0% / 25% 25%, close);\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }\n@property --tw-scrollbar-thumb { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-scrollbar-track { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-ordinal { syntax: "*"; inherits: false; }\n@property --tw-slashed-zero { syntax: "*"; inherits: false; }\n@property --tw-numeric-figure { syntax: "*"; inherits: false; }\n@property --tw-numeric-spacing { syntax: "*"; inherits: false; }\n@property --tw-numeric-fraction { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n@keyframes shapeshift {\n 0% {\n clip-path: var(--circle);\n rotate: 0turn;\n }\n 25% {\n clip-path: var(--flower);\n }\n 50% {\n clip-path: var(--cylinder);\n }\n 75% {\n clip-path: var(--hexagon);\n }\n 100% {\n clip-path: var(--circle);\n rotate: 1turn;\n }\n 120% {\n clip-path: var(--flower);\n }\n 140% {\n clip-path: var(--cylinder);\n }\n 160% {\n clip-path: var(--hexagon);\n }\n 180% {\n clip-path: var(--circle);\n rotate: 1turn;\n }\n}\n@keyframes gradientMove {\n 0% {\n translate: 0 0;\n }\n 100% {\n translate: -75% -75%;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-scroll-snap-strictness: proximity;\n --tw-scrollbar-thumb: #0000;\n --tw-scrollbar-track: #0000;\n --tw-space-y-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n');
|
|
109
|
+
styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-200: oklch(88.5% 0.062 18.334);\n --color-red-400: oklch(70.4% 0.191 22.216);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-orange-100: oklch(95.4% 0.038 75.164);\n --color-orange-700: oklch(55.3% 0.195 38.402);\n --color-orange-950: oklch(26.6% 0.079 36.259);\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-600: oklch(66.6% 0.179 58.318);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-amber-800: oklch(47.3% 0.137 46.201);\n --color-amber-900: oklch(41.4% 0.112 45.904);\n --color-amber-950: oklch(27.9% 0.077 45.635);\n --color-emerald-50: oklch(97.9% 0.021 166.113);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-200: oklch(90.5% 0.093 164.15);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-400: oklch(76.5% 0.177 163.223);\n --color-emerald-500: oklch(69.6% 0.17 162.48);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-emerald-800: oklch(43.2% 0.095 166.913);\n --color-emerald-900: oklch(37.8% 0.077 168.94);\n --color-emerald-950: oklch(26.2% 0.051 172.552);\n --color-cyan-50: oklch(98.4% 0.019 200.873);\n --color-cyan-100: oklch(95.6% 0.045 203.388);\n --color-cyan-200: oklch(91.7% 0.08 205.041);\n --color-cyan-300: oklch(86.5% 0.127 207.078);\n --color-cyan-400: oklch(78.9% 0.154 211.53);\n --color-cyan-700: oklch(52% 0.105 223.128);\n --color-cyan-800: oklch(45% 0.085 224.283);\n --color-cyan-900: oklch(39.8% 0.07 227.392);\n --color-cyan-950: oklch(30.2% 0.056 229.695);\n --color-blue-50: oklch(97% 0.014 254.604);\n --color-blue-100: oklch(93.2% 0.032 255.585);\n --color-blue-200: oklch(88.2% 0.059 254.128);\n --color-blue-300: oklch(80.9% 0.105 251.813);\n --color-blue-400: oklch(70.7% 0.165 254.624);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-blue-700: oklch(48.8% 0.243 264.376);\n --color-blue-800: oklch(42.4% 0.199 265.638);\n --color-blue-900: oklch(37.9% 0.146 265.522);\n --color-blue-950: oklch(28.2% 0.091 267.935);\n --color-indigo-50: oklch(96.2% 0.018 272.314);\n --color-indigo-100: oklch(93% 0.034 272.788);\n --color-indigo-200: oklch(87% 0.065 274.039);\n --color-indigo-300: oklch(78.5% 0.115 274.713);\n --color-indigo-400: oklch(67.3% 0.182 276.935);\n --color-indigo-500: oklch(58.5% 0.233 277.117);\n --color-indigo-600: oklch(51.1% 0.262 276.966);\n --color-indigo-700: oklch(45.7% 0.24 277.023);\n --color-indigo-800: oklch(39.8% 0.195 277.366);\n --color-indigo-900: oklch(35.9% 0.144 278.697);\n --color-indigo-950: oklch(25.7% 0.09 281.288);\n --color-violet-100: oklch(94.3% 0.029 294.588);\n --color-violet-200: oklch(89.4% 0.057 293.283);\n --color-violet-800: oklch(43.2% 0.232 292.759);\n --color-violet-900: oklch(38% 0.189 293.745);\n --color-purple-50: oklch(97.7% 0.014 308.299);\n --color-purple-100: oklch(94.6% 0.033 307.174);\n --color-purple-200: oklch(90.2% 0.063 306.703);\n --color-purple-300: oklch(82.7% 0.119 306.383);\n --color-purple-400: oklch(71.4% 0.203 305.504);\n --color-purple-700: oklch(49.6% 0.265 301.924);\n --color-purple-800: oklch(43.8% 0.218 303.724);\n --color-purple-900: oklch(38.1% 0.176 304.987);\n --color-purple-950: oklch(29.1% 0.149 302.717);\n --color-pink-50: oklch(97.1% 0.014 343.198);\n --color-pink-100: oklch(94.8% 0.028 342.258);\n --color-pink-200: oklch(89.9% 0.061 343.231);\n --color-pink-300: oklch(82.3% 0.12 346.018);\n --color-pink-400: oklch(71.8% 0.202 349.761);\n --color-pink-700: oklch(52.5% 0.223 3.958);\n --color-pink-800: oklch(45.9% 0.187 3.815);\n --color-pink-900: oklch(40.8% 0.153 2.432);\n --color-pink-950: oklch(28.4% 0.109 3.907);\n --color-rose-50: oklch(96.9% 0.015 12.422);\n --color-rose-100: oklch(94.1% 0.03 12.58);\n --color-rose-200: oklch(89.2% 0.058 10.001);\n --color-rose-400: oklch(71.2% 0.194 13.428);\n --color-rose-500: oklch(64.5% 0.246 16.439);\n --color-rose-600: oklch(58.6% 0.253 17.585);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-xs: 20rem;\n --container-md: 28rem;\n --container-2xl: 42rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-wider: 0.05em;\n --tracking-widest: 0.1em;\n --leading-tight: 1.25;\n --leading-relaxed: 1.625;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --animate-bounce: bounce 1s infinite;\n --blur-sm: 8px;\n --blur-md: 12px;\n --blur-xl: 24px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .-top-8 {\n top: calc(var(--spacing) * -8);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-2 {\n top: calc(var(--spacing) * 2);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .-right-4 {\n right: calc(var(--spacing) * -4);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .right-5 {\n right: calc(var(--spacing) * 5);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .-bottom-1\\.5 {\n bottom: calc(var(--spacing) * -1.5);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .bottom-20 {\n bottom: calc(var(--spacing) * 20);\n }\n .-left-4 {\n left: calc(var(--spacing) * -4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .left-2 {\n left: calc(var(--spacing) * 2);\n }\n .left-5 {\n left: calc(var(--spacing) * 5);\n }\n .left-6 {\n left: calc(var(--spacing) * 6);\n }\n .z-0 {\n z-index: 0;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[100\\] {\n z-index: 100;\n }\n .z-\\[9998\\] {\n z-index: 9998;\n }\n .z-\\[9999\\] {\n z-index: 9999;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-1 {\n margin-inline: calc(var(--spacing) * 1);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-1\\.5 {\n margin-block: calc(var(--spacing) * 1.5);\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .my-3 {\n margin-block: calc(var(--spacing) * 3);\n }\n .my-4 {\n margin-block: calc(var(--spacing) * 4);\n }\n .my-5 {\n margin-block: calc(var(--spacing) * 5);\n }\n .my-6 {\n margin-block: calc(var(--spacing) * 6);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-1\\.5 {\n margin-left: calc(var(--spacing) * 1.5);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .ml-auto {\n margin-left: auto;\n }\n .line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n .line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n }\n .\\!table {\n display: table !important;\n }\n .\\!table-cell {\n display: table-cell !important;\n }\n .\\!table-header-group {\n display: table-header-group !important;\n }\n .\\!table-row {\n display: table-row !important;\n }\n .\\!table-row-group {\n display: table-row-group !important;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-\\[4\\/3\\] {\n aspect-ratio: 4/3;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .h-1 {\n height: calc(var(--spacing) * 1);\n }\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-28 {\n height: calc(var(--spacing) * 28);\n }\n .h-32 {\n height: calc(var(--spacing) * 32);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-\\[400\\%\\] {\n height: 400%;\n }\n .h-full {\n height: 100%;\n }\n .max-h-24 {\n max-height: calc(var(--spacing) * 24);\n }\n .max-h-32 {\n max-height: calc(var(--spacing) * 32);\n }\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n .max-h-56 {\n max-height: calc(var(--spacing) * 56);\n }\n .max-h-60 {\n max-height: calc(var(--spacing) * 60);\n }\n .max-h-64 {\n max-height: calc(var(--spacing) * 64);\n }\n .max-h-\\[320px\\] {\n max-height: 320px;\n }\n .max-h-\\[400px\\] {\n max-height: 400px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[300px\\] {\n min-height: 300px;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-1\\.5 {\n width: calc(var(--spacing) * 1.5);\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-7 {\n width: calc(var(--spacing) * 7);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-14 {\n width: calc(var(--spacing) * 14);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-28 {\n width: calc(var(--spacing) * 28);\n }\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n .w-\\[400\\%\\] {\n width: 400%;\n }\n .w-\\[500px\\] {\n width: 500px;\n }\n .w-\\[min\\(88\\%\\,18rem\\)\\] {\n width: min(88%, 18rem);\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-\\[90\\%\\] {\n max-width: 90%;\n }\n .max-w-\\[92\\%\\] {\n max-width: 92%;\n }\n .max-w-\\[94\\%\\] {\n max-width: 94%;\n }\n .max-w-\\[calc\\(100vw-3rem\\)\\] {\n max-width: calc(100vw - 3rem);\n }\n .max-w-full {\n max-width: 100%;\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-none {\n max-width: none;\n }\n .max-w-xs {\n max-width: var(--container-xs);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-\\[11rem\\] {\n min-width: 11rem;\n }\n .min-w-\\[400px\\] {\n min-width: 400px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-4 {\n --tw-translate-y: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-90 {\n --tw-scale-x: 90%;\n --tw-scale-y: 90%;\n --tw-scale-z: 90%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-95 {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-110 {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .rotate-0 {\n rotate: 0deg;\n }\n .rotate-45 {\n rotate: 45deg;\n }\n .rotate-90 {\n rotate: 90deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-\\[pulse_1\\.2s_infinite\\] {\n animation: pulse 1.2s infinite;\n }\n .animate-bounce {\n animation: var(--animate-bounce);\n }\n .animate-ping {\n animation: var(--animate-ping);\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-nw-resize {\n cursor: nw-resize;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .snap-x {\n scroll-snap-type: x var(--tw-scroll-snap-strictness);\n }\n .snap-mandatory {\n --tw-scroll-snap-strictness: mandatory;\n }\n .snap-start {\n scroll-snap-align: start;\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n }\n .scrollbar-thumb-slate-200 {\n --tw-scrollbar-thumb: var(--color-slate-200);\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n .scrollbar-track-transparent {\n --tw-scrollbar-track: transparent;\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-row-reverse {\n flex-direction: row-reverse;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0\\.5 {\n gap: calc(var(--spacing) * 0.5);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .divide-y {\n :where(& > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n }\n .divide-slate-100 {\n :where(& > :not(:last-child)) {\n border-color: var(--color-slate-100);\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-3xl {\n border-radius: var(--radius-3xl);\n }\n .rounded-\\[2px\\] {\n border-radius: 2px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n .rounded-tl-\\[2px\\] {\n border-top-left-radius: 2px;\n }\n .rounded-tl-sm {\n border-top-left-radius: var(--radius-sm);\n }\n .rounded-tr-sm {\n border-top-right-radius: var(--radius-sm);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-l-2 {\n border-left-style: var(--tw-border-style);\n border-left-width: 2px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-amber-100 {\n border-color: var(--color-amber-100);\n }\n .border-amber-200 {\n border-color: var(--color-amber-200);\n }\n .border-emerald-100 {\n border-color: var(--color-emerald-100);\n }\n .border-emerald-200 {\n border-color: var(--color-emerald-200);\n }\n .border-emerald-500 {\n border-color: var(--color-emerald-500);\n }\n .border-emerald-500\\/20 {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n }\n }\n .border-indigo-200 {\n border-color: var(--color-indigo-200);\n }\n .border-indigo-500 {\n border-color: var(--color-indigo-500);\n }\n .border-red-200 {\n border-color: var(--color-red-200);\n }\n .border-rose-100 {\n border-color: var(--color-rose-100);\n }\n .border-rose-200 {\n border-color: var(--color-rose-200);\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-200\\/50 {\n border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent);\n }\n }\n .border-slate-200\\/60 {\n border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);\n }\n }\n .border-slate-200\\/80 {\n border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);\n }\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-slate-800 {\n border-color: var(--color-slate-800);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-white {\n border-color: var(--color-white);\n }\n .border-white\\/5 {\n border-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n .border-white\\/8 {\n border-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .bg-\\[\\#0d0d1a\\] {\n background-color: #0d0d1a;\n }\n .bg-\\[\\#080818\\] {\n background-color: #080818;\n }\n .bg-amber-50 {\n background-color: var(--color-amber-50);\n }\n .bg-amber-100 {\n background-color: var(--color-amber-100);\n }\n .bg-amber-200 {\n background-color: var(--color-amber-200);\n }\n .bg-amber-500 {\n background-color: var(--color-amber-500);\n }\n .bg-amber-500\\/80 {\n background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);\n }\n }\n .bg-blue-50 {\n background-color: var(--color-blue-50);\n }\n .bg-blue-100 {\n background-color: var(--color-blue-100);\n }\n .bg-blue-200 {\n background-color: var(--color-blue-200);\n }\n .bg-cyan-50 {\n background-color: var(--color-cyan-50);\n }\n .bg-cyan-100 {\n background-color: var(--color-cyan-100);\n }\n .bg-cyan-200 {\n background-color: var(--color-cyan-200);\n }\n .bg-emerald-50 {\n background-color: var(--color-emerald-50);\n }\n .bg-emerald-50\\/50 {\n background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-50) 50%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-200 {\n background-color: var(--color-emerald-200);\n }\n .bg-emerald-500 {\n background-color: var(--color-emerald-500);\n }\n .bg-emerald-500\\/10 {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n }\n }\n .bg-emerald-500\\/80 {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);\n }\n }\n .bg-indigo-50 {\n background-color: var(--color-indigo-50);\n }\n .bg-indigo-100 {\n background-color: var(--color-indigo-100);\n }\n .bg-indigo-500 {\n background-color: var(--color-indigo-500);\n }\n .bg-indigo-600 {\n background-color: var(--color-indigo-600);\n }\n .bg-orange-100 {\n background-color: var(--color-orange-100);\n }\n .bg-pink-50 {\n background-color: var(--color-pink-50);\n }\n .bg-pink-100 {\n background-color: var(--color-pink-100);\n }\n .bg-pink-200 {\n background-color: var(--color-pink-200);\n }\n .bg-purple-50 {\n background-color: var(--color-purple-50);\n }\n .bg-purple-100 {\n background-color: var(--color-purple-100);\n }\n .bg-purple-200 {\n background-color: var(--color-purple-200);\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-500 {\n background-color: var(--color-red-500);\n }\n .bg-rose-50 {\n background-color: var(--color-rose-50);\n }\n .bg-rose-500 {\n background-color: var(--color-rose-500);\n }\n .bg-rose-500\\/80 {\n background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-500) 80%, transparent);\n }\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-50\\/20 {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 20%, transparent);\n }\n }\n .bg-slate-50\\/50 {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);\n }\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-slate-100\\/50 {\n background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent);\n }\n }\n .bg-slate-200 {\n background-color: var(--color-slate-200);\n }\n .bg-slate-400 {\n background-color: var(--color-slate-400);\n }\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-slate-900\\/50 {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n }\n }\n .bg-slate-900\\/90 {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n }\n }\n .bg-slate-950 {\n background-color: var(--color-slate-950);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-violet-100 {\n background-color: var(--color-violet-100);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/60 {\n background-color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n .bg-white\\/90 {\n background-color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n .bg-gradient-to-br {\n --tw-gradient-position: to bottom right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-slate-100 {\n --tw-gradient-from: var(--color-slate-100);\n --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));\n }\n .to-slate-200 {\n --tw-gradient-to: var(--color-slate-200);\n --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));\n }\n .object-cover {\n object-fit: cover;\n }\n .p-0\\.5 {\n padding: calc(var(--spacing) * 0.5);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-2\\.5 {\n padding: calc(var(--spacing) * 2.5);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .p-10 {\n padding: calc(var(--spacing) * 10);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-12 {\n padding-block: calc(var(--spacing) * 12);\n }\n .pt-1 {\n padding-top: calc(var(--spacing) * 1);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pr-1 {\n padding-right: calc(var(--spacing) * 1);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .align-middle {\n vertical-align: middle;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[9px\\] {\n font-size: 9px;\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre {\n white-space: pre;\n }\n .whitespace-pre-line {\n white-space: pre-line;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-amber-400 {\n color: var(--color-amber-400);\n }\n .text-amber-500 {\n color: var(--color-amber-500);\n }\n .text-amber-600 {\n color: var(--color-amber-600);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-amber-800 {\n color: var(--color-amber-800);\n }\n .text-amber-900 {\n color: var(--color-amber-900);\n }\n .text-amber-950 {\n color: var(--color-amber-950);\n }\n .text-blue-700 {\n color: var(--color-blue-700);\n }\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n .text-blue-950 {\n color: var(--color-blue-950);\n }\n .text-cyan-700 {\n color: var(--color-cyan-700);\n }\n .text-cyan-800 {\n color: var(--color-cyan-800);\n }\n .text-cyan-950 {\n color: var(--color-cyan-950);\n }\n .text-emerald-400 {\n color: var(--color-emerald-400);\n }\n .text-emerald-500 {\n color: var(--color-emerald-500);\n }\n .text-emerald-500\\/70 {\n color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-emerald-500) 70%, transparent);\n }\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-emerald-800 {\n color: var(--color-emerald-800);\n }\n .text-emerald-950 {\n color: var(--color-emerald-950);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-indigo-200\\/85 {\n color: color-mix(in srgb, oklch(87% 0.065 274.039) 85%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-indigo-200) 85%, transparent);\n }\n }\n .text-indigo-400 {\n color: var(--color-indigo-400);\n }\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n .text-indigo-600 {\n color: var(--color-indigo-600);\n }\n .text-indigo-900 {\n color: var(--color-indigo-900);\n }\n .text-indigo-950 {\n color: var(--color-indigo-950);\n }\n .text-orange-950 {\n color: var(--color-orange-950);\n }\n .text-pink-700 {\n color: var(--color-pink-700);\n }\n .text-pink-800 {\n color: var(--color-pink-800);\n }\n .text-pink-950 {\n color: var(--color-pink-950);\n }\n .text-purple-700 {\n color: var(--color-purple-700);\n }\n .text-purple-800 {\n color: var(--color-purple-800);\n }\n .text-purple-950 {\n color: var(--color-purple-950);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-600 {\n color: var(--color-red-600);\n }\n .text-rose-400 {\n color: var(--color-rose-400);\n }\n .text-rose-500 {\n color: var(--color-rose-500);\n }\n .text-rose-600 {\n color: var(--color-rose-600);\n }\n .text-slate-100 {\n color: var(--color-slate-100);\n }\n .text-slate-200 {\n color: var(--color-slate-200);\n }\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-violet-900 {\n color: var(--color-violet-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .text-white\\/25 {\n color: color-mix(in srgb, #fff 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 25%, transparent);\n }\n }\n .text-white\\/35 {\n color: color-mix(in srgb, #fff 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 35%, transparent);\n }\n }\n .lowercase {\n text-transform: lowercase;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .placeholder-slate-400 {\n &::placeholder {\n color: var(--color-slate-400);\n }\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-20 {\n opacity: 20%;\n }\n .opacity-30 {\n opacity: 30%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-rose-500\\/20 {\n --tw-shadow-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-500) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .ring-slate-200\\/80 {\n --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent);\n }\n }\n .ring-offset-1 {\n --tw-ring-offset-width: 1px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n .ring-offset-transparent {\n --tw-ring-offset-color: transparent;\n }\n .drop-shadow-2xl {\n --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));\n --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur-md {\n --tw-backdrop-blur: blur(var(--blur-md));\n -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,);\n 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,);\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n -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,);\n 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,);\n }\n .backdrop-blur-xl {\n --tw-backdrop-blur: blur(var(--blur-xl));\n -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,);\n 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,);\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-500 {\n --tw-duration: 500ms;\n transition-duration: 500ms;\n }\n .duration-700 {\n --tw-duration: 700ms;\n transition-duration: 700ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .select-text {\n -webkit-user-select: text;\n user-select: text;\n }\n .\\[animation-delay\\:0ms\\] {\n animation-delay: 0ms;\n }\n .\\[animation-delay\\:150ms\\] {\n animation-delay: 150ms;\n }\n .\\[animation-delay\\:300ms\\] {\n animation-delay: 300ms;\n }\n .group-hover\\:scale-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:scale-105 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:animate-\\[gradientMove_3\\.5s_ease-in-out_infinite_alternate\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n animation: gradientMove 3.5s ease-in-out infinite alternate;\n }\n }\n }\n .group-hover\\:animate-\\[shapeshift_5s_ease-in-out_infinite_forwards\\] {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n animation: shapeshift 5s ease-in-out infinite forwards;\n }\n }\n }\n .group-hover\\:rounded-none {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-radius: 0;\n }\n }\n }\n .group-hover\\:border-slate-500 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-color: var(--color-slate-500);\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus-within\\:border-slate-300 {\n &:focus-within {\n border-color: var(--color-slate-300);\n }\n }\n .hover\\:scale-105 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .hover\\:scale-110 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .hover\\:scale-\\[1\\.01\\] {\n &:hover {\n @media (hover: hover) {\n scale: 1.01;\n }\n }\n }\n .hover\\:scale-\\[1\\.02\\] {\n &:hover {\n @media (hover: hover) {\n scale: 1.02;\n }\n }\n }\n .hover\\:border-emerald-200 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-emerald-200);\n }\n }\n }\n .hover\\:border-rose-200 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-rose-200);\n }\n }\n }\n .hover\\:border-slate-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-300);\n }\n }\n }\n .hover\\:border-slate-300\\/60 {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-slate-300) 60%, transparent);\n }\n }\n }\n }\n .hover\\:border-slate-800 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-800);\n }\n }\n }\n .hover\\:bg-emerald-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-emerald-50);\n }\n }\n }\n .hover\\:bg-rose-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-rose-50);\n }\n }\n }\n .hover\\:bg-rose-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-rose-600);\n }\n }\n }\n .hover\\:bg-slate-50\\/60 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);\n }\n }\n }\n }\n .hover\\:bg-slate-50\\/70 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);\n }\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-200);\n }\n }\n }\n .hover\\:bg-slate-800 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-800);\n }\n }\n }\n .hover\\:bg-white {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-white);\n }\n }\n }\n .hover\\:bg-white\\/5 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n }\n .hover\\:text-blue-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-blue-500);\n }\n }\n }\n .hover\\:text-emerald-400 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-emerald-400);\n }\n }\n }\n .hover\\:text-emerald-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-emerald-500);\n }\n }\n }\n .hover\\:text-indigo-300 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-300);\n }\n }\n }\n .hover\\:text-indigo-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-500);\n }\n }\n }\n .hover\\:text-rose-500 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-500);\n }\n }\n }\n .hover\\:text-slate-600 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-600);\n }\n }\n }\n .hover\\:text-slate-900 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-900);\n }\n }\n }\n .hover\\:text-white\\/80 {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n }\n }\n .hover\\:opacity-90 {\n &:hover {\n @media (hover: hover) {\n opacity: 90%;\n }\n }\n }\n .hover\\:shadow-lg {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n }\n .hover\\:shadow-md {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n }\n .focus\\:border-emerald-500 {\n &:focus {\n border-color: var(--color-emerald-500);\n }\n }\n .active\\:scale-95 {\n &:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .active\\:scale-\\[0\\.98\\] {\n &:active {\n scale: 0.98;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-30 {\n &:disabled {\n opacity: 30%;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .disabled\\:hover\\:scale-100 {\n &:disabled {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n }\n .disabled\\:active\\:scale-100 {\n &:disabled {\n &:active {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .sm\\:grid-cols-2 {\n @media (width >= 40rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:opacity-0 {\n @media (width >= 48rem) {\n opacity: 0%;\n }\n }\n .md\\:group-hover\\/carousel\\:opacity-100 {\n @media (width >= 48rem) {\n &:is(:where(.group\\/carousel):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n }\n .dark\\:scrollbar-thumb-white\\/10 {\n @media (prefers-color-scheme: dark) {\n --tw-scrollbar-thumb: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-scrollbar-thumb: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);\n }\n }\n .dark\\:divide-white\\/5 {\n @media (prefers-color-scheme: dark) {\n :where(& > :not(:last-child)) {\n border-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n }\n .dark\\:border-amber-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-amber-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-emerald-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-emerald-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-emerald-500\\/25 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);\n }\n }\n }\n .dark\\:border-indigo-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-red-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-rose-400\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);\n }\n }\n }\n .dark\\:border-rose-500\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);\n }\n }\n }\n .dark\\:border-rose-500\\/25 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-rose-500) 25%, transparent);\n }\n }\n }\n .dark\\:border-white\\/5 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n .dark\\:border-white\\/8 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n }\n .dark\\:border-white\\/10 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n .dark\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n .dark\\:bg-\\[\\#0f0f1a\\] {\n @media (prefers-color-scheme: dark) {\n background-color: #0f0f1a;\n }\n }\n .dark\\:bg-\\[\\#0f0f1a\\]\\/90 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in oklab, #0f0f1a 90%, transparent);\n }\n }\n .dark\\:bg-\\[\\#080811\\] {\n @media (prefers-color-scheme: dark) {\n background-color: #080811;\n }\n }\n .dark\\:bg-amber-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-amber-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-amber-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-amber-800\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-800) 30%, transparent);\n }\n }\n }\n .dark\\:bg-amber-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-amber-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-black\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n }\n .dark\\:bg-black\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #000 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n }\n }\n }\n .dark\\:bg-blue-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-blue-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-blue-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-blue-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-cyan-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(52% 0.105 223.128) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-cyan-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-cyan-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(39.8% 0.07 227.392) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-cyan-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-cyan-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-cyan-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-400 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-emerald-400);\n }\n }\n .dark\\:bg-emerald-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-500\\/5 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(50.8% 0.118 165.612) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-800\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(43.2% 0.095 166.913) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-800) 40%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-emerald-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-400 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-indigo-400);\n }\n }\n .dark\\:bg-indigo-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(45.7% 0.24 277.023) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-800\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(39.8% 0.195 277.366) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-800) 30%, transparent);\n }\n }\n }\n .dark\\:bg-indigo-900\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);\n }\n }\n }\n .dark\\:bg-orange-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(55.3% 0.195 38.402) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-orange-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-pink-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(52.5% 0.223 3.958) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-pink-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-pink-800\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(45.9% 0.187 3.815) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-pink-800) 30%, transparent);\n }\n }\n }\n .dark\\:bg-pink-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(40.8% 0.153 2.432) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-pink-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-pink-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(28.4% 0.109 3.907) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-pink-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-purple-700\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(49.6% 0.265 301.924) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-purple-700) 40%, transparent);\n }\n }\n }\n .dark\\:bg-purple-800\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-purple-800) 40%, transparent);\n }\n }\n }\n .dark\\:bg-purple-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-purple-950\\/40 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-purple-950) 40%, transparent);\n }\n }\n }\n .dark\\:bg-red-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-rose-400\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);\n }\n }\n }\n .dark\\:bg-rose-500\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);\n }\n }\n }\n .dark\\:bg-slate-700 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-700);\n }\n }\n .dark\\:bg-slate-800 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-800);\n }\n }\n .dark\\:bg-slate-900 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-900);\n }\n }\n .dark\\:bg-slate-900\\/50 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);\n }\n }\n }\n .dark\\:bg-slate-900\\/80 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);\n }\n }\n }\n .dark\\:bg-slate-950 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-slate-950);\n }\n }\n .dark\\:bg-transparent {\n @media (prefers-color-scheme: dark) {\n background-color: transparent;\n }\n }\n .dark\\:bg-violet-800\\/30 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(43.2% 0.232 292.759) 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-violet-800) 30%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/3 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 3%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 3%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/5 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/8 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 8%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 8%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n .dark\\:bg-white\\/60 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n .dark\\:from-white\\/10 {\n @media (prefers-color-scheme: dark) {\n --tw-gradient-from: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n --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));\n }\n }\n .dark\\:to-white\\/5 {\n @media (prefers-color-scheme: dark) {\n --tw-gradient-to: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-to: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n --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));\n }\n }\n .dark\\:text-amber-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-amber-100);\n }\n }\n .dark\\:text-amber-200 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-amber-200);\n }\n }\n .dark\\:text-amber-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-amber-300);\n }\n }\n .dark\\:text-amber-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-amber-400);\n }\n }\n .dark\\:text-blue-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-blue-100);\n }\n }\n .dark\\:text-blue-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-blue-300);\n }\n }\n .dark\\:text-blue-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-blue-400);\n }\n }\n .dark\\:text-cyan-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-cyan-100);\n }\n }\n .dark\\:text-cyan-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-cyan-300);\n }\n }\n .dark\\:text-cyan-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-cyan-400);\n }\n }\n .dark\\:text-emerald-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-emerald-100);\n }\n }\n .dark\\:text-emerald-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-emerald-300);\n }\n }\n .dark\\:text-emerald-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-emerald-400);\n }\n }\n .dark\\:text-emerald-500\\/50 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);\n }\n }\n }\n .dark\\:text-indigo-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-indigo-100);\n }\n }\n .dark\\:text-indigo-200 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-indigo-200);\n }\n }\n .dark\\:text-indigo-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-indigo-400);\n }\n }\n .dark\\:text-indigo-400\\/70 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, oklch(67.3% 0.182 276.935) 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-indigo-400) 70%, transparent);\n }\n }\n }\n .dark\\:text-orange-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-orange-100);\n }\n }\n .dark\\:text-pink-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-pink-100);\n }\n }\n .dark\\:text-pink-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-pink-300);\n }\n }\n .dark\\:text-pink-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-pink-400);\n }\n }\n .dark\\:text-purple-100 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-purple-100);\n }\n }\n .dark\\:text-purple-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-purple-300);\n }\n }\n .dark\\:text-purple-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-purple-400);\n }\n }\n .dark\\:text-red-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-red-400);\n }\n }\n .dark\\:text-rose-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-rose-400);\n }\n }\n .dark\\:text-slate-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-slate-300);\n }\n }\n .dark\\:text-slate-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-slate-400);\n }\n }\n .dark\\:text-violet-200 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-violet-200);\n }\n }\n .dark\\:text-white {\n @media (prefers-color-scheme: dark) {\n color: var(--color-white);\n }\n }\n .dark\\:text-white\\/20 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n .dark\\:text-white\\/30 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 30%, transparent);\n }\n }\n }\n .dark\\:text-white\\/40 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 40%, transparent);\n }\n }\n }\n .dark\\:text-white\\/50 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 50%, transparent);\n }\n }\n }\n .dark\\:text-white\\/60 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n .dark\\:text-white\\/70 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n }\n .dark\\:text-white\\/75 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 75%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 75%, transparent);\n }\n }\n }\n .dark\\:text-white\\/80 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n }\n .dark\\:text-white\\/90 {\n @media (prefers-color-scheme: dark) {\n color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n }\n .dark\\:placeholder-white\\/30 {\n @media (prefers-color-scheme: dark) {\n &::placeholder {\n color: color-mix(in srgb, #fff 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 30%, transparent);\n }\n }\n }\n }\n .dark\\:ring-white\\/10 {\n @media (prefers-color-scheme: dark) {\n --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n .dark\\:group-hover\\:border-white\\/50 {\n @media (prefers-color-scheme: dark) {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n }\n }\n }\n }\n }\n .dark\\:focus-within\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:focus-within {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n .dark\\:hover\\:border-emerald-500\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:border-rose-500\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:border-white\\/15 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:border-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n border-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-emerald-500\\/10 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-rose-500\\/10 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/5 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/10 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:bg-white\\/20 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #fff 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-blue-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-blue-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-emerald-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-emerald-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-indigo-300 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-300);\n }\n }\n }\n }\n .dark\\:hover\\:text-indigo-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-indigo-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-rose-400 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: var(--color-rose-400);\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/60 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/70 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/80 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n }\n }\n }\n .dark\\:hover\\:text-white\\/90 {\n @media (prefers-color-scheme: dark) {\n &:hover {\n @media (hover: hover) {\n color: color-mix(in srgb, #fff 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 90%, transparent);\n }\n }\n }\n }\n }\n}\n@layer base {\n :root {\n --star: shape(evenodd from 50% 24.787%, curve by 7.143% 18.016% with 0% 0% / 2.9725% 13.814%, curve by 17.882% 7.197% with 4.171% 4.2025% / 17.882% 7.197%, curve by -17.882% 8.6765% with 0% 0% / -13.711% 4.474%, curve by -7.143% 16.5365% with -4.1705% 4.202% / -7.143% 16.5365%, curve by -8.6115% -16.5365% with 0% 0% / -4.441% -12.3345%, curve by -16.4135% -8.6765% with -4.171% -4.2025% / -16.4135% -8.6765%, curve by 16.4135% -7.197% with 0% 0% / 12.2425% -2.9945%, curve by 8.6115% -18.016% with 4.1705% -4.202% / 8.6115% -18.016%, close);\n --flower: shape(evenodd from 17.9665% 82.0335%, curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%, curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%, curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%, curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%, curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%, curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%, curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%, curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%, curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%, curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%, curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%, curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%, close);\n --hexagon: shape(evenodd from 6.47% 67.001%, curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%, curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%, curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%, curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%, curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%, curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%, curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%, curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%, curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%, curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%, curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%, curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%, close);\n --cylinder: shape(evenodd from 10.5845% 59.7305%, curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%, curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%, curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%, curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%, curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%, curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%, curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%, curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%, curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%, curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%, curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%, curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%, close);\n --circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);\n --heart: shape(evenodd from 51.311% 83.603%, curve by -8.333% -20.508% with -14.104% -4.287% / -16.406% -16.185%, curve by -4.271% -37.41% with -5.419% -9.658% / -6.815% -22.733%, curve by 13.589% -33.586% with 3.982% -7.448% / 8.411% -15.994%, curve by 28.187% -21.985% with 4.029% -4.29% / 4.029% -4.29%, curve by 33.835% 0.721% with 9.618% 4.647% / 22.541% 9.618%, curve by 37.596% 21.304% with 3.306% 13.266% / 7.589% 24.251%, curve by 21.985% 43.613% with -4.208% 3.982% / -15.994% 8.411%, curve by 0.721% 37.596% with -7.448% 4.029% / -15.994% 8.411%, curve by -16.185% 28.187% with -9.658% 5.419% / -22.733% 6.815%, curve by -37.41% 4.271% with -4.29% 4.029% / -4.29% 4.029%, curve by -33.586% -13.589% with -7.448% 3.982% / -15.994% 8.411%, curve by -28.187% -32.094% with -4.029% 4.029% / -4.029% 4.029%, close);\n --spiral: shape(evenodd from 13.347% 30.885%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, curve by -20.309% 16.907% with -7.146% -1.332% / -9.016% -2.812%, curve by -25.848% -13.087% with -7.017% -7.46% / -9.941% -15.041%, curve by 10.154% -25.731% with 2.473% -6.063% / 7.163% -10.656%, curve by 31.473% -7.963% with 8.814% 2.403% / 13.84% 8.748%, curve by 16.526% 20.487% with -4.058% 1.502% / -9.51% 3.304%, curve by 5.502% 18.447% with 11.052% 5.562% / 19.995% 9.169%, close);\n --sun: shape(evenodd from 12.758% 22.039%, curve by 2.2585% 27.561% with 4.517% 18.961% / 2.2585% 27.561%, curve by 3.187% -11.541% with 2.2585% -8.483% / 4.7615% -12.541%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, curve by 19.814% -34.731% with 0% 0% / -3.187% 11.541%, curve by 33.825% -14.163% with 8.961% -7.455% / 13.585% -11.059%, curve by 31.034% 31.034% with 31.034% 31.034% / 31.034% 31.034%, curve by 19.814% -34.731% with 4.7615% -12.541% / 2.2585% -27.561%, curve by 33.825% -14.163% with 2.2585% -8.483% / 4.517% -18.961%, close);\n --star2: shape(open from 28.947% 47.744%, curve by 24.042% -2.139% with 0% 0% / -24.042% 2.139%, curve by 4.208% -25.165% with 4.208% -25.165% / 4.208% -25.165%, curve by 2.341% -18.447% with 0% 0% / 1.888% -1.438%, curve by 32.355% 1.085% with 0% 0% / 25.984% 1.085%, curve by -4.655% 25.165% with 0% 0% / -4.655% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.566% -4.208% with 0% 0% / 2.072% -1.639%, curve by 30.069% 1.085% with 0% 0% / 24.156% 1.085%, curve by -2.791% 25.165% with 0% 0% / -2.791% 25.165%, curve by -4.208% -25.165% with -4.208% -25.165% / -4.208% -25.165%, curve by 2.116% -4.208% with 0% 0% / 1.659% -1.557%, close);\n --tri-star: shape(open from 25% 25%, curve by 25% 25% with 0% 0% / 25% 25%, close);\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }\n@property --tw-scrollbar-thumb { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-scrollbar-track { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-ordinal { syntax: "*"; inherits: false; }\n@property --tw-slashed-zero { syntax: "*"; inherits: false; }\n@property --tw-numeric-figure { syntax: "*"; inherits: false; }\n@property --tw-numeric-spacing { syntax: "*"; inherits: false; }\n@property --tw-numeric-fraction { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n@keyframes shapeshift {\n 0% {\n clip-path: var(--circle);\n rotate: 0turn;\n }\n 25% {\n clip-path: var(--flower);\n }\n 50% {\n clip-path: var(--cylinder);\n }\n 75% {\n clip-path: var(--hexagon);\n }\n 100% {\n clip-path: var(--circle);\n rotate: 1turn;\n }\n 120% {\n clip-path: var(--flower);\n }\n 140% {\n clip-path: var(--cylinder);\n }\n 160% {\n clip-path: var(--hexagon);\n }\n 180% {\n clip-path: var(--circle);\n rotate: 1turn;\n }\n}\n@keyframes gradientMove {\n 0% {\n translate: 0 0;\n }\n 100% {\n translate: -75% -75%;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-scroll-snap-strictness: proximity;\n --tw-scrollbar-thumb: #0000;\n --tw-scrollbar-track: #0000;\n --tw-space-y-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n');
|
|
107
110
|
|
|
108
111
|
// src/components/ChatWidget.tsx
|
|
109
112
|
var import_react13 = require("react");
|
|
@@ -1486,86 +1489,6 @@ function ObservabilityPanel({ trace, primaryColor = "#6366f1" }) {
|
|
|
1486
1489
|
] });
|
|
1487
1490
|
}
|
|
1488
1491
|
|
|
1489
|
-
// src/components/HourglassLoader.tsx
|
|
1490
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1491
|
-
var HourglassLoader = ({
|
|
1492
|
-
size = 16,
|
|
1493
|
-
primaryColor = "#10b981",
|
|
1494
|
-
glow = false
|
|
1495
|
-
}) => {
|
|
1496
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1497
|
-
"svg",
|
|
1498
|
-
{
|
|
1499
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1500
|
-
viewBox: "0 0 100 100",
|
|
1501
|
-
preserveAspectRatio: "xMidYMid",
|
|
1502
|
-
style: {
|
|
1503
|
-
width: size,
|
|
1504
|
-
height: size,
|
|
1505
|
-
background: "transparent",
|
|
1506
|
-
filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : "none"
|
|
1507
|
-
},
|
|
1508
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
|
|
1509
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1510
|
-
"animateTransform",
|
|
1511
|
-
{
|
|
1512
|
-
attributeName: "transform",
|
|
1513
|
-
type: "rotate",
|
|
1514
|
-
calcMode: "spline",
|
|
1515
|
-
values: "0 50 50; 0 50 50; 180 50 50",
|
|
1516
|
-
keyTimes: "0; 0.8; 1",
|
|
1517
|
-
keySplines: "0 0 1 1; 0.4 0 0.2 1",
|
|
1518
|
-
dur: "2s",
|
|
1519
|
-
repeatCount: "indefinite"
|
|
1520
|
-
}
|
|
1521
|
-
),
|
|
1522
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1523
|
-
"path",
|
|
1524
|
-
{
|
|
1525
|
-
d: "M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z",
|
|
1526
|
-
fill: "none",
|
|
1527
|
-
stroke: primaryColor,
|
|
1528
|
-
strokeWidth: "5",
|
|
1529
|
-
strokeLinejoin: "round",
|
|
1530
|
-
strokeLinecap: "round"
|
|
1531
|
-
}
|
|
1532
|
-
),
|
|
1533
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1534
|
-
"animate",
|
|
1535
|
-
{
|
|
1536
|
-
attributeName: "d",
|
|
1537
|
-
values: "M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z",
|
|
1538
|
-
keyTimes: "0; 0.8; 1",
|
|
1539
|
-
dur: "2s",
|
|
1540
|
-
repeatCount: "indefinite"
|
|
1541
|
-
}
|
|
1542
|
-
) }),
|
|
1543
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1544
|
-
"animate",
|
|
1545
|
-
{
|
|
1546
|
-
attributeName: "d",
|
|
1547
|
-
values: "M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z",
|
|
1548
|
-
keyTimes: "0; 0.8; 1",
|
|
1549
|
-
dur: "2s",
|
|
1550
|
-
repeatCount: "indefinite"
|
|
1551
|
-
}
|
|
1552
|
-
) }),
|
|
1553
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "50", y1: "50", x2: "50", y2: "80", stroke: primaryColor, strokeWidth: "3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1554
|
-
"animate",
|
|
1555
|
-
{
|
|
1556
|
-
attributeName: "opacity",
|
|
1557
|
-
values: "0; 1; 1; 0; 0",
|
|
1558
|
-
keyTimes: "0; 0.1; 0.7; 0.8; 1",
|
|
1559
|
-
dur: "2s",
|
|
1560
|
-
repeatCount: "indefinite"
|
|
1561
|
-
}
|
|
1562
|
-
) })
|
|
1563
|
-
] })
|
|
1564
|
-
}
|
|
1565
|
-
);
|
|
1566
|
-
};
|
|
1567
|
-
var HourglassLoader_default = HourglassLoader;
|
|
1568
|
-
|
|
1569
1492
|
// src/utils/synonyms.ts
|
|
1570
1493
|
var FIELD_SYNONYMS = {
|
|
1571
1494
|
name: ["product", "item", "title", "label", "heading", "subject", "product name", "item name"],
|
|
@@ -1938,7 +1861,7 @@ var import_react8 = __toESM(require("react"));
|
|
|
1938
1861
|
|
|
1939
1862
|
// src/components/UIDispatcher.tsx
|
|
1940
1863
|
var import_react7 = __toESM(require("react"));
|
|
1941
|
-
var
|
|
1864
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1942
1865
|
function normalizeTabularRows(rows, columns) {
|
|
1943
1866
|
if (!Array.isArray(rows)) return [];
|
|
1944
1867
|
const SYNONYMS = {
|
|
@@ -2052,13 +1975,13 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2052
1975
|
}
|
|
2053
1976
|
}, [rawContent, isStreaming]);
|
|
2054
1977
|
if ("loading" in result) {
|
|
2055
|
-
return /* @__PURE__ */ (0,
|
|
2056
|
-
/* @__PURE__ */ (0,
|
|
2057
|
-
/* @__PURE__ */ (0,
|
|
1978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse", children: [
|
|
1979
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
|
|
1980
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-slate-500 font-medium italic", children: "Preparing view..." })
|
|
2058
1981
|
] });
|
|
2059
1982
|
}
|
|
2060
1983
|
if ("error" in result) {
|
|
2061
|
-
return /* @__PURE__ */ (0,
|
|
1984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: rawContent }) });
|
|
2062
1985
|
}
|
|
2063
1986
|
const { config } = result;
|
|
2064
1987
|
const isCompact = viewportSize === "compact";
|
|
@@ -2066,10 +1989,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2066
1989
|
const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
|
|
2067
1990
|
switch (config.view) {
|
|
2068
1991
|
case "chart":
|
|
2069
|
-
return /* @__PURE__ */ (0,
|
|
2070
|
-
config.title && /* @__PURE__ */ (0,
|
|
2071
|
-
hasDescription && /* @__PURE__ */ (0,
|
|
2072
|
-
/* @__PURE__ */ (0,
|
|
1992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden`, children: [
|
|
1993
|
+
config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2`, children: config.title }),
|
|
1994
|
+
hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
|
|
1995
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2073
1996
|
DynamicChart,
|
|
2074
1997
|
{
|
|
2075
1998
|
config: {
|
|
@@ -2085,7 +2008,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2085
2008
|
isStreaming
|
|
2086
2009
|
}
|
|
2087
2010
|
),
|
|
2088
|
-
hasInsights && /* @__PURE__ */ (0,
|
|
2011
|
+
hasInsights && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-4 flex flex-wrap gap-2 px-2", children: (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2089
2012
|
"span",
|
|
2090
2013
|
{
|
|
2091
2014
|
className: `rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? "px-2.5 py-1 text-[10px]" : "px-3 py-1 text-[11px]"} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`,
|
|
@@ -2095,10 +2018,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2095
2018
|
)) })
|
|
2096
2019
|
] });
|
|
2097
2020
|
case "carousel":
|
|
2098
|
-
return /* @__PURE__ */ (0,
|
|
2099
|
-
config.title && /* @__PURE__ */ (0,
|
|
2100
|
-
hasDescription && /* @__PURE__ */ (0,
|
|
2101
|
-
/* @__PURE__ */ (0,
|
|
2021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "my-4", children: [
|
|
2022
|
+
config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500`, children: config.title }),
|
|
2023
|
+
hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
|
|
2024
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProductCarousel, { products: config.data.map((item) => {
|
|
2102
2025
|
var _a2;
|
|
2103
2026
|
return __spreadProps(__spreadValues({}, item), {
|
|
2104
2027
|
image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
|
|
@@ -2106,10 +2029,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2106
2029
|
}), primaryColor, onAddToCart })
|
|
2107
2030
|
] });
|
|
2108
2031
|
case "table":
|
|
2109
|
-
return /* @__PURE__ */ (0,
|
|
2110
|
-
config.title && /* @__PURE__ */ (0,
|
|
2111
|
-
hasDescription && /* @__PURE__ */ (0,
|
|
2112
|
-
/* @__PURE__ */ (0,
|
|
2032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto`, children: [
|
|
2033
|
+
config.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2`, children: config.title }),
|
|
2034
|
+
hasDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
|
|
2035
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2113
2036
|
VisualizationRenderer,
|
|
2114
2037
|
{
|
|
2115
2038
|
data: {
|
|
@@ -2132,7 +2055,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
|
|
|
2132
2055
|
}
|
|
2133
2056
|
|
|
2134
2057
|
// src/components/MarkdownComponents.tsx
|
|
2135
|
-
var
|
|
2058
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2136
2059
|
function createMarkdownComponents({
|
|
2137
2060
|
primaryColor,
|
|
2138
2061
|
accentColor,
|
|
@@ -2147,12 +2070,12 @@ function createMarkdownComponents({
|
|
|
2147
2070
|
table: (_a) => {
|
|
2148
2071
|
var props = __objRest(_a, []);
|
|
2149
2072
|
if (isStreaming) {
|
|
2150
|
-
return /* @__PURE__ */ (0,
|
|
2151
|
-
/* @__PURE__ */ (0,
|
|
2152
|
-
/* @__PURE__ */ (0,
|
|
2073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none", children: [
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
|
|
2075
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse", children: "Generating data table..." })
|
|
2153
2076
|
] });
|
|
2154
2077
|
}
|
|
2155
|
-
return /* @__PURE__ */ (0,
|
|
2078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2156
2079
|
"table",
|
|
2157
2080
|
__spreadValues({
|
|
2158
2081
|
className: "!table w-full text-left border-collapse min-w-[400px] text-sm"
|
|
@@ -2161,7 +2084,7 @@ function createMarkdownComponents({
|
|
|
2161
2084
|
},
|
|
2162
2085
|
thead: (_b) => {
|
|
2163
2086
|
var props = __objRest(_b, []);
|
|
2164
|
-
return /* @__PURE__ */ (0,
|
|
2087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2165
2088
|
"thead",
|
|
2166
2089
|
__spreadValues({
|
|
2167
2090
|
className: "!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
|
|
@@ -2170,11 +2093,11 @@ function createMarkdownComponents({
|
|
|
2170
2093
|
},
|
|
2171
2094
|
tbody: (_c) => {
|
|
2172
2095
|
var props = __objRest(_c, []);
|
|
2173
|
-
return /* @__PURE__ */ (0,
|
|
2096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
|
|
2174
2097
|
},
|
|
2175
2098
|
tr: (_d) => {
|
|
2176
2099
|
var props = __objRest(_d, []);
|
|
2177
|
-
return /* @__PURE__ */ (0,
|
|
2100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2178
2101
|
"tr",
|
|
2179
2102
|
__spreadValues({
|
|
2180
2103
|
className: "!table-row hover:bg-slate-50/70 dark:hover:bg-white/5 transition-colors"
|
|
@@ -2183,7 +2106,7 @@ function createMarkdownComponents({
|
|
|
2183
2106
|
},
|
|
2184
2107
|
th: (_e) => {
|
|
2185
2108
|
var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
|
|
2186
|
-
return /* @__PURE__ */ (0,
|
|
2109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2187
2110
|
"th",
|
|
2188
2111
|
__spreadProps(__spreadValues({
|
|
2189
2112
|
className: "!table-cell px-4 py-3 font-bold text-slate-700 dark:text-white/90 whitespace-nowrap text-[11px] uppercase tracking-wider text-left"
|
|
@@ -2194,7 +2117,7 @@ function createMarkdownComponents({
|
|
|
2194
2117
|
},
|
|
2195
2118
|
td: (_g) => {
|
|
2196
2119
|
var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
|
|
2197
|
-
return /* @__PURE__ */ (0,
|
|
2120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2198
2121
|
"td",
|
|
2199
2122
|
__spreadProps(__spreadValues({
|
|
2200
2123
|
className: "!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
|
|
@@ -2217,7 +2140,7 @@ function createMarkdownComponents({
|
|
|
2217
2140
|
const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
|
|
2218
2141
|
if (!inline && (lang === "ui" || lang === "chart" || lang === "json")) {
|
|
2219
2142
|
const content = String(children != null ? children : "").trim();
|
|
2220
|
-
return /* @__PURE__ */ (0,
|
|
2143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2221
2144
|
UIDispatcher,
|
|
2222
2145
|
{
|
|
2223
2146
|
rawContent: content,
|
|
@@ -2232,7 +2155,7 @@ function createMarkdownComponents({
|
|
|
2232
2155
|
if (!inline) {
|
|
2233
2156
|
const content = String(children != null ? children : "").trim();
|
|
2234
2157
|
if (content.startsWith("{") && content.endsWith("}")) {
|
|
2235
|
-
return /* @__PURE__ */ (0,
|
|
2158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2236
2159
|
UIDispatcher,
|
|
2237
2160
|
{
|
|
2238
2161
|
rawContent: content,
|
|
@@ -2244,11 +2167,48 @@ function createMarkdownComponents({
|
|
|
2244
2167
|
}
|
|
2245
2168
|
);
|
|
2246
2169
|
}
|
|
2170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CodeBlock, { language: lang, children: content });
|
|
2247
2171
|
}
|
|
2248
|
-
return /* @__PURE__ */ (0,
|
|
2172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", __spreadProps(__spreadValues({ className: "px-1.5 py-0.5 rounded bg-slate-100 dark:bg-white/10 text-rose-600 dark:text-rose-400 font-mono text-[11px]" }, props), { children: typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children) }));
|
|
2249
2173
|
}
|
|
2250
2174
|
};
|
|
2251
2175
|
}
|
|
2176
|
+
function CodeBlock({ children, language }) {
|
|
2177
|
+
const [copied, setCopied] = import_react8.default.useState(false);
|
|
2178
|
+
const handleCopy = async () => {
|
|
2179
|
+
try {
|
|
2180
|
+
await navigator.clipboard.writeText(children);
|
|
2181
|
+
setCopied(true);
|
|
2182
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
2183
|
+
} catch (e) {
|
|
2184
|
+
console.warn("Failed to copy code", e);
|
|
2185
|
+
}
|
|
2186
|
+
};
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "not-prose my-4 rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-slate-900 text-slate-100 shadow-lg select-text", children: [
|
|
2188
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-4 py-2 bg-slate-950 border-b border-slate-800 text-xs font-semibold text-slate-400 select-none", children: [
|
|
2189
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono lowercase", children: language || "code" }),
|
|
2190
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2191
|
+
"button",
|
|
2192
|
+
{
|
|
2193
|
+
onClick: handleCopy,
|
|
2194
|
+
className: "flex items-center gap-1.5 px-2 py-1 rounded hover:bg-slate-800 hover:text-slate-250 transition-colors cursor-pointer text-slate-400 border border-transparent hover:border-slate-800",
|
|
2195
|
+
type: "button",
|
|
2196
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
2197
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", className: "text-emerald-500", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polyline", { points: "20 6 9 17 4 12" }) }),
|
|
2198
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-emerald-500", children: "Copied!" })
|
|
2199
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
2200
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
|
|
2203
|
+
] }),
|
|
2204
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Copy" })
|
|
2205
|
+
] })
|
|
2206
|
+
}
|
|
2207
|
+
)
|
|
2208
|
+
] }),
|
|
2209
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-4 overflow-x-auto font-mono text-[11px] leading-relaxed text-slate-200 bg-slate-900/90 whitespace-pre", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children }) })
|
|
2210
|
+
] });
|
|
2211
|
+
}
|
|
2252
2212
|
function normaliseChild(children) {
|
|
2253
2213
|
if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react8.default.isValidElement(children)) {
|
|
2254
2214
|
return JSON.stringify(children);
|
|
@@ -2259,7 +2219,7 @@ function normaliseChild(children) {
|
|
|
2259
2219
|
// src/components/ThinkingBlock.tsx
|
|
2260
2220
|
var import_react9 = require("react");
|
|
2261
2221
|
var import_lucide_react6 = require("lucide-react");
|
|
2262
|
-
var
|
|
2222
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2263
2223
|
function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
|
|
2264
2224
|
const [isExpanded, setIsExpanded] = (0, import_react9.useState)(true);
|
|
2265
2225
|
const containerRef = (0, import_react9.useRef)(null);
|
|
@@ -2276,22 +2236,22 @@ function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
|
|
|
2276
2236
|
}
|
|
2277
2237
|
}, [thinking, isStreaming, isExpanded]);
|
|
2278
2238
|
const durationSec = thinkingMs ? (thinkingMs / 1e3).toFixed(1) : null;
|
|
2279
|
-
return /* @__PURE__ */ (0,
|
|
2280
|
-
/* @__PURE__ */ (0,
|
|
2239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full max-w-2xl my-1.5 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50/50 dark:bg-white/5 overflow-hidden transition-all duration-200", children: [
|
|
2240
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2281
2241
|
"button",
|
|
2282
2242
|
{
|
|
2283
2243
|
onClick: () => setIsExpanded(!isExpanded),
|
|
2284
2244
|
className: "w-full px-4 py-2.5 flex items-center justify-between text-xs font-medium text-slate-500 dark:text-white/40 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors cursor-pointer select-none",
|
|
2285
2245
|
children: [
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2287
|
-
isStreaming ? /* @__PURE__ */ (0,
|
|
2288
|
-
/* @__PURE__ */ (0,
|
|
2246
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2247
|
+
isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Loader2, { className: "w-3.5 h-3.5 animate-spin text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.Brain, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/40" }),
|
|
2248
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: isStreaming ? "Thinking..." : durationSec ? `Thought for ${durationSec}s` : "Thinking process" })
|
|
2289
2249
|
] }),
|
|
2290
|
-
/* @__PURE__ */ (0,
|
|
2250
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.ChevronRight, { className: "w-3.5 h-3.5 text-slate-400 dark:text-white/30" }) })
|
|
2291
2251
|
]
|
|
2292
2252
|
}
|
|
2293
2253
|
),
|
|
2294
|
-
isExpanded && /* @__PURE__ */ (0,
|
|
2254
|
+
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2295
2255
|
"div",
|
|
2296
2256
|
{
|
|
2297
2257
|
ref: containerRef,
|
|
@@ -2303,7 +2263,7 @@ function ThinkingBlock({ thinking, thinkingMs, isStreaming = false }) {
|
|
|
2303
2263
|
}
|
|
2304
2264
|
|
|
2305
2265
|
// src/components/MessageBubble.tsx
|
|
2306
|
-
var
|
|
2266
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2307
2267
|
function normalizePlusSeparatedLists(raw) {
|
|
2308
2268
|
return raw.split("\n").map((line) => {
|
|
2309
2269
|
const productListLine = /[—:]\s*\d+\s+\+\s+[A-Za-z]/.test(line) || /\b(products?|categories?|in stock|out of stock)\b/i.test(line);
|
|
@@ -2312,7 +2272,62 @@ function normalizePlusSeparatedLists(raw) {
|
|
|
2312
2272
|
}).join("\n");
|
|
2313
2273
|
}
|
|
2314
2274
|
function stripLeakedAnswerWrappers2(raw) {
|
|
2315
|
-
return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)
|
|
2275
|
+
return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>[\s\S]*?<\/prose>/gi, "$1").replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, "").replace(/\n{3,}/g, "\n\n").trim();
|
|
2276
|
+
}
|
|
2277
|
+
function formatTime(isoString) {
|
|
2278
|
+
if (!isoString) return "";
|
|
2279
|
+
try {
|
|
2280
|
+
const d = new Date(isoString);
|
|
2281
|
+
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
|
2282
|
+
} catch (e) {
|
|
2283
|
+
return "";
|
|
2284
|
+
}
|
|
2285
|
+
}
|
|
2286
|
+
function FeedbackBar({ messageId, onFeedback, primaryColor }) {
|
|
2287
|
+
const [rating, setRating] = import_react10.default.useState(null);
|
|
2288
|
+
const [submitting, setSubmitting] = import_react10.default.useState(false);
|
|
2289
|
+
const handleRate = async (r) => {
|
|
2290
|
+
if (rating !== null || submitting) return;
|
|
2291
|
+
setSubmitting(true);
|
|
2292
|
+
setRating(r);
|
|
2293
|
+
try {
|
|
2294
|
+
await onFeedback(messageId, r);
|
|
2295
|
+
} catch (e) {
|
|
2296
|
+
} finally {
|
|
2297
|
+
setSubmitting(false);
|
|
2298
|
+
}
|
|
2299
|
+
};
|
|
2300
|
+
const isLocked = rating !== null;
|
|
2301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
2302
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-3 w-px bg-slate-200 dark:bg-white/10 mx-1" }),
|
|
2303
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2304
|
+
"button",
|
|
2305
|
+
{
|
|
2306
|
+
onClick: () => handleRate("thumbs_up"),
|
|
2307
|
+
disabled: isLocked,
|
|
2308
|
+
title: rating === "thumbs_up" ? "You liked this" : "Good response",
|
|
2309
|
+
className: `group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${rating === "thumbs_up" ? "bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/25 text-emerald-600 dark:text-emerald-400 scale-110" : rating === "thumbs_down" ? "opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed" : "border-transparent text-slate-300 dark:text-white/20 hover:text-emerald-500 dark:hover:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:border-emerald-200 dark:hover:border-emerald-500/20 hover:scale-110"}`,
|
|
2310
|
+
children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ThumbsUp, { className: "w-3 h-3" }),
|
|
2312
|
+
!isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10", children: "Good response" })
|
|
2313
|
+
]
|
|
2314
|
+
}
|
|
2315
|
+
),
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2317
|
+
"button",
|
|
2318
|
+
{
|
|
2319
|
+
onClick: () => handleRate("thumbs_down"),
|
|
2320
|
+
disabled: isLocked,
|
|
2321
|
+
title: rating === "thumbs_down" ? "You disliked this" : "Bad response",
|
|
2322
|
+
className: `group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${rating === "thumbs_down" ? "bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/25 text-rose-600 dark:text-rose-400 scale-110" : rating === "thumbs_up" ? "opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed" : "border-transparent text-slate-300 dark:text-white/20 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 hover:border-rose-200 dark:hover:border-rose-500/20 hover:scale-110"}`,
|
|
2323
|
+
children: [
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ThumbsDown, { className: "w-3 h-3" }),
|
|
2325
|
+
!isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10", children: "Bad response" })
|
|
2326
|
+
]
|
|
2327
|
+
}
|
|
2328
|
+
),
|
|
2329
|
+
isLocked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `ml-1 text-[10px] font-semibold px-2 py-0.5 rounded-full border transition-all duration-300 ${rating === "thumbs_up" ? "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20" : "text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/20"}`, children: rating === "thumbs_up" ? "Helpful" : "Not helpful" })
|
|
2330
|
+
] });
|
|
2316
2331
|
}
|
|
2317
2332
|
function MessageBubble({
|
|
2318
2333
|
message,
|
|
@@ -2321,7 +2336,8 @@ function MessageBubble({
|
|
|
2321
2336
|
primaryColor = "#6366f1",
|
|
2322
2337
|
accentColor = "#8b5cf6",
|
|
2323
2338
|
onAddToCart,
|
|
2324
|
-
viewportSize = "large"
|
|
2339
|
+
viewportSize = "large",
|
|
2340
|
+
onFeedback
|
|
2325
2341
|
}) {
|
|
2326
2342
|
var _a;
|
|
2327
2343
|
const isUser = message.role === "user";
|
|
@@ -2349,7 +2365,7 @@ function MessageBubble({
|
|
|
2349
2365
|
if (type && !["text", "table"].includes(type)) return true;
|
|
2350
2366
|
}
|
|
2351
2367
|
if (structuredContent.payload) {
|
|
2352
|
-
return
|
|
2368
|
+
return /\"?(?:view|type|chartType)\"?\s*:\s*\"?(?:chart|carousel|pie|bar|line|product_carousel)\"?/i.test(structuredContent.payload);
|
|
2353
2369
|
}
|
|
2354
2370
|
return false;
|
|
2355
2371
|
}, [message.uiTransformation, structuredContent.payload]);
|
|
@@ -2415,17 +2431,19 @@ ${match.trim()}
|
|
|
2415
2431
|
() => createMarkdownComponents({ primaryColor, accentColor, isStreaming, onAddToCart, viewportSize }),
|
|
2416
2432
|
[primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
|
|
2417
2433
|
);
|
|
2418
|
-
|
|
2419
|
-
|
|
2434
|
+
const timeLabel = formatTime(message.createdAt);
|
|
2435
|
+
const isCompleted = !isStreaming && message.content;
|
|
2436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start`, children: [
|
|
2437
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2420
2438
|
"div",
|
|
2421
2439
|
{
|
|
2422
|
-
className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-
|
|
2440
|
+
className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-md transition-all duration-300 ${isUser ? "text-white" : "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-white/10 dark:to-white/5 text-slate-600 dark:text-white/70 ring-1 ring-slate-200/80 dark:ring-white/10"} ${isStreaming && !isUser ? "ring-2 ring-offset-1 ring-offset-transparent animate-pulse" : ""}`,
|
|
2423
2441
|
style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
|
|
2424
|
-
children: isUser ? /* @__PURE__ */ (0,
|
|
2442
|
+
children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
|
|
2425
2443
|
}
|
|
2426
2444
|
),
|
|
2427
|
-
/* @__PURE__ */ (0,
|
|
2428
|
-
!isUser && message.thinking && /* @__PURE__ */ (0,
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}`, children: [
|
|
2446
|
+
!isUser && message.thinking && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2429
2447
|
ThinkingBlock,
|
|
2430
2448
|
{
|
|
2431
2449
|
thinking: message.thinking,
|
|
@@ -2433,27 +2451,27 @@ ${match.trim()}
|
|
|
2433
2451
|
isStreaming: isStreaming && !message.content
|
|
2434
2452
|
}
|
|
2435
2453
|
),
|
|
2436
|
-
/* @__PURE__ */ (0,
|
|
2454
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2437
2455
|
"div",
|
|
2438
2456
|
{
|
|
2439
|
-
className: `relative group ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow
|
|
2457
|
+
className: `relative group ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed transition-shadow duration-200 ${isUser ? "text-white rounded-tr-sm shadow-md hover:shadow-lg" : "bg-white dark:bg-white/5 border border-slate-200/80 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm shadow-sm hover:shadow-md hover:border-slate-300/60 dark:hover:border-white/15"}`,
|
|
2440
2458
|
style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
|
|
2441
2459
|
children: [
|
|
2442
|
-
!isUser &&
|
|
2460
|
+
!isUser && isCompleted && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2443
2461
|
"button",
|
|
2444
2462
|
{
|
|
2445
2463
|
onClick: handleCopy,
|
|
2446
|
-
className: `absolute top-2 right-2 p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${copied ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400" : "bg-
|
|
2464
|
+
className: `absolute top-2 right-2 p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${copied ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400" : "bg-white/60 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 border-slate-200/60 dark:border-white/10 text-slate-300 dark:text-white/20 hover:text-slate-600 dark:hover:text-white/60 hover:border-slate-300 dark:hover:border-white/20"} opacity-0 group-hover:opacity-100 backdrop-blur-sm shadow-sm scale-95 group-hover:scale-100`,
|
|
2447
2465
|
title: copied ? "Copied!" : "Copy response",
|
|
2448
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
2466
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Copy, { className: "w-3.5 h-3.5" })
|
|
2449
2467
|
}
|
|
2450
2468
|
),
|
|
2451
|
-
isStreaming && !message.content ? /* @__PURE__ */ (0,
|
|
2452
|
-
/* @__PURE__ */ (0,
|
|
2453
|
-
/* @__PURE__ */ (0,
|
|
2454
|
-
/* @__PURE__ */ (0,
|
|
2455
|
-
] }) : /* @__PURE__ */ (0,
|
|
2456
|
-
!isUser && structuredContent.payload && /* @__PURE__ */ (0,
|
|
2469
|
+
isStreaming && !message.content ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1 py-1", children: [
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }),
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }),
|
|
2472
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })
|
|
2473
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}`, children: [
|
|
2474
|
+
!isUser && structuredContent.payload && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2457
2475
|
UIDispatcher,
|
|
2458
2476
|
{
|
|
2459
2477
|
rawContent: structuredContent.payload,
|
|
@@ -2464,19 +2482,14 @@ ${match.trim()}
|
|
|
2464
2482
|
viewportSize
|
|
2465
2483
|
}
|
|
2466
2484
|
),
|
|
2467
|
-
!shouldRenderStructuredOnly && /* @__PURE__ */ (0,
|
|
2468
|
-
isStreaming && /* @__PURE__ */ (0,
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
glow: false
|
|
2476
|
-
}
|
|
2477
|
-
),
|
|
2478
|
-
"Thinking..."
|
|
2479
|
-
] })
|
|
2485
|
+
!shouldRenderStructuredOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_markdown.default, { components: markdownComponents, children: processedMarkdown }),
|
|
2486
|
+
isStreaming && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2487
|
+
"span",
|
|
2488
|
+
{
|
|
2489
|
+
className: "inline-block w-2.5 h-4 ml-1.5 animate-[pulse_1.2s_infinite] align-middle rounded-sm",
|
|
2490
|
+
style: { backgroundColor: primaryColor }
|
|
2491
|
+
}
|
|
2492
|
+
)
|
|
2480
2493
|
] })
|
|
2481
2494
|
]
|
|
2482
2495
|
}
|
|
@@ -2491,7 +2504,7 @@ ${match.trim()}
|
|
|
2491
2504
|
)
|
|
2492
2505
|
);
|
|
2493
2506
|
if (hasProductSource) {
|
|
2494
|
-
return /* @__PURE__ */ (0,
|
|
2507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2495
2508
|
VisualizationRenderer,
|
|
2496
2509
|
{
|
|
2497
2510
|
data: { type: "product_carousel", title: "Recommended Products", description: "Loading...", data: [] },
|
|
@@ -2509,7 +2522,7 @@ ${match.trim()}
|
|
|
2509
2522
|
const isNegativeOrFallbackText = textContent.toLowerCase().includes("cannot answer") || textContent.toLowerCase().includes("no relevant data") || textContent.toLowerCase().includes("no data available") || typeof ui.title === "string" && ui.title.toLowerCase().includes("no data") || typeof ui.description === "string" && ui.description.toLowerCase().includes("no relevant data");
|
|
2510
2523
|
const shouldShow = !isNegativeOrFallbackText && (ui.type === "table" || !["text", "table"].includes(ui.type) || ui.type === "text" && !hasRichUI && allProducts.length === 0 && textContent && !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase()));
|
|
2511
2524
|
if (!shouldShow) return null;
|
|
2512
|
-
return /* @__PURE__ */ (0,
|
|
2525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2513
2526
|
VisualizationRenderer,
|
|
2514
2527
|
{
|
|
2515
2528
|
data: ui,
|
|
@@ -2520,7 +2533,7 @@ ${match.trim()}
|
|
|
2520
2533
|
}
|
|
2521
2534
|
) });
|
|
2522
2535
|
})(),
|
|
2523
|
-
!isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && /* @__PURE__ */ (0,
|
|
2536
|
+
!isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2524
2537
|
ProductCarousel,
|
|
2525
2538
|
{
|
|
2526
2539
|
products: allProducts,
|
|
@@ -2528,36 +2541,48 @@ ${match.trim()}
|
|
|
2528
2541
|
onAddToCart
|
|
2529
2542
|
}
|
|
2530
2543
|
) }),
|
|
2531
|
-
!isUser && /* @__PURE__ */ (0,
|
|
2532
|
-
sources && sources.length > 0 && /* @__PURE__ */ (0,
|
|
2544
|
+
!isUser && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-center gap-3 mt-1.5 w-full flex-wrap ${isCompact ? "gap-2" : "gap-3"}`, children: [
|
|
2545
|
+
sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2533
2546
|
"button",
|
|
2534
2547
|
{
|
|
2535
2548
|
onClick: () => setShowSources((s) => !s),
|
|
2536
|
-
className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1",
|
|
2549
|
+
className: "text-[11px] text-indigo-400 hover:text-indigo-300 dark:text-indigo-400/70 dark:hover:text-indigo-300 transition-colors flex items-center gap-1 font-medium",
|
|
2537
2550
|
children: [
|
|
2538
|
-
showSources ? /* @__PURE__ */ (0,
|
|
2551
|
+
showSources ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronRight, { className: "w-3 h-3" }),
|
|
2539
2552
|
sources.length,
|
|
2540
2553
|
" source",
|
|
2541
|
-
sources.length !== 1 ? "s" : ""
|
|
2542
|
-
" used"
|
|
2554
|
+
sources.length !== 1 ? "s" : ""
|
|
2543
2555
|
]
|
|
2544
2556
|
}
|
|
2545
2557
|
),
|
|
2546
|
-
message.trace && /* @__PURE__ */ (0,
|
|
2558
|
+
message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2547
2559
|
"button",
|
|
2548
2560
|
{
|
|
2549
2561
|
onClick: () => setShowTrace((t) => !t),
|
|
2550
|
-
className: "text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1",
|
|
2562
|
+
className: "text-[11px] text-emerald-500/70 hover:text-emerald-400 dark:text-emerald-500/50 dark:hover:text-emerald-400 transition-colors flex items-center gap-1 font-medium",
|
|
2551
2563
|
children: [
|
|
2552
|
-
/* @__PURE__ */ (0,
|
|
2553
|
-
showTrace ? "Hide
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Activity, { className: "w-3 h-3" }),
|
|
2565
|
+
showTrace ? "Hide trace" : "Trace"
|
|
2554
2566
|
]
|
|
2555
2567
|
}
|
|
2568
|
+
),
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1" }),
|
|
2570
|
+
timeLabel && isCompleted && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-slate-300 dark:text-white/20 font-medium select-none", children: [
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Clock, { className: "w-2.5 h-2.5" }),
|
|
2572
|
+
timeLabel
|
|
2573
|
+
] }),
|
|
2574
|
+
isCompleted && onFeedback && message.id && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2575
|
+
FeedbackBar,
|
|
2576
|
+
{
|
|
2577
|
+
messageId: message.id,
|
|
2578
|
+
onFeedback,
|
|
2579
|
+
primaryColor
|
|
2580
|
+
}
|
|
2556
2581
|
)
|
|
2557
2582
|
] }),
|
|
2558
|
-
/* @__PURE__ */ (0,
|
|
2559
|
-
showSources && sources && sources.length > 0 && /* @__PURE__ */ (0,
|
|
2560
|
-
showTrace && message.trace && /* @__PURE__ */ (0,
|
|
2583
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col gap-2 min-w-0", children: [
|
|
2584
|
+
showSources && sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 flex flex-col gap-2", children: sources.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SourceCard, { source: src, index: i }, src.id)) }),
|
|
2585
|
+
showTrace && message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ObservabilityPanel, { trace: message.trace, primaryColor })
|
|
2561
2586
|
] })
|
|
2562
2587
|
] })
|
|
2563
2588
|
] });
|
|
@@ -2584,9 +2609,19 @@ function readStoredMessages(storageKey) {
|
|
|
2584
2609
|
}
|
|
2585
2610
|
}
|
|
2586
2611
|
function useStoredMessages(storageKey, persist) {
|
|
2587
|
-
const [messages, setMessages] = React11.useState(
|
|
2612
|
+
const [messages, setMessages] = React11.useState([]);
|
|
2613
|
+
const isLoaded = React11.useRef(false);
|
|
2614
|
+
React11.useEffect(() => {
|
|
2615
|
+
if (persist) {
|
|
2616
|
+
const loaded = readStoredMessages(storageKey);
|
|
2617
|
+
if (loaded.length > 0) {
|
|
2618
|
+
setMessages(loaded);
|
|
2619
|
+
}
|
|
2620
|
+
}
|
|
2621
|
+
isLoaded.current = true;
|
|
2622
|
+
}, [storageKey, persist]);
|
|
2588
2623
|
React11.useEffect(() => {
|
|
2589
|
-
if (!persist || typeof window === "undefined") {
|
|
2624
|
+
if (!isLoaded.current || !persist || typeof window === "undefined") {
|
|
2590
2625
|
return;
|
|
2591
2626
|
}
|
|
2592
2627
|
if (messages.length === 0) {
|
|
@@ -2618,6 +2653,7 @@ function parseSseChunk(raw) {
|
|
|
2618
2653
|
function useRagChat(projectId, options = {}) {
|
|
2619
2654
|
const {
|
|
2620
2655
|
apiUrl = "/api/chat",
|
|
2656
|
+
retrivoraApiBase = "/api/retrivora",
|
|
2621
2657
|
namespace,
|
|
2622
2658
|
persist = true,
|
|
2623
2659
|
onReply,
|
|
@@ -2635,13 +2671,14 @@ function useRagChat(projectId, options = {}) {
|
|
|
2635
2671
|
}, [messages]);
|
|
2636
2672
|
const sendMessage = (0, import_react11.useCallback)(
|
|
2637
2673
|
async (text, opts) => {
|
|
2638
|
-
var _a, _b;
|
|
2674
|
+
var _a, _b, _c;
|
|
2639
2675
|
const trimmed = text.trim();
|
|
2640
2676
|
if (!trimmed || isLoading) return;
|
|
2641
2677
|
lastInputRef.current = trimmed;
|
|
2678
|
+
const userMsgId = (opts == null ? void 0 : opts.skipUserMessage) ? ((_a = messagesRef.current.filter((m) => m.role === "user").pop()) == null ? void 0 : _a.id) || `user_${Date.now()}` : `user_${Date.now()}`;
|
|
2642
2679
|
if (!(opts == null ? void 0 : opts.skipUserMessage)) {
|
|
2643
2680
|
const userMessage = {
|
|
2644
|
-
id:
|
|
2681
|
+
id: userMsgId,
|
|
2645
2682
|
role: "user",
|
|
2646
2683
|
content: trimmed,
|
|
2647
2684
|
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
@@ -2657,6 +2694,7 @@ function useRagChat(projectId, options = {}) {
|
|
|
2657
2694
|
abortControllerRef.current = controller;
|
|
2658
2695
|
try {
|
|
2659
2696
|
const history = messagesRef.current.map(({ role, content }) => ({ role, content }));
|
|
2697
|
+
const assistantMessageId = `assistant_${Date.now()}`;
|
|
2660
2698
|
const response = await fetch(apiUrl, {
|
|
2661
2699
|
method: "POST",
|
|
2662
2700
|
headers: __spreadValues({
|
|
@@ -2666,7 +2704,10 @@ function useRagChat(projectId, options = {}) {
|
|
|
2666
2704
|
body: JSON.stringify({
|
|
2667
2705
|
message: trimmed,
|
|
2668
2706
|
history,
|
|
2669
|
-
namespace: namespace != null ? namespace : projectId
|
|
2707
|
+
namespace: namespace != null ? namespace : projectId,
|
|
2708
|
+
sessionId: options.sessionId || "default",
|
|
2709
|
+
messageId: assistantMessageId,
|
|
2710
|
+
userMessageId: userMsgId
|
|
2670
2711
|
})
|
|
2671
2712
|
});
|
|
2672
2713
|
if (!response.ok) {
|
|
@@ -2707,7 +2748,6 @@ function useRagChat(projectId, options = {}) {
|
|
|
2707
2748
|
requestAnimationFrame(() => flushTextUpdate(msgId));
|
|
2708
2749
|
}
|
|
2709
2750
|
};
|
|
2710
|
-
const assistantMessageId = `assistant_${Date.now()}`;
|
|
2711
2751
|
setMessages((prev) => [
|
|
2712
2752
|
...prev,
|
|
2713
2753
|
{
|
|
@@ -2721,55 +2761,38 @@ function useRagChat(projectId, options = {}) {
|
|
|
2721
2761
|
const { done, value } = await reader.read();
|
|
2722
2762
|
if (done) break;
|
|
2723
2763
|
buffer += decoder.decode(value, { stream: true });
|
|
2724
|
-
const
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
for (const frame of
|
|
2730
|
-
if (frame.type === "text"
|
|
2764
|
+
const frames = parseSseChunk(buffer);
|
|
2765
|
+
const lastIndex = buffer.lastIndexOf("\n\n");
|
|
2766
|
+
if (lastIndex !== -1) {
|
|
2767
|
+
buffer = buffer.slice(lastIndex + 2);
|
|
2768
|
+
}
|
|
2769
|
+
for (const frame of frames) {
|
|
2770
|
+
if (frame.type === "text") {
|
|
2731
2771
|
assistantContent += frame.text;
|
|
2732
2772
|
pendingContentRef.current = assistantContent;
|
|
2733
2773
|
scheduleFlush(assistantMessageId);
|
|
2734
|
-
} else if (frame.type === "thinking"
|
|
2774
|
+
} else if (frame.type === "thinking") {
|
|
2735
2775
|
thinkingContent += frame.text;
|
|
2736
2776
|
pendingThinkingRef.current = thinkingContent;
|
|
2737
2777
|
scheduleFlush(assistantMessageId);
|
|
2738
2778
|
} else if (frame.type === "metadata") {
|
|
2739
|
-
sources = (
|
|
2779
|
+
sources = (_b = frame.sources) != null ? _b : [];
|
|
2740
2780
|
thinkingMs = frame.thinkingMs;
|
|
2741
|
-
hasNonTextFrame = true;
|
|
2742
2781
|
} else if (frame.type === "ui_transformation") {
|
|
2743
2782
|
uiTransformation = frame.data;
|
|
2744
|
-
hasNonTextFrame = true;
|
|
2745
2783
|
} else if (frame.type === "observability") {
|
|
2746
2784
|
trace = frame.data;
|
|
2747
|
-
hasNonTextFrame = true;
|
|
2748
2785
|
} else if (frame.type === "error") {
|
|
2749
|
-
|
|
2786
|
+
throw new Error(frame.error);
|
|
2750
2787
|
}
|
|
2751
2788
|
}
|
|
2752
|
-
if (hasNonTextFrame) {
|
|
2753
|
-
pendingFlush = false;
|
|
2754
|
-
setMessages(
|
|
2755
|
-
(prev) => prev.map(
|
|
2756
|
-
(msg) => msg.id === assistantMessageId ? __spreadProps(__spreadValues({}, msg), {
|
|
2757
|
-
content: assistantContent,
|
|
2758
|
-
thinking: thinkingContent || void 0,
|
|
2759
|
-
thinkingMs,
|
|
2760
|
-
sources: sources.length > 0 ? sources : msg.sources,
|
|
2761
|
-
uiTransformation: uiTransformation || msg.uiTransformation
|
|
2762
|
-
}) : msg
|
|
2763
|
-
)
|
|
2764
|
-
);
|
|
2765
|
-
}
|
|
2766
2789
|
}
|
|
2767
2790
|
if (buffer.trim()) {
|
|
2768
2791
|
for (const frame of parseSseChunk(buffer)) {
|
|
2769
2792
|
if (frame.type === "text" && frame.text) assistantContent += frame.text;
|
|
2770
2793
|
else if (frame.type === "thinking" && frame.text) thinkingContent += frame.text;
|
|
2771
2794
|
else if (frame.type === "metadata") {
|
|
2772
|
-
sources = (
|
|
2795
|
+
sources = (_c = frame.sources) != null ? _c : [];
|
|
2773
2796
|
thinkingMs = frame.thinkingMs;
|
|
2774
2797
|
} else if (frame.type === "observability") trace = frame.data;
|
|
2775
2798
|
}
|
|
@@ -2802,7 +2825,7 @@ function useRagChat(projectId, options = {}) {
|
|
|
2802
2825
|
abortControllerRef.current = null;
|
|
2803
2826
|
}
|
|
2804
2827
|
},
|
|
2805
|
-
[apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
|
|
2828
|
+
[apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages, options.headers, options.sessionId]
|
|
2806
2829
|
);
|
|
2807
2830
|
const clear = (0, import_react11.useCallback)(() => {
|
|
2808
2831
|
setMessages([]);
|
|
@@ -2824,6 +2847,70 @@ function useRagChat(projectId, options = {}) {
|
|
|
2824
2847
|
}
|
|
2825
2848
|
setIsLoading(false);
|
|
2826
2849
|
}, []);
|
|
2850
|
+
const loadHistory = (0, import_react11.useCallback)(async (sessionId) => {
|
|
2851
|
+
setIsLoading(true);
|
|
2852
|
+
setError(null);
|
|
2853
|
+
try {
|
|
2854
|
+
const res = await fetch(`${retrivoraApiBase}/history?sessionId=${encodeURIComponent(sessionId)}`);
|
|
2855
|
+
if (!res.ok) throw new Error(`Failed to load history: ${res.statusText}`);
|
|
2856
|
+
const data = await res.json();
|
|
2857
|
+
const loadedMessages = (data.history || []).map((msg) => ({
|
|
2858
|
+
id: msg.id,
|
|
2859
|
+
role: msg.role,
|
|
2860
|
+
content: msg.content,
|
|
2861
|
+
sources: msg.sources,
|
|
2862
|
+
uiTransformation: msg.uiTransformation,
|
|
2863
|
+
trace: msg.trace,
|
|
2864
|
+
createdAt: msg.createdAt
|
|
2865
|
+
}));
|
|
2866
|
+
setMessages(loadedMessages);
|
|
2867
|
+
} catch (err) {
|
|
2868
|
+
const msg = err instanceof Error ? err.message : "Failed to load history";
|
|
2869
|
+
setError(msg);
|
|
2870
|
+
onError == null ? void 0 : onError(msg);
|
|
2871
|
+
} finally {
|
|
2872
|
+
setIsLoading(false);
|
|
2873
|
+
}
|
|
2874
|
+
}, [retrivoraApiBase, onError, setMessages]);
|
|
2875
|
+
const clearHistory = (0, import_react11.useCallback)(async (sessionId) => {
|
|
2876
|
+
setIsLoading(true);
|
|
2877
|
+
setError(null);
|
|
2878
|
+
try {
|
|
2879
|
+
const res = await fetch(`${retrivoraApiBase}/history/clear`, {
|
|
2880
|
+
method: "POST",
|
|
2881
|
+
headers: { "Content-Type": "application/json" },
|
|
2882
|
+
body: JSON.stringify({ sessionId })
|
|
2883
|
+
});
|
|
2884
|
+
if (!res.ok) throw new Error(`Failed to clear history: ${res.statusText}`);
|
|
2885
|
+
setMessages([]);
|
|
2886
|
+
if (persist) localStorage.removeItem(storageKey);
|
|
2887
|
+
} catch (err) {
|
|
2888
|
+
const msg = err instanceof Error ? err.message : "Failed to clear history";
|
|
2889
|
+
setError(msg);
|
|
2890
|
+
onError == null ? void 0 : onError(msg);
|
|
2891
|
+
} finally {
|
|
2892
|
+
setIsLoading(false);
|
|
2893
|
+
}
|
|
2894
|
+
}, [retrivoraApiBase, onError, persist, setMessages, storageKey]);
|
|
2895
|
+
const submitFeedback = (0, import_react11.useCallback)(async (messageId, rating, comment) => {
|
|
2896
|
+
try {
|
|
2897
|
+
const res = await fetch(`${retrivoraApiBase}/feedback`, {
|
|
2898
|
+
method: "POST",
|
|
2899
|
+
headers: { "Content-Type": "application/json" },
|
|
2900
|
+
body: JSON.stringify({
|
|
2901
|
+
messageId,
|
|
2902
|
+
sessionId: options.sessionId || "default",
|
|
2903
|
+
rating,
|
|
2904
|
+
comment
|
|
2905
|
+
})
|
|
2906
|
+
});
|
|
2907
|
+
if (!res.ok) throw new Error(`Failed to submit feedback: ${res.statusText}`);
|
|
2908
|
+
} catch (err) {
|
|
2909
|
+
const msg = err instanceof Error ? err.message : "Failed to submit feedback";
|
|
2910
|
+
onError == null ? void 0 : onError(msg);
|
|
2911
|
+
throw err;
|
|
2912
|
+
}
|
|
2913
|
+
}, [retrivoraApiBase, onError, options.sessionId]);
|
|
2827
2914
|
return {
|
|
2828
2915
|
messages,
|
|
2829
2916
|
isLoading,
|
|
@@ -2832,12 +2919,15 @@ function useRagChat(projectId, options = {}) {
|
|
|
2832
2919
|
clear,
|
|
2833
2920
|
retry,
|
|
2834
2921
|
setMessages,
|
|
2835
|
-
stop
|
|
2922
|
+
stop,
|
|
2923
|
+
loadHistory,
|
|
2924
|
+
clearHistory,
|
|
2925
|
+
submitFeedback
|
|
2836
2926
|
};
|
|
2837
2927
|
}
|
|
2838
2928
|
|
|
2839
2929
|
// src/components/ChatWindow.tsx
|
|
2840
|
-
var
|
|
2930
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2841
2931
|
function ChatWindow({
|
|
2842
2932
|
className = "",
|
|
2843
2933
|
style,
|
|
@@ -2850,6 +2940,7 @@ function ChatWindow({
|
|
|
2850
2940
|
isMaximized = false,
|
|
2851
2941
|
onAddToCart,
|
|
2852
2942
|
apiUrl,
|
|
2943
|
+
retrivoraApiBase,
|
|
2853
2944
|
headers
|
|
2854
2945
|
}) {
|
|
2855
2946
|
var _a;
|
|
@@ -2860,9 +2951,10 @@ function ChatWindow({
|
|
|
2860
2951
|
const windowRef = (0, import_react12.useRef)(null);
|
|
2861
2952
|
const bottomRef = (0, import_react12.useRef)(null);
|
|
2862
2953
|
const inputRef = (0, import_react12.useRef)(null);
|
|
2863
|
-
const { messages, send, clear, isLoading, error, stop } = useRagChat(projectId, {
|
|
2954
|
+
const { messages, send, clear, isLoading, error, stop, submitFeedback } = useRagChat(projectId, {
|
|
2864
2955
|
namespace: projectId,
|
|
2865
2956
|
apiUrl,
|
|
2957
|
+
retrivoraApiBase,
|
|
2866
2958
|
headers
|
|
2867
2959
|
});
|
|
2868
2960
|
const [suggestions, setSuggestions] = (0, import_react12.useState)([]);
|
|
@@ -2995,85 +3087,85 @@ function ChatWindow({
|
|
|
2995
3087
|
}, 800);
|
|
2996
3088
|
return () => clearTimeout(timer);
|
|
2997
3089
|
}, [input, projectId]);
|
|
2998
|
-
return /* @__PURE__ */ (0,
|
|
3090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2999
3091
|
"div",
|
|
3000
3092
|
{
|
|
3001
3093
|
ref: windowRef,
|
|
3002
3094
|
className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
|
|
3003
3095
|
style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style),
|
|
3004
3096
|
children: [
|
|
3005
|
-
onResizeStart && /* @__PURE__ */ (0,
|
|
3097
|
+
onResizeStart && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3006
3098
|
"div",
|
|
3007
3099
|
{
|
|
3008
3100
|
onMouseDown: onResizeStart,
|
|
3009
3101
|
className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
|
|
3010
3102
|
title: "Drag to resize",
|
|
3011
|
-
children: /* @__PURE__ */ (0,
|
|
3103
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
|
|
3012
3104
|
}
|
|
3013
3105
|
),
|
|
3014
|
-
/* @__PURE__ */ (0,
|
|
3106
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
3015
3107
|
"div",
|
|
3016
3108
|
{
|
|
3017
3109
|
className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
|
|
3018
3110
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` },
|
|
3019
3111
|
children: [
|
|
3020
|
-
/* @__PURE__ */ (0,
|
|
3112
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
3021
3113
|
ui.logoUrl ? (
|
|
3022
3114
|
// eslint-disable-next-line @next/next/no-img-element
|
|
3023
|
-
/* @__PURE__ */ (0,
|
|
3024
|
-
) : /* @__PURE__ */ (0,
|
|
3115
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
|
|
3116
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3025
3117
|
"div",
|
|
3026
3118
|
{
|
|
3027
3119
|
className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
|
|
3028
3120
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
|
|
3029
|
-
children: /* @__PURE__ */ (0,
|
|
3121
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Bot, { className: "w-5 h-5 text-white" })
|
|
3030
3122
|
}
|
|
3031
3123
|
),
|
|
3032
|
-
/* @__PURE__ */ (0,
|
|
3033
|
-
/* @__PURE__ */ (0,
|
|
3034
|
-
ui.poweredBy && /* @__PURE__ */ (0,
|
|
3124
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
|
|
3125
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight", children: ui.title }),
|
|
3126
|
+
ui.poweredBy && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight", children: `Powered by ${ui.poweredBy}` })
|
|
3035
3127
|
] })
|
|
3036
3128
|
] }),
|
|
3037
|
-
/* @__PURE__ */ (0,
|
|
3038
|
-
/* @__PURE__ */ (0,
|
|
3039
|
-
/* @__PURE__ */ (0,
|
|
3129
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
3130
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2", children: [
|
|
3131
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }),
|
|
3040
3132
|
"Online"
|
|
3041
3133
|
] }),
|
|
3042
|
-
/* @__PURE__ */ (0,
|
|
3043
|
-
mounted && messages.length > 0 && /* @__PURE__ */ (0,
|
|
3134
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5", children: [
|
|
3135
|
+
mounted && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3044
3136
|
"button",
|
|
3045
3137
|
{
|
|
3046
3138
|
onClick: clearHistory,
|
|
3047
3139
|
title: "Clear conversation",
|
|
3048
3140
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
|
|
3049
|
-
children: /* @__PURE__ */ (0,
|
|
3141
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Trash2, { className: "w-3.5 h-3.5" })
|
|
3050
3142
|
}
|
|
3051
3143
|
),
|
|
3052
|
-
isResized && onResetResize && /* @__PURE__ */ (0,
|
|
3144
|
+
isResized && onResetResize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3053
3145
|
"button",
|
|
3054
3146
|
{
|
|
3055
3147
|
onClick: onResetResize,
|
|
3056
3148
|
title: "Reset to default size",
|
|
3057
3149
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
|
|
3058
|
-
children: /* @__PURE__ */ (0,
|
|
3150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.RotateCcw, { className: "w-3.5 h-3.5" })
|
|
3059
3151
|
}
|
|
3060
3152
|
),
|
|
3061
|
-
onMaximize && /* @__PURE__ */ (0,
|
|
3153
|
+
onMaximize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3062
3154
|
"button",
|
|
3063
3155
|
{
|
|
3064
3156
|
onClick: onMaximize,
|
|
3065
3157
|
title: isMaximized ? "Minimize" : "Maximize",
|
|
3066
3158
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
|
|
3067
|
-
children: isMaximized ? /* @__PURE__ */ (0,
|
|
3159
|
+
children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Maximize2, { className: "w-3.5 h-3.5" })
|
|
3068
3160
|
}
|
|
3069
3161
|
),
|
|
3070
|
-
showClose && onClose && /* @__PURE__ */ (0,
|
|
3162
|
+
showClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3071
3163
|
"button",
|
|
3072
3164
|
{
|
|
3073
3165
|
onClick: onClose,
|
|
3074
3166
|
title: "Close chat",
|
|
3075
3167
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
|
|
3076
|
-
children: /* @__PURE__ */ (0,
|
|
3168
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "w-4 h-4" })
|
|
3077
3169
|
}
|
|
3078
3170
|
)
|
|
3079
3171
|
] })
|
|
@@ -3081,24 +3173,24 @@ function ChatWindow({
|
|
|
3081
3173
|
]
|
|
3082
3174
|
}
|
|
3083
3175
|
),
|
|
3084
|
-
/* @__PURE__ */ (0,
|
|
3176
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent", children: [
|
|
3085
3177
|
!mounted || isEmpty ? (
|
|
3086
3178
|
/* Welcome state */
|
|
3087
|
-
/* @__PURE__ */ (0,
|
|
3088
|
-
/* @__PURE__ */ (0,
|
|
3179
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12", children: [
|
|
3180
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3089
3181
|
"div",
|
|
3090
3182
|
{
|
|
3091
3183
|
className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
|
|
3092
3184
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
|
|
3093
|
-
children: /* @__PURE__ */ (0,
|
|
3185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-8 h-8 text-white" })
|
|
3094
3186
|
}
|
|
3095
3187
|
),
|
|
3096
|
-
/* @__PURE__ */ (0,
|
|
3097
|
-
/* @__PURE__ */ (0,
|
|
3098
|
-
/* @__PURE__ */ (0,
|
|
3188
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
|
|
3189
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed", children: ui.welcomeMessage }),
|
|
3190
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2", children: "Ask a question to get started" })
|
|
3099
3191
|
] }),
|
|
3100
|
-
/* @__PURE__ */ (0,
|
|
3101
|
-
(suggestion) => /* @__PURE__ */ (0,
|
|
3192
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-wrap gap-2 justify-center mt-2", children: CHAT_SUGGESTIONS.map(
|
|
3193
|
+
(suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3102
3194
|
"button",
|
|
3103
3195
|
{
|
|
3104
3196
|
onClick: () => {
|
|
@@ -3113,7 +3205,7 @@ function ChatWindow({
|
|
|
3113
3205
|
)
|
|
3114
3206
|
) })
|
|
3115
3207
|
] })
|
|
3116
|
-
) : messages.map((msg, index) => /* @__PURE__ */ (0,
|
|
3208
|
+
) : messages.map((msg, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3117
3209
|
MessageBubble,
|
|
3118
3210
|
{
|
|
3119
3211
|
message: msg,
|
|
@@ -3122,11 +3214,12 @@ function ChatWindow({
|
|
|
3122
3214
|
primaryColor: ui.primaryColor,
|
|
3123
3215
|
accentColor: ui.accentColor,
|
|
3124
3216
|
onAddToCart,
|
|
3125
|
-
viewportSize
|
|
3217
|
+
viewportSize,
|
|
3218
|
+
onFeedback: submitFeedback
|
|
3126
3219
|
},
|
|
3127
3220
|
msg.id
|
|
3128
3221
|
)),
|
|
3129
|
-
isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ (0,
|
|
3222
|
+
isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3130
3223
|
MessageBubble,
|
|
3131
3224
|
{
|
|
3132
3225
|
message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
|
|
@@ -3137,22 +3230,22 @@ function ChatWindow({
|
|
|
3137
3230
|
viewportSize
|
|
3138
3231
|
}
|
|
3139
3232
|
),
|
|
3140
|
-
error && /* @__PURE__ */ (0,
|
|
3141
|
-
/* @__PURE__ */ (0,
|
|
3142
|
-
/* @__PURE__ */ (0,
|
|
3233
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3", children: [
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }),
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: error })
|
|
3143
3236
|
] }),
|
|
3144
|
-
/* @__PURE__ */ (0,
|
|
3237
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: bottomRef })
|
|
3145
3238
|
] }),
|
|
3146
|
-
isUploadModalOpen && /* @__PURE__ */ (0,
|
|
3147
|
-
/* @__PURE__ */ (0,
|
|
3239
|
+
isUploadModalOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200", children: [
|
|
3240
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3148
3241
|
"button",
|
|
3149
3242
|
{
|
|
3150
3243
|
onClick: () => setIsUploadModalOpen(false),
|
|
3151
3244
|
className: "absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10",
|
|
3152
|
-
children: /* @__PURE__ */ (0,
|
|
3245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "w-5 h-5" })
|
|
3153
3246
|
}
|
|
3154
3247
|
),
|
|
3155
|
-
/* @__PURE__ */ (0,
|
|
3248
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3156
3249
|
DocumentUpload,
|
|
3157
3250
|
{
|
|
3158
3251
|
namespace: projectId,
|
|
@@ -3160,9 +3253,9 @@ function ChatWindow({
|
|
|
3160
3253
|
}
|
|
3161
3254
|
)
|
|
3162
3255
|
] }) }),
|
|
3163
|
-
/* @__PURE__ */ (0,
|
|
3164
|
-
(suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ (0,
|
|
3165
|
-
suggestions.map((suggestion) => /* @__PURE__ */ (0,
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}`, children: [
|
|
3257
|
+
(suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [
|
|
3258
|
+
suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
3166
3259
|
"button",
|
|
3167
3260
|
{
|
|
3168
3261
|
onClick: () => {
|
|
@@ -3173,19 +3266,19 @@ function ChatWindow({
|
|
|
3173
3266
|
},
|
|
3174
3267
|
className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group",
|
|
3175
3268
|
children: [
|
|
3176
|
-
/* @__PURE__ */ (0,
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3 text-amber-400" }),
|
|
3177
3270
|
suggestion
|
|
3178
3271
|
]
|
|
3179
3272
|
},
|
|
3180
3273
|
suggestion
|
|
3181
3274
|
)),
|
|
3182
|
-
isSuggesting && suggestions.length === 0 && /* @__PURE__ */ (0,
|
|
3183
|
-
/* @__PURE__ */ (0,
|
|
3275
|
+
isSuggesting && suggestions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse", children: [
|
|
3276
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Sparkles, { className: "w-3 h-3" }),
|
|
3184
3277
|
"Thinking..."
|
|
3185
3278
|
] })
|
|
3186
3279
|
] }),
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3188
|
-
/* @__PURE__ */ (0,
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}`, children: [
|
|
3281
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3189
3282
|
"textarea",
|
|
3190
3283
|
{
|
|
3191
3284
|
ref: inputRef,
|
|
@@ -3205,7 +3298,7 @@ function ChatWindow({
|
|
|
3205
3298
|
style: { scrollbarWidth: "none" }
|
|
3206
3299
|
}
|
|
3207
3300
|
),
|
|
3208
|
-
ui.enableVoiceInput !== false && /* @__PURE__ */ (0,
|
|
3301
|
+
ui.enableVoiceInput !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3209
3302
|
"button",
|
|
3210
3303
|
{
|
|
3211
3304
|
type: "button",
|
|
@@ -3213,28 +3306,28 @@ function ChatWindow({
|
|
|
3213
3306
|
disabled: isLoading,
|
|
3214
3307
|
className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
|
|
3215
3308
|
title: isListening ? "Stop listening" : "Start voice input",
|
|
3216
|
-
children: isListening ? /* @__PURE__ */ (0,
|
|
3309
|
+
children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Mic, { className: "w-4 h-4" })
|
|
3217
3310
|
}
|
|
3218
3311
|
),
|
|
3219
|
-
ui.allowUpload !== false && /* @__PURE__ */ (0,
|
|
3312
|
+
ui.allowUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3220
3313
|
"button",
|
|
3221
3314
|
{
|
|
3222
3315
|
type: "button",
|
|
3223
3316
|
onClick: () => setIsUploadModalOpen(true),
|
|
3224
3317
|
className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10",
|
|
3225
3318
|
title: "Upload Document",
|
|
3226
|
-
children: /* @__PURE__ */ (0,
|
|
3319
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Paperclip, { className: "w-4 h-4" })
|
|
3227
3320
|
}
|
|
3228
3321
|
),
|
|
3229
|
-
isLoading ? /* @__PURE__ */ (0,
|
|
3322
|
+
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3230
3323
|
"button",
|
|
3231
3324
|
{
|
|
3232
3325
|
onClick: stop,
|
|
3233
3326
|
className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 shadow-md bg-rose-500 hover:bg-rose-600 text-white cursor-pointer",
|
|
3234
3327
|
title: "Stop generating",
|
|
3235
|
-
children: /* @__PURE__ */ (0,
|
|
3328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-3.5 h-3.5 bg-white rounded-[2px]" })
|
|
3236
3329
|
}
|
|
3237
|
-
) : /* @__PURE__ */ (0,
|
|
3330
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
3238
3331
|
"button",
|
|
3239
3332
|
{
|
|
3240
3333
|
onClick: sendMessage,
|
|
@@ -3244,11 +3337,11 @@ function ChatWindow({
|
|
|
3244
3337
|
background: input.trim() ? `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` : "rgba(148, 163, 184, 0.2)"
|
|
3245
3338
|
// slate-400/20 for light mode disabled
|
|
3246
3339
|
},
|
|
3247
|
-
children: /* @__PURE__ */ (0,
|
|
3340
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowUp, { className: "w-4 h-4 text-white" })
|
|
3248
3341
|
}
|
|
3249
3342
|
)
|
|
3250
3343
|
] }),
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3344
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2", children: "Press Enter to send \xB7 Shift+Enter for new line" })
|
|
3252
3345
|
] })
|
|
3253
3346
|
]
|
|
3254
3347
|
}
|
|
@@ -3256,7 +3349,7 @@ function ChatWindow({
|
|
|
3256
3349
|
}
|
|
3257
3350
|
|
|
3258
3351
|
// src/components/ChatWidget.tsx
|
|
3259
|
-
var
|
|
3352
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3260
3353
|
var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
|
|
3261
3354
|
var GEMINI_STYLES = `
|
|
3262
3355
|
@keyframes shapeshift {
|
|
@@ -3295,7 +3388,7 @@ var GEMINI_STYLES = `
|
|
|
3295
3388
|
--circle: shape(evenodd from 13.482% 79.505%, curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, close);
|
|
3296
3389
|
}
|
|
3297
3390
|
`;
|
|
3298
|
-
function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers }) {
|
|
3391
|
+
function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, retrivoraApiBase, headers }) {
|
|
3299
3392
|
const { ui } = useConfig();
|
|
3300
3393
|
const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
|
|
3301
3394
|
const [hasUnread, setHasUnread] = (0, import_react13.useState)(false);
|
|
@@ -3351,9 +3444,9 @@ function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers })
|
|
|
3351
3444
|
}
|
|
3352
3445
|
};
|
|
3353
3446
|
const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
|
|
3354
|
-
return /* @__PURE__ */ (0,
|
|
3355
|
-
/* @__PURE__ */ (0,
|
|
3356
|
-
/* @__PURE__ */ (0,
|
|
3447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
3448
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("style", { dangerouslySetInnerHTML: { __html: GEMINI_STYLES } }),
|
|
3449
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
3357
3450
|
"div",
|
|
3358
3451
|
{
|
|
3359
3452
|
className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
|
|
@@ -3363,7 +3456,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers })
|
|
|
3363
3456
|
maxHeight: "calc(100vh - 6rem)"
|
|
3364
3457
|
},
|
|
3365
3458
|
children: [
|
|
3366
|
-
/* @__PURE__ */ (0,
|
|
3459
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3367
3460
|
ChatWindow,
|
|
3368
3461
|
{
|
|
3369
3462
|
className: "h-full relative z-10",
|
|
@@ -3376,10 +3469,11 @@ function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers })
|
|
|
3376
3469
|
isMaximized,
|
|
3377
3470
|
onAddToCart,
|
|
3378
3471
|
apiUrl,
|
|
3472
|
+
retrivoraApiBase,
|
|
3379
3473
|
headers
|
|
3380
3474
|
}
|
|
3381
3475
|
),
|
|
3382
|
-
/* @__PURE__ */ (0,
|
|
3476
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3383
3477
|
"div",
|
|
3384
3478
|
{
|
|
3385
3479
|
className: `absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${ui.visualStyle === "solid" ? "bg-white dark:bg-[#0f0f1a]" : "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl"} ${position === "bottom-left" ? "left-5" : "right-5"}`
|
|
@@ -3388,18 +3482,18 @@ function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers })
|
|
|
3388
3482
|
]
|
|
3389
3483
|
}
|
|
3390
3484
|
),
|
|
3391
|
-
/* @__PURE__ */ (0,
|
|
3485
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
3392
3486
|
"button",
|
|
3393
3487
|
{
|
|
3394
3488
|
onClick: isOpen ? () => setIsOpen(false) : handleOpen,
|
|
3395
3489
|
className: `group fixed z-[9999] w-14 h-14 drop-shadow-2xl flex items-center justify-center transition-all duration-300 cursor-pointer hover:scale-110 active:scale-95 ${positionClass}`,
|
|
3396
3490
|
"aria-label": "Open chat",
|
|
3397
3491
|
children: [
|
|
3398
|
-
/* @__PURE__ */ (0,
|
|
3492
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3399
3493
|
"div",
|
|
3400
3494
|
{
|
|
3401
3495
|
className: "absolute inset-0 transition-all duration-300 overflow-hidden rounded-full group-hover:rounded-none group-hover:animate-[shapeshift_5s_ease-in-out_infinite_forwards]",
|
|
3402
|
-
children: /* @__PURE__ */ (0,
|
|
3496
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3403
3497
|
"div",
|
|
3404
3498
|
{
|
|
3405
3499
|
className: "absolute top-0 left-0 w-[400%] h-[400%] transition-transform duration-300 group-hover:animate-[gradientMove_3.5s_ease-in-out_infinite_alternate]",
|
|
@@ -3410,27 +3504,67 @@ function ChatWidget({ position = "bottom-right", onAddToCart, apiUrl, headers })
|
|
|
3410
3504
|
)
|
|
3411
3505
|
}
|
|
3412
3506
|
),
|
|
3413
|
-
/* @__PURE__ */ (0,
|
|
3507
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3414
3508
|
"span",
|
|
3415
3509
|
{
|
|
3416
3510
|
className: "absolute inset-0 rounded-full animate-ping opacity-20 pointer-events-none",
|
|
3417
3511
|
style: { background: ui.primaryColor }
|
|
3418
3512
|
}
|
|
3419
3513
|
),
|
|
3420
|
-
/* @__PURE__ */ (0,
|
|
3514
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3421
3515
|
"span",
|
|
3422
3516
|
{
|
|
3423
3517
|
className: `relative z-10 transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`,
|
|
3424
|
-
children: isOpen ? /* @__PURE__ */ (0,
|
|
3518
|
+
children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react9.MessageSquare, { className: "w-6 h-6 text-white" })
|
|
3425
3519
|
}
|
|
3426
3520
|
),
|
|
3427
|
-
hasUnread && !isOpen && /* @__PURE__ */ (0,
|
|
3521
|
+
hasUnread && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white", children: "1" })
|
|
3428
3522
|
]
|
|
3429
3523
|
}
|
|
3430
3524
|
)
|
|
3431
3525
|
] });
|
|
3432
3526
|
}
|
|
3433
3527
|
|
|
3528
|
+
// src/components/CodeViewer.tsx
|
|
3529
|
+
var import_react14 = __toESM(require("react"));
|
|
3530
|
+
var import_lucide_react10 = require("lucide-react");
|
|
3531
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3532
|
+
function CodeViewer({ snippet }) {
|
|
3533
|
+
const [copied, setCopied] = import_react14.default.useState(false);
|
|
3534
|
+
const handleCopy = () => {
|
|
3535
|
+
navigator.clipboard.writeText(snippet.code);
|
|
3536
|
+
setCopied(true);
|
|
3537
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
3538
|
+
};
|
|
3539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col rounded-2xl border border-white/8 overflow-hidden min-h-[300px] shadow-xl", children: [
|
|
3540
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between px-5 py-3 border-b border-white/5 bg-[#0d0d1a]", children: [
|
|
3541
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
3542
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-1.5", children: [
|
|
3543
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-rose-500/80" }),
|
|
3544
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-amber-500/80" }),
|
|
3545
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-emerald-500/80" })
|
|
3546
|
+
] }),
|
|
3547
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[10px] font-mono text-white/25 uppercase tracking-widest", children: snippet.language })
|
|
3548
|
+
] }),
|
|
3549
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3550
|
+
"button",
|
|
3551
|
+
{
|
|
3552
|
+
onClick: handleCopy,
|
|
3553
|
+
className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold text-white/35 hover:text-white/80 hover:bg-white/5 transition-all active:scale-95",
|
|
3554
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
3555
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.Check, { size: 12, className: "text-emerald-400" }),
|
|
3556
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-emerald-400", children: "Copied!" })
|
|
3557
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
3558
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react10.Copy, { size: 12 }),
|
|
3559
|
+
"Copy Code"
|
|
3560
|
+
] })
|
|
3561
|
+
}
|
|
3562
|
+
)
|
|
3563
|
+
] }),
|
|
3564
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-6 font-mono text-[12px] leading-relaxed overflow-auto flex-grow bg-[#080818]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { className: "whitespace-pre text-indigo-200/85", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { children: snippet.code }) }) })
|
|
3565
|
+
] });
|
|
3566
|
+
}
|
|
3567
|
+
|
|
3434
3568
|
// src/exceptions/index.ts
|
|
3435
3569
|
var RetrivoraError = class extends Error {
|
|
3436
3570
|
constructor(message, code, details) {
|
|
@@ -3475,12 +3609,15 @@ var AuthenticationException = class extends RetrivoraError {
|
|
|
3475
3609
|
AuthenticationException,
|
|
3476
3610
|
ChatWidget,
|
|
3477
3611
|
ChatWindow,
|
|
3612
|
+
CodeViewer,
|
|
3478
3613
|
ConfigProvider,
|
|
3479
3614
|
ConfigurationException,
|
|
3480
3615
|
DocumentUpload,
|
|
3481
3616
|
EmbeddingFailedException,
|
|
3482
3617
|
MessageBubble,
|
|
3483
3618
|
ObservabilityPanel,
|
|
3619
|
+
ProductCard,
|
|
3620
|
+
ProductCarousel,
|
|
3484
3621
|
ProviderNotFoundException,
|
|
3485
3622
|
RateLimitException,
|
|
3486
3623
|
RetrievalException,
|